CN106250156B - Constructing method of component and device, component call method and apparatus - Google Patents
Constructing method of component and device, component call method and apparatus Download PDFInfo
- Publication number
- CN106250156B CN106250156B CN201610624773.6A CN201610624773A CN106250156B CN 106250156 B CN106250156 B CN 106250156B CN 201610624773 A CN201610624773 A CN 201610624773A CN 106250156 B CN106250156 B CN 106250156B
- Authority
- CN
- China
- Prior art keywords
- component
- react
- script
- user interface
- constructing
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
The present invention relates to a kind of constructing method of component and device, component call method and apparatus.The constructing method of component includes: acquisition functional requirement；It is extended according to functional requirement in model layer model and control layer controller, writes the functional requirement using the grammer of the step library React for constructing user interface and obtain corresponding source code；By the compilation of source code at primary script；React component is packaged into using asynchronous module load mechanism AMD specification to the primary script.Said modules construction method and device, component call method and apparatus, function is write by using the grammer of React and needs corresponding source code, and compile source code into primary script, primary script is packaged into React component by AMD specification, quilt is in use, can be used React component by simply calling, expand use scope, and component reusability is high, does not need developer and specially learns the i.e. usable React component of React, reduces the study threshold of developer.
Description
Technical field
The present invention relates to computer application fields, more particularly to a kind of constructing method of component and device, component call side
Method and device.
Background technique
AngularJS is built upon a structuring front end MVVM (Model View View on light weight jQuery
Model) frame, for constructing single-page Web application.AngularJS is large and complete frame, is used to developer component learning cost
Greatly, bi-directional data is bundled in performance under complicated interaction scenario and suddenly declines.
React is the JavaScipt frame released by Fackbook, and React is one for constructing modularization UI
The library of (User Interface, user interface) is a front-end interface developing instrument.Because React is only responsible for view layers, exploitation
Person needs to spend very big energy at model, controller layers, and the code that JSX grammer is write needs to pass through baler
Tool webpack, babel are compiled into primary javascript grammer, are difficult to promote the use of on a large scale in exploration project.
Summary of the invention
Based on this, it is necessary to aiming at the problem that conventional construction modularity is difficult to promote the use of on a large scale, provide a kind of group
Part construction method and device can expand use scope.
In addition, there is a need to provide a kind of component call method and apparatus, use scope can be expanded
A kind of constructing method of component, comprising:
Obtain functional requirement；
It is extended according to functional requirement in model layer model and control layer controller, using for constructing user interface
The grammer of step library React write the functional requirement and obtain corresponding source code；
By the compilation of source code at primary script；
The step for constructing user interface is packaged into using asynchronous module load mechanism AMD specification to the primary script
Library React component.
A kind of component call method, comprising:
Obtain business demand；
The corresponding step library React component for being used to construct user interface is called according to the business demand, it is described to be used for
The step library React component for constructing user interface is to be expanded according to functional requirement in model layer model and control layer controller
Exhibition, writes the functional requirement using the grammer of the step library React for constructing user interface and obtains corresponding source code, and
By the compilation of source code at primary script, and to the primary script using asynchronous module load mechanism AMD specification packaging
What is obtained is used to construct the step library React component of user interface；
It obtains to described for constructing the parameter of the step library React component Configuration of user interface；
The parameter of the configuration is passed into the corresponding step library React component for being used to construct user interface, forms packet
The step library React component for being used to construct user interface containing the parameter；
It shows described for constructing the step library React component of user interface comprising the parameter.
A kind of component construction device, comprising:
Functional requirement obtains module, for obtaining functional requirement；
Module is write, for extending according to functional requirement in model layer model and control layer controller, using being used for
The step library React of building user interface writes the functional requirement and obtains corresponding source code；
Generation module is used for the compilation of source code into primary script；
Package module, for being packaged into using asynchronous module load mechanism AMD specification for constructing to the primary script
The step library React component of user interface.
A kind of component call device, comprising:
Business demand obtains module, for obtaining business demand；
Calling module, it is corresponding for constructing the step library of user interface for being called according to the business function demand
React component, it is described for construct user interface step library React component be according to functional requirement model layer model with
Control layer controller extension, writes the functional requirement using the grammer of the step library React for constructing user interface
Corresponding source code is obtained, and by the compilation of source code at primary script, and asynchronous module is used to the primary script
The step library React component for being used to construct user interface that load mechanism AMD specification is packaged to be；
Parameter configuration module, for obtaining to described for constructing the ginseng of the step library React component Configuration of user interface
Number；
Transfer module, for the parameter of the configuration to be passed to the corresponding step library for being used to construct user interface
React component forms the step library React component for being used to construct user interface comprising the parameter；
Display module includes described in the configuration parameter for constructing the step library React of user interface for showing
Component.
Said modules construction method and device write function by using the step library React for constructing user interface
Corresponding source code is needed, and compiles source code into primary script, primary script is packaged into React group by AMD specification
Part, quilt expand use scope, and component reusability is high in use, by simply calling i.e. usable React component,
It can be loaded by AMD, webpack module management, it is feature-rich, the characteristic that primary html does not have is extended, and do not need
Developer, which specially learns React, can be used React component, reduce the study threshold of developer, while component offer is rich
Rich function is able to satisfy development group daily demand, improves new product and sells development efficiency, shortens the product online period.
Said modules call method and device call corresponding React component according to business demand, and obtain React group
Parameter is passed to React component, forms the React component comprising the parameter, and show the React group by the parameter of part configuration
Part, method of calling is simple, does not need developer and specially learns the i.e. usable React component of React, reduces the study of developer
Threshold, while the abundant function that component provides is able to satisfy development group daily demand, improves new product and sells development efficiency, shortens
Product online period.
Detailed description of the invention
Fig. 1 is the schematic diagram of internal structure of electronic equipment in one embodiment；
Fig. 2 is the flow chart of constructing method of component in one embodiment；
Fig. 3 A is the schematic diagram of button assembly；
Fig. 3 B is the schematic diagram for pulling down component；
Fig. 3 C is the schematic diagram of numerical value input frame component；
Fig. 3 D is the schematic diagram for sliding bar assembly；
Fig. 3 E is the schematic diagram that bubble prompts component；
Fig. 3 F is the schematic diagram of form component；
Fig. 4 is to write the function using the grammer of React in model layers and controller layers of extension according to functional requirement
Energy demand obtains the idiographic flow schematic diagram of corresponding source code；
Fig. 5 is the flow chart of component call method in one embodiment；
Fig. 6 is the schematic diagram that invocation component forms the page；
Fig. 7 is that component call method is applied to the architecture diagram that building cloud product sells page in one embodiment；
Fig. 8 is the structural block diagram of component construction device in one embodiment；
Fig. 9 is the structural block diagram of component call device in one embodiment.
Specific embodiment
In order to make the objectives, technical solutions, and advantages of the present invention clearer, with reference to the accompanying drawings and embodiments, right
The present invention is further elaborated.It should be appreciated that the specific embodiments described herein are merely illustrative of the present invention, and
It is not used in the restriction present invention.
It is appreciated that term " first " used in the present invention, " second " etc. can be used to describe various elements herein,
But these elements should not be limited by these terms.These terms are only used to distinguish the first element from the other element.
Fig. 1 is the schematic diagram of internal structure of electronic equipment in one embodiment.As shown in Figure 1, the electronic equipment includes logical
Cross processor, non-volatile memory medium, built-in storage, network interface, display screen and the input unit of system bus connection.Its
In, the non-volatile memory medium of electronic equipment is stored with operating system, further includes a kind of component construction device and component call
Device, the component construction device is for realizing a kind of component construction installation method, and the component call device is for realizing a kind of group
Part calling device method.The processor supports the operation of entire electronic equipment for providing calculating and control ability.Electronic equipment
In built-in storage provide environment for the operation of component construction device and component call device in non-volatile memory medium, should
Computer-readable instruction can be stored in built-in storage, when which is executed by the processor, may make institute
It states processor and executes a kind of constructing method of component and component call method.Network interface is used to carry out network with other equipment logical
Letter.The display screen of electronic equipment can be liquid crystal display or electric ink display screen etc., and input unit can be display screen
The touch layer of upper covering is also possible to the key being arranged on electronic equipment casing, trace ball or Trackpad, is also possible to external
Keyboard, Trackpad or mouse etc..The electronic equipment can be mobile phone, personal computer, tablet computer, personal digital assistant, wear
Wear formula equipment or server etc..It will be understood by those skilled in the art that structure shown in Fig. 1, only and application scheme
The block diagram of relevant part-structure does not constitute the restriction for the electronic equipment being applied thereon to application scheme, specifically
Electronic equipment may include perhaps combining certain components or with different portions than more or fewer components as shown in the figure
Part arrangement.
Fig. 2 is the flow chart of constructing method of component in one embodiment.As shown in Fig. 2, a kind of constructing method of component, packet
It includes:
Step 202, functional requirement is obtained.
Functional requirement refers to function required for providing a certain service.Such as address choice service, button selection function can be used
Energy or drop down box function etc. are realized.
Step 204, it is extended according to functional requirement in model layer model and control layer controller, using for constructing
The step library React of user interface writes the functional requirement and obtains corresponding source code.
In the present embodiment, the function is write using JSX grammer inside model layers and controller layers of extension, React
Demand obtains corresponding source code.JSX be a look the same XML (Extensible Markup Language, it is expansible
Markup language) JavaScript syntax extension.
Model layers are model layers, are in application program for handling the part of application data logic, usual model pair
As being responsible for accessing data in the database.Model indicates business data and business rule.Controller layers are controller layers, are
The part of user's interaction is handled in application program, usual controller is responsible for reading data from view, control user's input, and to mould
Type layer sends data.
React is the JavaScipt frame released by Fackbook, for constructing the Javascript of user interface
(step) library.React realizes the data flow of one-way response.
Step 206, by the compilation of source code at primary script.
In the present embodiment, primary JavaScript (script) is compiled source code into.
Step 208, which is packaged into using asynchronous module load mechanism AMD specification for constructing user interface
Step library React component.
In the present embodiment, AMD specification refers to that Asynchronous Module Definition, asynchronous module load machine
System.AMD specification is fully described the definition of module, dependence, adduction relationship and load mechanism.
The step library React component for being used to construct user interface includes button assembly, drop-down component, numerical value input frame group
Part, sliding bar assembly, bubble prompt component and form component.React component receives input by render () method
Parameter and return to the object of displaying.
As shown in Figure 3A, button assembly can be used for obtaining caller be passed to render component data after, in a certain item of button
The value for notifying called side currently to choose when choosing.Caller can also be passed to parameter by button classification, disabling ash fall, top
Bubble prompt etc..Button includes Guangzhou, Shanghai, Shanghai finance, Beijing, Hong Kong, Toronto.
As shown in Figure 3B, drop-down component can be used for obtaining caller be passed to render component data after, in combobox certain
One value for notifying called side currently to choose when choosing.Caller, which can also be passed to parameter, will pull down a certain item disabling, the right side
The prompt of side bubble, each single item support the rightmost side to show discount promotion icon etc..
As shown in Figure 3 C, numerical value input frame component is used to obtain the incoming minimum value of caller, maximum value to limit user
The section of the numerical value of input.Such as it is incoming { min:1, max:50 }.User can only input the value in 1 to 50 this section.If user
Input value not in the section, automatically repair value at minimum value or maximum value by numerical value input frame component.
As shown in Figure 3D, it is defeated to limit user to can be used for obtaining the incoming minimum value of caller, maximum value for sliding bar assembly
The section of the numerical value entered.Slider bar update can synchronize input frame update, and input frame numerical value updates the position of meeting synchronous slide item.Number
Value update is notified that the current value of caller.
As shown in FIGURE 3 E, bubble prompt component can be used for showing that bubble prompts.User can unrestricted choice bubble show in mesh
Mark the position (such as upper and lower, left and right) of element.When browser reduce width it is high when, bubble can self-adapting adjusted positions, avoid by
It blocks invisible.
As illustrated in Figure 3 F, form component, which can obtain the incoming json data shown of caller, can show table.Table branch
Hold single choice, multiselect, sequence etc..When user chooses a line or multirow, form component is notified that the data that caller is chosen at this time.
Said modules construction method writes function by using the grammer of React and needs corresponding source code, and by source generation
Code is compiled into primary script, primary script is packaged into React component by AMD specification, quilt is in use, by simply calling
React component can be used, expand use scope, and component reusability is high, it can be by AMD, webpack module management
Load, it is feature-rich, the characteristic that primary html does not have is extended, and do not need developer specially to learn React i.e. usable
React component reduces the study threshold of developer, while the abundant function that component provides is able to satisfy development group daily demand,
It improves new product and sells development efficiency, shorten the product online period.
As shown in figure 4, in one embodiment, this, in model layers and controller layers of extension, makes according to functional requirement
The functional requirement, which is write, with the grammer of React obtains corresponding source code, comprising:
Step 402, it is extended according to functional requirement in model layer model and control layer controller, using for constructing
The step library React of user interface writes the initiation parameter for defining the corresponding component of the functional requirement.
Step 404, the function triggered when the component parameter is modified in definition outside.
Step 406, the processing function when value change of the component is defined.
Step 408, it defines when this loses focus and handles function.
Step 410, the function of definition statement component.
Processing function when triggering function by the parameter of definitions component, change, processing function etc. when losing focus, convenient for pair
Component realizes data processing.
In one embodiment, this is by the compilation of source code at primary script, comprising: uses the bable tool editor source
The primary script of code building.
It is illustrated with the realization code of a numerical value input frame component, specific code is as follows:
Other React component implementations are similar to above-mentioned realization numerical value input frame component.
In one embodiment, said modules construction method further include: the component more new command comprising component mark is obtained,
Corresponding component is identified to the component according to the component more new command to be updated.
Component mark is the character string for uniquely indicating component.
React component updates, not global refreshing, by dom inside it (Document Object Model,
DOM Document Object Model) diff algorithm calculates difference, it is then updated with minimum particle size, so component rendering efficiency and property
It can be very high.
Fig. 5 is the flow chart of component call method in one embodiment.As shown in figure 5, a kind of component call method, including
Step 502~step 510.Wherein:
Step 502, business demand is obtained.
In the present embodiment, business demand refers to that webpage constructs provided demand for services.
Step 504, the corresponding step library React component for being used to construct user interface is called according to the business demand, it should
Step library React component for constructing user interface is according to functional requirement in model layer model and control layer
Controller extension, writes the functional requirement using the step library React for constructing user interface and obtains corresponding source generation
Code, and by the compilation of source code at primary script, and to the primary script using asynchronous module load mechanism AMD specification packaging
What is obtained is used to construct the step library React component of user interface.
The React component includes button assembly, drop-down component, numerical value input frame component, sliding bar assembly, bubble prompt group
Part and form component.
It is loaded using asynchronous module load mechanism AMD module loader corresponding for constructing the step library of user interface
React component can be shown on interface.
Step 506, the parameter for being used to construct the step library React component Configuration of user interface to this is obtained.
In the present embodiment, different parameters can configure for different React components.Such as React component is that numerical value is defeated
Enter frame component, the numerical value of the parameter of configuration is 1.
Step 508, the parameter of the configuration is passed into the corresponding step library React component for being used to construct user interface,
Form the step library React component for being used to construct user interface comprising the parameter.
For example, the numerical value 1 of parameter is passed to numerical value input frame component, then show that the numerical value of the numerical value input frame is 1.
Step 510, it shows and is used to construct the step library React component of user interface comprising this of the parameter.
Said modules call method calls corresponding for constructing the step library React of user interface according to business demand
Component, and the parameter of React component Configuration is obtained, parameter is passed to the step library React component for being used to construct user interface,
It is formed and is used to construct the step library React component of user interface comprising the parameter, and show the React component, method of calling
Simply, it does not need developer and specially learns the i.e. usable React component of React, reduce the study threshold of developer, while group
The abundant function that part provides is able to satisfy development group daily demand, improves new product and sells development efficiency, it is online to shorten product
Period.
Fig. 6 is the schematic diagram that invocation component forms the page.As shown in fig. 6, it includes button that exploitation, which is the component that can be used,
Component, drop-down component, numerical value input frame component, sliding bar assembly, bubble prompt component and form component.Page A calls sliding
Bar assembly and drop-down component, page B call buttons component, form component and numerical value input frame component.It is loaded when calling using AMD
Device charging assembly is to page A or page B.
Former React component call mode is:
React.render(
<dropdown{…options}/>,
Document.body
)；
Developer needs customized JSX grammar compilation using tools such as babel into primary javascript grammer.
And said modules call method is used, the method for calling of component has lacked the process of compiling, is directly added using AMD module
Carry device can show interface such as:
Var dropdown=require (' dropdown ')；
Dropdown.create(options)。
For the clearer realization for illustrating component call method, selling page applied to cloud product in component call method is
Example is described in detail.As shown in fig. 7, the cloud product that self-service access page obtains the configuration of cloud service developer sells the related ginseng of page
It counts, and sells the logical code of page according to the cloud product that relevant parameter loads business side.It is that developer exists that cloud product, which sells page,
What is constructed on the basis of React frame sells logic, including is inquired the price, placed an order, paid.React framework extension is primary
The component of html, asynchronous data request component, page performance monitoring component, cloud billing interface etc..Cloud service developer is according to cloud
The business demand that product sells page calls corresponding component construction cloud product to sell page；It obtains user and operates selection cloud on component
Service configuration；By the configuration parameter for the interface captures user selection that component provides, and configuration parameter is submitted into inquiry component,
Price is returned to show on the page that cloud product sells page；The purchase operation for getting user, submits to payment page for parameter, props up
It pays page and parameter is submitted into cloud backstage generation order, jump to Third-party payment platform or bank card payment interface after generating order
It carries out payment and completes purchase.
Fig. 8 is the structural block diagram of component construction device in one embodiment.As shown in figure 8, a kind of component construction device, packet
Functional requirement is included to obtain module 802, write module 804, generation module 806 and package module 808.Wherein:
Functional requirement obtains module 802 for obtaining functional requirement.
Module 804 is write for extending according to functional requirement in model layer model and control layer controller, uses use
The functional requirement, which is write, in the step library React of building user interface obtains corresponding source code.
Generation module 806 is used for the compilation of source code into primary script.
Package module 808 is used to be packaged into for constructing the primary script using asynchronous module load mechanism AMD specification
The step library React component of user interface.
The step library React component for being used to construct user interface includes button assembly, drop-down component, numerical value input frame group
Part, sliding bar assembly, bubble prompt component and form component.
Said modules construction device writes function by using the grammer of React and needs corresponding source code, and by source generation
Code is compiled into primary script, primary script is packaged into React component by AMD specification, quilt is in use, by simply calling
React component can be used, expand use scope, and component reusability is high, it can be by AMD, webpack module management
Load, it is feature-rich, the characteristic that primary html does not have is extended, and do not need developer specially to learn React i.e. usable
React component reduces the study threshold of developer, while the abundant function that component provides is able to satisfy development group daily demand,
It improves new product and sells development efficiency, shorten the product online period.
In one embodiment, this is write module 804 and is also used to according to functional requirement in model layers and controller layers
The initiation parameter for defining the corresponding component of the functional requirement is write in extension using the grammer of React, defines external modification group
The function triggered when part parameter defines the processing function when value change of the component, defines when this loses focus and handle function,
And the function of definition statement component.
In one embodiment, which is also used to using script compiler (such as bable) the tool editor source
The primary script of code building.
Fig. 9 is the structural block diagram of component call device in one embodiment.As shown in figure 9, a kind of component call device, packet
It includes business demand and obtains module 902, calling module 904, parameter configuration module 906, transfer module 908 and display module 910.Its
In:
Business demand obtains module 902 for obtaining business demand.
Calling module 904 is used to be called according to the business function demand corresponding for constructing the step library of user interface
React component, which is according to functional requirement in model layer model and control
Preparative layer controller extension, writes the functional requirement using the grammer of the step library React for constructing user interface and obtains
Corresponding source code, and by the compilation of source code at primary script, and asynchronous module load mechanism is used to the primary script
The step library React component for being used to construct user interface that AMD specification is packaged to be.
Parameter configuration module 906 is used to obtain the ginseng for being used to construct the step library React component Configuration of user interface to this
Number.
Transfer module 908 is used to the parameter of the configuration passing to the corresponding step library for being used to construct user interface
React component forms the step library React component for being used to construct user interface comprising the parameter.
Display module 910 be used for shows include the configuration parameter this be used to construct the step library React group of user interface
Part.
Said modules calling device calls corresponding React component according to business demand, and obtains React component Configuration
Parameter, parameter is passed into React component, formed include the parameter React component, and show the React component, call
Mode is simple, does not need developer and specially learns the i.e. usable React component of React, reduces the study threshold of developer, together
When component provide abundant function be able to satisfy development group daily demand, improve new product and sell development efficiency, shorten product
The online period.
Those of ordinary skill in the art will appreciate that realizing all or part of the process in above-described embodiment method, being can be with
Relevant hardware is instructed to complete by computer program, the program can be stored in a non-volatile computer and can be read
In storage medium, the program is when being executed, it may include such as the process of the embodiment of above-mentioned each method.Wherein, the storage is situated between
Matter can be magnetic disk, CD, read-only memory (Read-Only Memory, ROM) etc..
The embodiments described above only express several embodiments of the present invention, and the description thereof is more specific and detailed, but simultaneously
Limitations on the scope of the patent of the present invention therefore cannot be interpreted as.It should be pointed out that for those of ordinary skill in the art
For, without departing from the inventive concept of the premise, various modifications and improvements can be made, these belong to guarantor of the invention
Protect range.Therefore, the scope of protection of the patent of the invention shall be subject to the appended claims.
Claims (8)
1. a kind of constructing method of component, comprising:
Obtain functional requirement；
It is extended according to functional requirement in model layer model and control layer controller, uses the foot for constructing user interface
This library React writes the functional requirement and obtains corresponding source code；
By the compilation of source code at primary script；
The script bank for constructing user interface is packaged into using asynchronous module load mechanism AMD specification to the primary script
React component；
The script bank React component for constructing user interface includes button assembly, drop-down component, numerical value input frame group
Part, sliding bar assembly, bubble prompt component and form component.
2. the method according to claim 1, wherein described in model layer model and control according to functional requirement
Layer controller extension, using the script bank React for constructing user interface write the functional requirement obtain it is corresponding
Source code, comprising:
It is extended according to functional requirement in model layer model and control layer controller, uses the foot for constructing user interface
This library React writes the initiation parameter for defining the corresponding script bank React component of the functional requirement；
The function triggered when the parameter of the external modification script bank React component of definition；
Define the processing function when value change of the script bank React component；
Definition handles function when losing focus；
Define the function of statement script library React component.
3. the method according to claim 1, wherein it is described by the compilation of source code at primary script, comprising:
Primary script is generated using source code described in script compiler tool editor.
4. a kind of component call method, comprising:
Obtain business demand；
The corresponding script bank React component for being used to construct user interface is called according to the business demand, it is described for constructing
The script bank React component of user interface is to be extended according to functional requirement in model layer model and control layer controller, is made
The functional requirement is write with the script bank React for constructing user interface and obtains corresponding source code, and by the source generation
Code is compiled into primary script, and is used for the primary script using what asynchronous module load mechanism AMD specification was packaged to be
Construct the script bank React component of user interface；
It obtains to described for constructing the parameter of the script bank React component Configuration of user interface；
The parameter of the configuration is passed into the corresponding script bank React component for being used to construct user interface, being formed includes institute
State the script bank React component for being used to construct user interface of parameter；
It shows described for constructing the script bank React component of user interface comprising the parameter；
The script bank React component for constructing user interface includes button assembly, drop-down component, numerical value input frame group
Part, sliding bar assembly, bubble prompt component and form component.
5. a kind of component construction device characterized by comprising
Functional requirement obtains module, for obtaining functional requirement；
Module is write, for extending according to functional requirement in model layer model and control layer controller, using for constructing
The script bank React of user interface writes the functional requirement and obtains corresponding source code；
Generation module is used for the compilation of source code into primary script；
Package module, for being packaged into using asynchronous module load mechanism AMD specification for constructing user to the primary script
The script bank React component at interface；
The script bank React component for constructing user interface includes button assembly, drop-down component, numerical value input frame group
Part, sliding bar assembly, bubble prompt component and form component.
6. device according to claim 5, which is characterized in that the module of writing is also used to according to functional requirement in model
Layer model and control layer controller extends, and is write using the script bank React for constructing user interface and defines the function
The initiation parameter of the corresponding script bank React component of energy demand defines the external parameter for modifying the script bank React component
When the function that is triggered, define the processing function when value of the script bank React component changes, processing when definition loses focus
Function, and define the function of statement script library React component.
7. device according to claim 5, which is characterized in that the generation module is also used to using script compiler tool
It edits the source code and generates primary script.
8. a kind of component call device characterized by comprising
Business demand obtains module, for obtaining business demand；
Calling module, it is corresponding for constructing the script bank React component of user interface for being called according to the business demand,
The script bank React component for constructing user interface is according to functional requirement in model layer model and control layer
Controller extension, writes the functional requirement using the script bank React for constructing user interface and obtains corresponding source
Code, and by the compilation of source code at primary script, and the primary script is advised using asynchronous module load mechanism AMD
The script bank React component for being used to construct user interface that model is packaged to be；
Parameter configuration module, for obtaining to described for constructing the parameter of the script bank React component Configuration of user interface；
Transfer module, for the parameter of the configuration to be passed to the corresponding script bank React group for being used to construct user interface
Part forms the script bank React component for being used to construct user interface comprising the parameter；
Display module includes described in the configuration parameter for constructing the script bank React component of user interface for showing；
The script bank React component for constructing user interface includes button assembly, drop-down component, numerical value input frame group
Part, sliding bar assembly, bubble prompt component and form component.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610624773.6A CN106250156B (en) | 2016-08-01 | 2016-08-01 | Constructing method of component and device, component call method and apparatus |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610624773.6A CN106250156B (en) | 2016-08-01 | 2016-08-01 | Constructing method of component and device, component call method and apparatus |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106250156A CN106250156A (en) | 2016-12-21 |
| CN106250156B true CN106250156B (en) | 2019-03-12 |
Family
ID=57605850
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610624773.6A Active CN106250156B (en) | 2016-08-01 | 2016-08-01 | Constructing method of component and device, component call method and apparatus |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106250156B (en) |
Families Citing this family (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107391158B (en) * | 2017-08-02 | 2020-12-01 | 苏州浪潮智能科技有限公司 | Method and equipment for realizing table drawing based on iDataTable packaging |
| CN108958730B (en) * | 2017-08-23 | 2022-04-19 | 北京五八信息技术有限公司 | Application program component sharing method and device, terminal device and readable storage medium |
| CN108255485B (en) * | 2017-09-22 | 2021-10-29 | 阿里巴巴（中国）有限公司 | Page construction method and equipment and electronic equipment |
| CN107704239B (en) * | 2017-10-09 | 2020-10-16 | 武汉斗鱼网络科技有限公司 | Configuration generation method and device and electronic equipment |
| CN108388444A (en) * | 2018-03-05 | 2018-08-10 | 重庆邮电大学 | A kind of front end page configuration method and system based on React components |
| CN108595176A (en) * | 2018-04-10 | 2018-09-28 | 中国电子科技集团公司第五十四研究所 | A kind of front end page modular organization method based on AMD |
| CN110580174B (en) * | 2018-06-11 | 2022-07-01 | 中国移动通信集团浙江有限公司 | Application component generation method, server and terminal |
| CN109614162B (en) * | 2018-11-15 | 2023-10-10 | 福建天泉教育科技有限公司 | Front-end loading optimization method based on component development mode and storage medium |
| CN110209440A (en) * | 2019-06-14 | 2019-09-06 | 福建睿思特科技股份有限公司 | A kind of use optimization method and the storage medium of React component |
| CN111641672A (en) * | 2020-04-10 | 2020-09-08 | 新智云数据服务有限公司 | Configuration method and configuration system of cloud resource monitoring component |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101030139A (en) * | 2007-04-18 | 2007-09-05 | 杭州华为三康技术有限公司 | Web interface extending method and device |
| CN101751258A (en) * | 2009-12-30 | 2010-06-23 | 大唐微电子技术有限公司 | Intelligent card and developing method, system and deployment method for intelligent card application |
| CN103279358A (en) * | 2013-06-08 | 2013-09-04 | 北京首钢自动化信息技术有限公司 | Interpreted dynamic business component construction method for industrial applications |
| CN105808237A (en) * | 2016-02-25 | 2016-07-27 | 北京京东尚科信息技术有限公司 | Page rendering method and page rendering system |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9342274B2 (en) * | 2011-05-19 | 2016-05-17 | Microsoft Technology Licensing, Llc | Dynamic code generation and memory management for component object model data constructs |
-
2016
- 2016-08-01 CN CN201610624773.6A patent/CN106250156B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101030139A (en) * | 2007-04-18 | 2007-09-05 | 杭州华为三康技术有限公司 | Web interface extending method and device |
| CN101751258A (en) * | 2009-12-30 | 2010-06-23 | 大唐微电子技术有限公司 | Intelligent card and developing method, system and deployment method for intelligent card application |
| CN103279358A (en) * | 2013-06-08 | 2013-09-04 | 北京首钢自动化信息技术有限公司 | Interpreted dynamic business component construction method for industrial applications |
| CN105808237A (en) * | 2016-02-25 | 2016-07-27 | 北京京东尚科信息技术有限公司 | Page rendering method and page rendering system |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106250156A (en) | 2016-12-21 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106250156B (en) | Constructing method of component and device, component call method and apparatus | |
| Aggarwal | Modern web-development using reactjs | |
| US20150293764A1 (en) | Method and system to compose and execute business rules | |
| US9696972B2 (en) | Method and apparatus for updating a web-based user interface | |
| CN104484216B (en) | Service interface document and on-line testing instrument generation method, device | |
| Mann | Java Server Faces in Action | |
| CN103383645B (en) | Code generating method and system | |
| CN107577509A (en) | A kind of method, terminal and computer-readable recording medium for loading application interface | |
| CN108920496B (en) | Rendering method and device | |
| CN102495735A (en) | Web end UI (user interface) component application frame system | |
| Groenewegen et al. | Integration of data validation and user interface concerns in a DSL for web applications | |
| WO2017065991A1 (en) | Generation of application behaviors | |
| CN102449598A (en) | Package design and generation | |
| Knapp et al. | Modeling business processes in web applications with ArgoUWE | |
| CN101681523A (en) | Methods and systems for animating displayed representations of data items | |
| CN102520966A (en) | Method for prompting codes and device | |
| JPWO2011118003A1 (en) | Web application construction system, web application construction method, web application construction program, and recording medium recording web application construction program | |
| CN105074652A (en) | Remotely executing operations of an application using a schema that provides for executable scripts in a nodal hierarchy | |
| Anderson et al. | Pro business applications with silverlight 4 | |
| CN113391808A (en) | Page configuration method and device and electronic equipment | |
| Bishop | Multi-platform user interface construction: a challenge for software engineering-in-the-small | |
| Kotaru | „Angular for Material Design “ | |
| CN110058849A (en) | Generation method, device, computer equipment and the storage medium of flow chart | |
| Fatima et al. | Extending interaction flow modeling language (ifml) for android user interface components | |
| CN102129386B (en) | A kind of mobile widgets and realize terminal transplant method |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |