CN106775788A - A kind of method for automatically generating and running JavaScript file - Google Patents

Abstract

Translated fromChinese

本发明涉及一种自动生成和运行JavaScript文件的方法，所述方法包含：步骤101)编写自动生成和运行JavaScript文件的JavaScript工具函数集；所述JavaScript工具函数集进一步包含如下操作：指定id的页面元素在预定时间改变位置，大小，CSS样式货替换资源文件；指定id的页面元素在指定事件触发时改变位置，大小，CSS样式或资源文件，其中所述指定时间包含鼠标事件或播放器事件；改变指定id的页面元素对事件触发的处理方式；步骤102)制定需求描述文件的格式要求；步骤103)根据需求描述文件的格式要求编写转换方法，所述转换方法为：解析需求描述文件；将需求转换为元素与事件的不同组合转换；通过调用编写的JavaScript工具函数集中的操作生成JavaScript文件；在需求描述文件所关联的HTML文件中执行。

The present invention relates to a method for automatically generating and running a JavaScript file, the method comprising: step 101) writing a JavaScript tool function set for automatically generating and running a JavaScript file; the JavaScript tool function set further includes the following operations: The element changes its position, size, CSS style or resource file at a predetermined time; the page element with a specified id changes its position, size, CSS style or resource file when a specified event is triggered, wherein the specified time includes a mouse event or a player event; Change the processing mode of the page element of designated id to event triggering; Step 102) formulate the format requirement of demand description file; Step 103) write conversion method according to the format requirement of demand description file, described conversion method is: analyze demand description file; Requirements are converted into different combinations of elements and events; JavaScript files are generated by calling the operations in the written JavaScript tool function set; they are executed in the HTML files associated with the requirements description files.

Description

Translated fromChinese

一种自动生成和运行JavaScript文件的方法A Method of Automatically Generating and Running JavaScript Files

技术领域technical field

本发明涉及计算机和互联网领域，具体涉及一种自动生成和运行JavaScript文件的方法。The invention relates to the fields of computers and the Internet, in particular to a method for automatically generating and running JavaScript files.

背景技术Background technique

在WEB开发过程中，开发者可以编写JavaScript代码实现对HTML页面元素、页面布局等的调整。但是由于开发中页面众多，开发者不得不针对不同页面重复编写大量JavaScript代码以实现预期功能。因此造成在WEB开发过程中的大量的重复性工作。During the WEB development process, developers can write JavaScript codes to adjust HTML page elements, page layout, etc. However, due to the large number of pages under development, developers have to repeatedly write a large amount of JavaScript codes for different pages to achieve expected functions. Therefore, a lot of repetitive work is caused in the WEB development process.

发明内容Contents of the invention

本发明的目的在于，为了克服上述现有技术的缺陷，从而提供一种JavaScript文件自动生成和运行方法。The object of the present invention is to provide a method for automatically generating and running JavaScript files in order to overcome the above-mentioned defects in the prior art.

为了实现上述目的，本发明提供一种自动生成和运行JavaScript文件的方法，所述方法包含：In order to achieve the above object, the present invention provides a method for automatically generating and running JavaScript files, the method comprising:

步骤101)编写自动生成和运行JavaScript文件的JavaScript工具函数集；所述JavaScript工具函数集进一步包含如下操作：指定id的页面元素在预定时间改变位置，大小，CSS样式货替换资源文件；指定id的页面元素在指定事件触发时改变位置，大小，CSS样式或资源文件，其中所述指定时间包含鼠标事件或播放器事件；改变指定id的页面元素对事件触发的处理方式，其中所述处理方式包含使用指定代码响应事件触发和清除事件触发。其中，id为HTML标签的id属性；CSS为万维网联盟(W3C)制定的指层叠样式表(Cascading Style Sheets)标准，定义如何显示HTML元素，这里指按照CSS标准编写的样式。Step 101) write the JavaScript tool function set that automatically generates and runs the JavaScript file; The JavaScript tool function set further includes the following operations: the page element of the specified id changes position, size, CSS style or replaces the resource file at a predetermined time; the specified id The page element changes position, size, CSS style or resource file when the specified event is triggered, wherein the specified time includes mouse event or player event; changes the processing method of the page element with the specified id to event triggering, wherein the processing method includes Respond to event fires and clear event fires with the specified code. Among them, id is the id attribute of the HTML tag; CSS refers to the Cascading Style Sheets (Cascading Style Sheets) standard formulated by the World Wide Web Consortium (W3C), which defines how to display HTML elements, and here refers to styles written in accordance with CSS standards.

步骤102)制定需求描述文件的格式要求。Step 102) Formulate the format requirements of the requirement description file.

步骤103)根据需求描述文件的格式要求编写转换方法，所述转换方法为：解析需求描述文件；将需求转换为元素与事件的不同组合转换；通过调用编写的JavaScript工具函数集中的操作生成JavaScript文件；在需求描述文件所关联的HTML文件中执行。Step 103) write conversion method according to the format requirement of demand description file, described conversion method is: analyze demand description file; Convert demand into the different combination conversion of element and event; Generate JavaScript file by calling the operation of JavaScript tool function set ; Execute in the HTML file associated with the requirement description file.

可选的，上述需求描述文件的格式要求为：HTML元素定义和资源列表，所述HTML元素定义列出HTML元素对时间、事件响应的方式；所述资源列表列出HTML文件可访问的资源文件，所访问的资源文件应包含资源id及资源位置。Optionally, the format requirements of the above requirement description file are: HTML element definition and resource list, the HTML element definition lists the way HTML elements respond to time and events; the resource list lists resource files accessible by HTML files , the accessed resource file should contain resource id and resource location.

进一步可选的，按照预定时间改变HTML布局的JavaScript工具函数进一步包含：Further optionally, the JavaScript tool function for changing the HTML layout according to a predetermined time further includes:

步骤101-1)创建一个以队列为基础的时间表实例，每个时间表任务包括优先级、执行时间和执行动作三个内容；其中，在执行时间相同时优先执行高优先级任务。Step 101-1) Create a queue-based timetable instance, each timetable task includes three contents: priority, execution time and execution action; wherein, when the execution time is the same, the high priority task is executed first.

步骤101-2)创建外部函数向接口用于对步骤101-1)创建的时间表添加项目，对于各类终止或移除类任务，应给予较高优先级；其中，所述各类终止类任务包含终止显示一个或多个图片或终止播放一个或多个视频。Step 101-2) Create an external function to add items to the time table created in step 101-1) to the interface. For various types of termination or removal tasks, higher priority should be given; wherein, the various types of termination tasks Tasks include terminating the display of one or more images or terminating the playback of one or more videos.

步骤101-3)创建任务排序方法，对步骤101-1)创建的时间表进行排序；按照任务时间升序排列，且当任务时间相同时按优先级降序排列。Step 101-3) Create a task sorting method to sort the timetable created in step 101-1) in ascending order of task time, and in descending order of priority when the task time is the same.

步骤101-4)创建递归调用执行函数，接受任务作为参数。Step 101-4) Create a recursive call execution function that accepts a task as a parameter.

步骤101-5)创建外部函数接口用以任务启动执行。Step 101-5) Create an external function interface for task startup and execution.

上述步骤101-4)进一步包含：Above-mentioned step 101-4) further comprises:

步骤101-4-1)执行任务。Step 101-4-1) Execute the task.

步骤101-4-2)若时间表内没有更多任务则结束，否则执行步骤101-4-3)。Step 101-4-2) if there are no more tasks in the timetable, then end, otherwise execute step 101-4-3).

步骤101-4-3)设定下次执行任务为时间表第一项任务。Step 101-4-3) Set the next execution task as the first task in the schedule.

步骤101-4-4)设定定时器时间为距时间表第一项任务的时间。Step 101-4-4) Set the timer time as the time from the first task in the schedule.

步骤101-4-5)将该任务从时间表中移除。Step 101-4-5) Remove the task from the schedule.

步骤101-4-6)启动定时器，并设定在定时器被触发时调用本函数执行任务。Step 101-4-6) Start the timer, and set this function to execute the task when the timer is triggered.

上述步骤101-5)进一步包含：Above-mentioned step 101-5) further comprises:

步骤101-5-1)应用步骤101-3)中的排序方法对步骤101-1)创建的时间表进行排序。Step 101-5-1) Apply the sorting method in step 101-3) to sort the time table created in step 101-1).

步骤101-5-2)以空任务为参数调用步骤101-4)，以启动脚本执行过程。Step 101-5-2) calls step 101-4) with an empty task as a parameter to start the script execution process.

总之，本发明为了解决上述技术问题的技术方案包含以下几个步骤：步骤一：编写JavaScript工具函数集；步骤二：制定需求描述文件格式要求；步骤三：编写需求描述文件解析程序。In a word, the technical solution of the present invention to solve the above-mentioned technical problems includes the following steps: Step 1: writing JavaScript tool function set; Step 2: formulating requirements description file format requirements; Step 3: writing requirements description file analysis program.

所述的步骤一的JavaScript工具函数集包含对HTML元素操作的基本工具函数，包括对定时器、事件的响应，对布局、CSS属性的修改等。所述的步骤二的需求描述文件为XML格式，主要内容包含两部分，HTML元素定义和资源列表。HTML元素定义列出HTML元素对时间、事件响应的方式；资源列表列出HTML文件可访问的资源文件，应包含资源id及资源位置。所述的步骤三的需求描述文件解析程序，对按照步骤二编写的需求描述文件进行解析，按照不同元素的不同需求分别调用适当的步骤一种生成的JavaScript工具函数集中的函数，生成JavaScript文件，并在对应HTML文件中加入对JavaScript的引用。The JavaScript tool function set in step 1 includes basic tool functions for operating HTML elements, including responses to timers and events, modifications to layouts and CSS properties, and the like. The requirement description file in step 2 is in XML format, and its main content includes two parts, HTML element definition and resource list. The HTML element definition lists the ways in which HTML elements respond to time and events; the resource list lists resource files accessible to HTML files, and should include resource ids and resource locations. The requirement description file parsing program in step 3 analyzes the requirement description file written in step 2, and calls the appropriate step one according to the different requirements of different elements to generate a JavaScript tool function set to generate a JavaScript file, And add a reference to JavaScript in the corresponding HTML file.

与现有技术相比，本发明的技术优势在于：Compared with prior art, the technical advantage of the present invention is:

本发明的技术可以首先解析需求描述文件，然后将需求转换为元素与事件的不同组合转换，通过调用事先编写的JavaScript工具集中的方法生成JavaScript文件，并在需求描述文件所关联的HTML文件中执行。本发明可以便捷快速地自动生成JavaScript文件并加载运行。The technology of the present invention can first analyze the requirement description file, and then convert the requirement into different combinations of elements and events, generate a JavaScript file by calling a method in the pre-written JavaScript tool set, and execute it in the HTML file associated with the requirement description file . The invention can conveniently and quickly automatically generate JavaScript files and load and run them.

附图说明Description of drawings

图1为本发明设计方法的关系框图；Fig. 1 is the relational block diagram of design method of the present invention;

图2是本发明实施例提供的描述文件结构图；FIG. 2 is a structural diagram of a description file provided by an embodiment of the present invention;

图3是本发明实施例提供的描述的需求图；Fig. 3 is a demand diagram of the description provided by the embodiment of the present invention;

图4是本发明处理方法的流程示意图。Fig. 4 is a schematic flow chart of the processing method of the present invention.

具体实施方式detailed description

下面通过附图和实施例，分别对开发自动实现JavaScript自动生成和运行的基础性开发工作和终端使用者使用依照本方法开发的工具的使用分别做进一步的详细描述。The basic development work of automatically realizing JavaScript automatic generation and operation and the use of the tools developed by end users according to the method will be further described in detail below through the accompanying drawings and embodiments.

如图1所示，本发明方法涉及四类文件:HTML文件，需求描述文件，JavaScript工具函数集文件，JavaScript文件。As shown in Figure 1, the method of the present invention involves four types of files: HTML files, requirement description files, JavaScript tool function set files, and JavaScript files.

第一，开发自动实现JavaScript自动生成和运行的基础性开发工作具体步骤如下，如图4所示：First, the specific steps of the basic development work to automatically realize the automatic generation and operation of JavaScript are as follows, as shown in Figure 4:

1、编写JavaScript工具函数集文件。该工具函数集主要包含对HTML元素操作的基本工具函数，包括对定时器、事件的响应，对布局、CSS属性的修改等。JavaScript工具函数集的部分内容如下。1. Write the JavaScript tool function set file. This tool function set mainly includes basic tool functions for operating HTML elements, including responding to timers and events, modifying layout and CSS properties, etc. Part of the JavaScript tool function set is as follows.

在此将按照预定时间改变HTML布局为例进行说明。具体步骤如下：Here, changing the HTML layout according to a predetermined time will be described as an example. Specific steps are as follows:

a、创建一个以队列为基础的时间表实例。每个时间表任务包括优先级、执行时间和执行动作三个内容。其中，在执行时间时相同时有限执行高优先级任务；a. Create a queue-based schedule instance. Each schedule task includes three contents: priority, execution time and execution action. Among them, when the execution time is the same, high-priority tasks are executed in a limited manner;

b、创建外部函数向接口步骤0创建的时间表添加项目。对于各类终止、移除类任务，如终止显示某图片、终止播放某视频等，应给予较高优先级，以防止与其预定时间相同的开始任务无法正常进行。如function addTask(priority,time,cmd)；b. Create an external function to add items to the timetable created in interface step 0. For various termination and removal tasks, such as terminating the display of a certain picture, terminating the playback of a certain video, etc., a higher priority should be given to prevent the start tasks with the same scheduled time from being unable to proceed normally. Such as function addTask(priority, time, cmd);

c、创建任务排序方法，对步骤0创建的时间表进行排序。按照任务时间升序排列，任务时间相同时按优先级降序排列；c. Create a task sorting method to sort the timetable created in step 0. Sort in ascending order of task time, and sort in descending order of priority if the task time is the same;

d、创建递归调用执行函数，接受任务作为参数。d. Create a recursive call execution function that accepts the task as a parameter.

其中，上述步骤d进一步包含如下具体步骤：Wherein, the above step d further includes the following specific steps:

i.执行任务；i. to perform tasks;

ii.若时间表内没有更多任务则结束，否则执行步骤iii；ii. If there are no more tasks in the timetable, end, otherwise go to step iii;

iii.设定下次执行任务为时间表第一项任务；iii. Set the next execution task as the first task in the schedule;

iv.设定定时器时间为距时间表第一项任务的时间；iv. Set the timer time as the time from the first task in the schedule;

v.将该任务从时间表中移除；v. Remove the task from the schedule;

vi.启动定时器，并设定在定时器被触发时调用本函数执行任务。vi. Start the timer, and set this function to execute the task when the timer is triggered.

e、创建外部函数接口用以任务启动执行。e. Create an external function interface to start and execute tasks.

其中，上述步骤e进一步包含的具体步骤如下：Wherein, the specific steps further included in the above step e are as follows:

vii.应用步骤0中的排序方法对步骤0创建的时间表进行排序；vii. Apply the sorting method in step 0 to sort the schedule created in step 0;

viii.以空任务为参数调用步骤0，以启动脚本执行过程。viii. Call step 0 with an empty task as an argument to start the script execution process.

2、制定需求描述文件格式。需求描述文件的一种示例，采用XML格式。该需求描述文件主要包含两部分内容:HTML元素定义和资源列表。HTML元素定义列出HTML元素对时间、事件响应的方式；资源列表列出HTML文件可访问的资源文件，应包含资源id及资源位置。需求描述文件结构如图2所示，描述的需求下表和图3所示。2. Develop a requirement description file format. An example of a requirements description file, in XML format. The requirement description file mainly includes two parts: HTML element definition and resource list. The HTML element definition lists the ways in which HTML elements respond to time and events; the resource list lists resource files accessible to HTML files, and should include resource ids and resource locations. The structure of the requirements description file is shown in Figure 2, and the described requirements are shown in the table below and Figure 3.

3、编写自动化转换工具。转换工具的具体工作如下：3. Write automated conversion tools. The specific work of the conversion tool is as follows:

a读取使用者编写的需求描述文件，该文件应符合步骤0制定的规则。a Read the requirement description document written by the user, which should conform to the rules established in step 0.

b解析需求描述文件描述的需求，如在时间为'2015-06-18T17:45:10.952+08:00'时更换id为Image1的HTML元素的图片为image1.png。b Analyze the requirements described in the requirements description file, for example, replace the image of the HTML element whose id is Image1 with image1.png when the time is '2015-06-18T17:45:10.952+08:00'.

c对照需求，调用步骤0的步骤0生成的工具集中对应功能的接口函数，以字符串形式写入目标JavaScript文件中，如”addTask(0,'2015-06-18T17:45:10.952+08:00','document.getElementById("Image1").src＝"image1.png"；')；”。c According to the requirements, call the interface function of the corresponding function in the tool set generated in step 0 of step 0, and write it into the target JavaScript file in the form of a string, such as "addTask(0,'2015-06-18T17:45:10.952+08: 00', 'document.getElementById("Image1").src="image1.png";');".

d写入对步骤0的步骤0生成的启动函数的调用,生成目标JavaScript文件。d writes a call to the startup function generated in step 0 of step 0 to generate the target JavaScript file.

