CN110673835A - Dynamic assembly type development system, method, computer and computer program - Google Patents

Abstract

The invention discloses a dynamic assembly development system, method, computer and computer program. The system includes a cloud server, a client and a module framework composed of several functional modules; wherein: the cloud server is used to retrieve data; the client The terminal is connected to the cloud server to display the view interface. The invention provides a dynamic assembly development system, method, computer and computer program, combined with web technology and design mode, proposes a cross-platform mobile lightweight dynamic assembly software development method, the module framework optimizes the design of key technologies, Using framework development, it has the characteristics of simple implementation process, low development cost, short cycle, excellent performance, excellent experience, dynamic easy structure, etc. It is suitable for mainstream mobile platforms and has good cross-platform performance.

Description

A dynamic assembly development system, method, computer and computer program

technical field

The present invention relates to the technical field of software development, and more particularly, to a dynamic assembly development system, method, computer and computer program.

Background technique

The virtual machine simulates a complete computer system through software, runs the application software on the virtual machine, and is not affected by the system software and hardware of the real machine, making the application software cross-platform. At present, the ios platform supports the web engine of Flash technology, but it is difficult to realize the Java virtual machine based on the mobile platform. The ui controls of the native app have poor user experience; the existing popular domestic mui framework is based on the ui of iOS7 and supplements some ui controls unique to the android system, which is closer to the ui experience of the native app, but cannot call the hardware device of the mobile terminal . Due to the differences of various operating systems on the mobile terminal, application porting is difficult and the development cycle is long.

SUMMARY OF THE INVENTION

In order to solve the problems of difficult application transplantation and long development cycle of various operating systems of the mobile terminal, the present invention provides a dynamic assembly development system, method, computer and computer program.

In order to achieve the above purpose of the invention, the technical scheme adopted is:

A dynamically assembled development system includes a cloud server, a client and a module framework composed of several functional modules; wherein:

The cloud server is used to retrieve data;

The client is connected to the cloud server for displaying a view interface.

The module framework includes a component library, a data module, a page template, a data engine, a virtual DOM, a component rendering engine and a mobile device JS API interface; wherein:

The component library, the data module, the page template, the data engine, the virtual DOM, the component rendering engine and the mobile device JS API interface are connected by loose coupling;

The component library is used to form the component system of the module framework;

The data engine is used for two-way data transmission between the cloud server and the client, and is also used for acquiring client data;

The component rendering engine is used for component rendering and typesetting;

The virtual DOM constructs a DOM tree structure for updating the view;

The mobile device JS API interface is operated in an asynchronous manner to realize the operation of the underlying device;

The page template is used to present a mobile user program interface;

The data module is used to store data.

Components in the component library are arranged by building blocks.

A dynamic assembly development method includes the following steps:

S1: The developer starts and loads the lightweight javascript engine to initialize the program interface;

S2: The developer downloads the components in the cloud server or develops and designs the components themselves, configures the above-mentioned components, and arranges the components by building blocks, and designs the mobile user application program interface by dragging;

S3: The developer configures the data engine, runs the application, loads the component data asynchronously from the cloud server, caches the big data locally and presents it;

S4: The developer optimizes and tests the system, and optimizes the configuration parameters by testing the network loading performance.

The virtual DOM uses javascript objects to represent DOM information and structure. When the state changes, the javascript object structure is re-rendered. The specific algorithm includes:

(1) Use the object structure of javascript to represent the structure of the DOM tree to build a real DOM tree,

insert into the document;

(2) When the state changes, build a new DOM tree, compare the new tree with the old tree, and record

difference between two trees;

(3) Apply the recorded differences to the real DOM tree constructed, and the view updates.

The data engine executes the algorithm:

(1) Execute the then method, when the CDEngine asynchronous operation is successful, execute the callback method and enter the callbacks queue;

(2) When creating a CDEngine instance, the incoming function is assigned the parameter resolve of another function, and the parameter valve represents the result returned by the asynchronous operation. When the then method is executed successfully, the resolve method will be called to execute all the callback functions in the callbacks queue. .

The present solution provides a computer that employs a dynamic assembly development method when used.

This solution provides a computer program that uses a dynamic assembly development method when the computer program is executed by a processor.

The module framework focuses on the V in the MVC architecture to realize view componentization. Starting from the UI, different components are abstracted, and then the client software interface assembles the components like building blocks. The module framework is designed in a seven-layer system. The component library, the data module, the page template and the data engine are at the same level, and the virtual DOM, the component rendering engine, and the mobile device JSAPI interface are distributed at different levels. The module framework is a loosely coupled framework, and each component is relatively independent, can also self-expand, and can be used directly with as few modifications as possible. The modular framework is based on a component system, and developers can make mobile applications like building blocks. Components can also nest sub-components to form new components, and new components can be nested as sub-components into any component to form new components. , so that the component functions are more and more rich, there are more and more components, and there are more and more components available to developers, which saves the time and cost of UI component development and design, and improves development efficiency; the module framework calls the local device JSAPI through javascript scripts, using Abnormal communication sends a request to realize the operation of the underlying device. After receiving the processing message, the device client implements the script callback by executing the loadinit method of the script component, realizing the effect of no effect on the DOM operation of different mobile devices, making this module framework Has a strong cross-platform capability.

Compared with the prior art, the beneficial effects of the present invention are:

The invention provides a dynamic assembly development system, method, computer and computer program, combined with web technology and design mode, proposes a cross-platform mobile lightweight dynamic assembly software development method, the module framework optimizes the design of key technologies, Using framework development, it has the characteristics of simple implementation process, low development cost, short cycle, excellent performance, excellent experience, dynamic easy structure, etc. It is suitable for mainstream mobile platforms and has good cross-platform performance.

Description of drawings

Fig. 1 is the development method step diagram of the invention;

Fig. 2 is the overall module frame diagram of the invention;

Detailed ways

The accompanying drawings are for illustrative purposes only, and should not be construed as limitations on this patent;

The present invention will be further elaborated below in conjunction with the accompanying drawings and embodiments.

Example 1

As shown in Figure 1, a dynamic assembly development system includes a cloud server, a client and a module framework composed of several functional modules; wherein:

The cloud server is used to retrieve data;

The client is connected to the cloud server for displaying a view interface.

The module framework includes a component library, a data module, a page template, a data engine, a virtual DOM, a component rendering engine and a mobile device JS API interface; wherein:

The component library, the data module, the page template, the data engine, the virtual DOM, the component rendering engine and the mobile device JS API interface are connected by loose coupling;

The component library is used to form the component system of the module framework;

The data engine is used for two-way data transmission between the cloud server and the client, and is also used for acquiring client data;

The component rendering engine is used for component rendering and typesetting;

The virtual DOM constructs a DOM tree structure for updating the view;

The mobile device JS API interface is operated in an asynchronous manner to realize the operation of the underlying device;

The page template is used to present a mobile user program interface;

The data module is used to store data.

Components in the component library are arranged by building blocks.

A dynamic assembly development method includes the following steps:

S1: The developer starts and loads the lightweight javascript engine to initialize the program interface;

S2: The developer downloads the components in the cloud server or develops and designs the components themselves, configures the above-mentioned components, and arranges the components by building blocks, and designs the mobile user application program interface by dragging;

S3: The developer configures the data engine, runs the application, loads the component data asynchronously from the cloud server, caches the big data locally and presents it;

S4: The developer optimizes and tests the system, and optimizes the configuration parameters by testing the network loading performance.

The virtual DOM uses javascript objects to represent DOM information and structure. When the state changes, the javascript object structure is re-rendered. The specific algorithm includes:

(3) Use the object structure of javascript to represent the structure of the DOM tree to build a real DOM tree,

insert into the document;

(4) When the state changes, build a new DOM tree, compare the new tree with the old tree, and record

difference between two trees;

(3) Apply the recorded differences to the real DOM tree constructed, and the view updates.

The data engine executes the algorithm bit:

(1) Execute the then method, when the CDEngine asynchronous operation is successful, execute the callback method and enter the callbacks queue;

(2) When creating a CDEngine instance, the incoming function is assigned the parameter resolve of another function, and the parameter valve represents the result returned by the asynchronous operation. When the then method is executed successfully, the resolve method will be called to execute all the callback functions in the callbacks queue. .

The present solution provides a computer that employs a dynamic assembly development method when used.

This solution provides a computer program that uses a dynamic assembly development method when the computer program is executed by a processor.

Example 2

The virtual DOM uses JavaScript objects to represent DOM information and structure. When the state changes, the JavaScript object structure is re-rendered. The virtual DOM preserves the hierarchical relationship and some basic properties between Elements. Each Element in the virtual DOM actually only sets a few useful properties, so it is much faster than the BW DOM. Specific algorithm implementation:

(1) Use the JavaScript object structure to represent the structure of the DOM tree; then use this tree to build a real DOM tree and insert it into the document;

(2) When the state changes, reconstruct a new object tree. Then compare the new tree with the old tree and record the difference between the two trees;

(3) Apply the recorded differences to the real DOM tree constructed, and the view is updated.

Example 3

The data transmission from the client component to the cloud server is completed by the data engine, and the data acquisition and storage of the client is also completed by the data engine. The data engine forms a data channel between the client and the server, and the data extraction of the client component is realized through the data engine. The data requested by the client is first submitted to the data engine for storage, and then sent to the server. When the business program corresponding to the server is executed, the data to be returned is stored in the data engine. Finally, the data in the data engine can be parsed and displayed by the client. The data engine is designed by a single class, and the data engine execution algorithm is as follows:

1. Execute the then method. When the CDEngine asynchronous operation is successful, execute the callback method and enter the callbacks queue;

2. The function passed in when the CDEngine instance is created is given to the parameter of another function, namely resolve. The parameter value represents the result returned by the asynchronous operation. When the then method is executed successfully, the resolve method will be called, and the callback function in the callbacks queue will be called. All executed.

Example 4

The module framework focuses on the V in the MVC architecture to realize view componentization. Starting from the UI, different components are abstracted, and then the client software interface assembles the components like building blocks. The module framework is designed in a seven-layer system. The component library, the data module, the page template and the data engine are at the same level, and the virtual DOM, the component rendering engine, and the mobile device JSAPI interface are distributed at different levels. The module framework is a loosely coupled framework, and each component is relatively independent, can also self-expand, and can be used directly with as few modifications as possible. The modular framework is based on a component system, and developers can make mobile applications like building blocks. Components can also nest sub-components to form new components, and new components can be nested as sub-components into any component to form new components. , so that the component functions are more and more rich, there are more and more components, and there are more and more components available to developers, which saves the time and cost of UI component development and design, and improves development efficiency; the module framework calls the local device JSAPI through javascript scripts, using Abnormal communication sends a request to realize the operation of the underlying device. After receiving the processing message, the device client implements the script callback by executing the loadinit method of the script component, realizing the effect of no effect on the DOM operation of different mobile devices, making this module framework Has a strong cross-platform capability.

Obviously, the above-mentioned embodiments of the present invention are only examples for clearly illustrating the present invention, rather than limiting the embodiments of the present invention. For those of ordinary skill in the art, changes or modifications in other different forms can also be made on the basis of the above description. There is no need and cannot be exhaustive of all implementations here. Any modifications, equivalent replacements and improvements made within the spirit and principle of the present invention shall be included within the protection scope of the claims of the present invention.

Claims (8)

1. a dynamic assembly type development system, is characterized in that: comprise the module frame that cloud server, client and some functional modules are formed; Wherein: The cloud server is used to retrieve data; The client is connected to the cloud server for displaying a view interface. 2. a kind of dynamic prefab development system according to claim 1, is characterized in that: described module framework comprises component library, data module, page template, data engine, virtual DOM, component rendering engine and mobile device JS API interface ;in: The component library, the data module, the page template, the data engine, the virtual DOM, the component rendering engine and the mobile device JS API interface are all loosely coupled connections; The component library is used to form the component system of the module framework; The data engine is used for two-way data transfer between the cloud server and the client, and is also used for acquiring client data; The component rendering engine is used for component rendering and typesetting; The virtual DOM constructs a DOM tree structure for updating the view; The mobile device JS API interface is operated in an asynchronous manner to realize the operation of the underlying device; The page template is used to present a mobile user program interface; The data module is used to store data. 3 . The dynamic assembly development system according to claim 2 , wherein the components in the component library are arranged by building blocks. 4 . 4. a dynamic assembly type development method is characterized in that: comprise the following steps: S1: The developer starts and loads the lightweight javascript engine to initialize the program interface; S2: The developer downloads the components in the cloud server or develops and designs the components themselves, configures the above-mentioned components, and arranges the components by building blocks, and designs the mobile user application program interface by dragging; S3: The developer configures the data engine, runs the application, loads the component data asynchronously from the cloud server, caches the big data locally and presents it; S4: The developer optimizes and tests the system, and optimizes the configuration parameters by testing the network loading performance. 5. a kind of dynamic prefab development method according to claim 4 is characterized in that: virtual DOM represents DOM information and structure with javascript object, when state changes, the object structure of javascript is re-rendered, and virtual DOM builds DOM tree structure, Used to update the view. 6. a kind of dynamic assembly type development method according to claim 4, is characterized in that: data engine executes algorithm bit: (1) Execute the then method, when the CDEngine asynchronous operation is successful, execute the callback method and enter the callbacks queue; (2) When creating a CDEngine instance, the incoming function is assigned the parameter resolve of another function, and the parameter valve represents the result returned by the asynchronous operation. When the then method is executed successfully, the resolve method will be called to execute all the callback functions in the callbacks queue. . 7 . A computer, characterized in that: the computer uses a dynamic assembly development method according to any one of claims 4 to 6 when the computer is used. 8 . A computer program, characterized in that: when the computer program is executed by a processor, a dynamic assembly development method according to any one of claims 4 to 6 is implemented.