e在HTML文件中添加对步骤0生成的JavaScript的引用。e Add a reference to the JavaScript generated at step 0 in the HTML file.

第二，终端使用者使用依照本方法开发的工具的使用具体步骤如下：Second, the specific steps for end users to use the tools developed according to this method are as follows:

1、编写所需的HTML页面文件；1. Write the required HTML page file;

2、依照开发自动实现JavaScript自动生成和运行的基础性开发工作具体步骤4制定的需求描述文件格式编写需求描述文件。2. Write the requirement description file according to the requirement description file format formulated in step 4 of the basic development work that automatically realizes the automatic generation and operation of JavaScript.

3、运行自动化转换工具，提交步骤1编写的HTML页面文件和步骤2编写的需求描述文件中的文件，生成JavaScript文件。3. Run the automatic conversion tool, submit the HTML page file written in step 1 and the files in the requirement description file written in step 2, and generate a JavaScript file.

最后所应说明的是，以上实施例仅用以说明本发明的技术方案而非限制。尽管参照实施例对本发明进行了详细说明，本领域的普通技术人员应当理解，对本发明的技术方案进行修改或者等同替换，都不脱离本发明技术方案的精神和范围，其均应涵盖在本发明的权利要求范围当中。Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention rather than limit them. Although the present invention has been described in detail with reference to the embodiments, those skilled in the art should understand that modifications or equivalent replacements to the technical solutions of the present invention do not depart from the spirit and scope of the technical solutions of the present invention, and all of them should be included in the scope of the present invention. within the scope of the claims.

Claims (5)

1. a kind of method for automatically generating and running JavaScript file, methods described is included：

Step 101) write the JavaScript tool function collection for automatically generating and running JavaScript file；It is describedJavaScript tool functions collection is further comprising following operation：

The page elements of id are specified to change position, size or CSS style or replacement resource file in the scheduled time；

The page elements of id are specified to change position, size, CSS style or resource file when specified event is triggered,Wherein described specified event package contains mouse event or player event；

Change the processing mode for specifying the page elements of id to trigger event, wherein the processing mode includes to use referring toProvisioning response event triggers or removes event triggering；

Step 102) formulate requirement description file call format；

Step 103) call format that describes file according to demand writes conversion method, and the conversion method is：

A. requirement description file is parsed；

B. demand is converted into element to be changed with the various combination of event；

C. the operation by calling the JavaScript tool functions write to concentrate generates JavaScript file；

D. performed in the html file associated by requirement description file.

2. the method for automatically generating and running JavaScript file according to claim 1, it is characterised in thatThe call format of the requirement description file is：

HTML element is defined and the Resources list, and the HTML element definition lists HTML element to time, thingThe mode of part response；Described the Resources list lists the addressable resource file of html file, the resource text for being accessedPart should include resource id and resource location.

3. the method for automatically generating and running JavaScript file according to claim 1, it is characterised in thatThe JavaScript tool functions for changing HTML layout to schedule are further included：

Step 101-1) create a timetable example based on queue, each timetable task include priority,Execution time and execution act three contents；

Wherein, upon execution between it is identical when preferentially perform high-priority task；

Step 101-2) create external function to interface be used for step 101-1) create timetable add items,For all kinds of terminations or removal generic task, higher priority should be given；

Wherein, all kinds of termination generic tasks show one or more pictures or terminate playing one or many comprising terminationIndividual video；

Step 101-3) create task ranking method, to step 101-1) create timetable be ranked up；

Arranged according to task time ascending order, and the according to priority descending arrangement when task time is identical；

Step 101-4) recursive call execution function is created, receive an assignment as parameter；

Step 101-5) external function interface is created to task start execution.

4. the method for automatically generating and running JavaScript file according to claim 3, it is characterised in thatThe step 101-4) further include：

Step 101-4-1) perform task；

Step 101-4-2) terminate if no more multitask in timetable, otherwise perform step 101-4-3)；

Step 101-4-3) to set next execution task be timetable first task；

Step 101-4-4) set timer time as the time away from timetable first task；

Step 101-4-5) task is removed from timetable；

Step 101-4-6) start timer, and be set in when timer is triggered call this function perform task.

5. the method for automatically generating and running JavaScript file according to claim 3, it is characterised in thatThe step 101-5) further include：

Step 101-5-1) applying step 101-3) in sort method to step 101-1) create timetable carry outSequence；

Step 101-5-2) with idle task be parameter call step 101-4), to start script implementation procedure.