CN106250156A - 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
- CN106250156A CN106250156A CN201610624773.6A CN201610624773A CN106250156A CN 106250156 A CN106250156 A CN 106250156A CN 201610624773 A CN201610624773 A CN 201610624773A CN 106250156 A CN106250156 A CN 106250156A
- Authority
- CN
- China
- Prior art keywords
- assembly
- react
- user interface
- functional requirement
- building user
- 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.)
- Granted
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.Described constructing method of component includes: obtain functional requirement；Extend with key-course controller in model layer model according to functional requirement, use the grammer of the step storehouse React for building user interface to write described functional requirement and obtain the source code of correspondence；Described compilation of source code is become primary script；Asynchronous module load mechanism AMD specification is used to be packaged into React assembly in described primary script.Said modules construction method and device, component call method and apparatus, corresponding source code is needed by using the grammer of React to write function, and compile source code into primary script, primary script is packaged into React assembly by AMD specification, when being used, React assembly can be used by simply calling, expand range, and assembly reusability is high, it is not necessary to developer learns React specially can use React assembly, reduces the study threshold of developer.
Description
Technical field
The present invention relates to computer application field, particularly relate to a kind of constructing method of component and device, component call side
Method and device.
Background technology
AngularJS is built upon a structuring front end MVVM (Model View View on light weight jQuery
Model) framework, is used for building the application of single-page Web.AngularJS is large and complete framework, for developer component learning cost
Greatly, under bi-directional data is bundled in complicated interaction scenario, performance suddenly declines.
React is the JavaScipt framework released by Fackbook, React be one for building modularization UI
The storehouse of (User Interface, user interface), is a front-end interface developing instrument.View layer only it is responsible for, exploitation because of React
Person needs to spend the biggest energy at model, controller layer, 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 the problem being difficult to promote the use of on a large scale for conventional construction modularity, it is provided that a kind of group
Part construction method and device, can expand range.
Additionally, there is a need to provide a kind of component call method and apparatus, range can be expanded
A kind of constructing method of component, including:
Obtain functional requirement；
Extend with key-course controller in model layer model according to functional requirement, be used for building user interface
The grammer of step storehouse React write described functional requirement and obtain the source code of correspondence；
Described compilation of source code is become primary script；
Asynchronous module load mechanism AMD specification is used to be packaged into the step for building user interface in described primary script
Storehouse React assembly.
A kind of component call method, including:
Obtain business demand；
Call the step storehouse React assembly for building user interface of correspondence according to described business demand, described be used for
The step storehouse React assembly building user interface is to expand with key-course controller in model layer model according to functional requirement
Exhibition, uses the grammer of the step storehouse React for building user interface to write described functional requirement and obtains the source code of correspondence, and
Described compilation of source code is become primary script, and described primary script is used asynchronous module load mechanism AMD specification packaging
The step storehouse React assembly for building user interface obtained；
Obtain the parameter to the described step storehouse React assembly configuration for building user interface；
The parameter of described configuration is passed to the step storehouse React assembly being used for building user interface of correspondence, forms bag
The step storehouse React assembly for building user interface containing described parameter；
Show the described step storehouse React assembly for building user interface comprising described parameter.
A kind of component construction device, including:
Functional requirement acquisition module, is used for obtaining functional requirement；
Writing module, for extending with key-course controller in model layer model according to functional requirement, use is used for
The step storehouse React of structure user interface writes described functional requirement and obtains the source code of correspondence；
Generation module, for becoming primary script by described compilation of source code；
Package module, for using asynchronous module load mechanism AMD specification to be packaged into for building in described primary script
The step storehouse React assembly of user interface.
A kind of component call device, including:
Business demand acquisition module, is used for obtaining business demand；
Calling module, for calling the step storehouse for building user interface of correspondence according to described business function demand
React assembly, the described step storehouse React assembly for building user interface for according to functional requirement model layer model with
Key-course controller extends, and uses the grammer of the step storehouse React for building user interface to write described functional requirement
Obtain the source code of correspondence, and described compilation of source code is become primary script, and described primary script is used asynchronous module
The step storehouse React assembly for building user interface that load mechanism AMD specification is packaged to be；
Parameter configuration module, for obtaining the ginseng to the described step storehouse React assembly configuration for building user interface
Number；
Transfer module, for passing to the step storehouse being used for building user interface of correspondence by the parameter of described configuration
React assembly, forms the step storehouse React assembly for building user interface comprising described parameter；
Display module, for showing the described step storehouse React for building user interface comprising described configuration parameter
Assembly.
Said modules construction method and device, write function by using for the step storehouse React building user interface
Need corresponding source code, and compile source code into primary script, primary script is packaged into React group by AMD specification
Part, when being used, can use React assembly by simply calling, and expands range, and assembly reusability is high,
Can be loaded by AMD, webpack module management, feature richness, extend the characteristic that primary html does not possesses, and need not
Developer learns React specially can use React assembly, reduces the study threshold of developer, simultaneously assembly provide rich
Rich function can meet the daily demand of development group, improves new product and sells development efficiency, shortens product and reach the standard grade the cycle.
Said modules call method and device, call the React assembly of correspondence, and obtain React group according to business demand
The parameter of part configuration, passes to React assembly by parameter, forms the React assembly comprising this parameter, and shows this React group
Part, method of calling is simple, it is not necessary to developer learns React specially can use React assembly, reduces the study of developer
Threshold, the abundant function that assembly provides simultaneously can meet the daily demand of development group, improve new product and sell development efficiency, shorten
Product is reached the standard grade the cycle.
Accompanying drawing explanation
Fig. 1 is the internal structure schematic diagram of electronic equipment in an embodiment；
Fig. 2 is the flow chart of constructing method of component in an embodiment；
Fig. 3 A is the schematic diagram of button assembly；
Fig. 3 B is the schematic diagram of drop-down assembly；
Fig. 3 C is the schematic diagram of numerical value input frame assembly；
Fig. 3 D is the schematic diagram of slider bar assembly；
Fig. 3 E is the schematic diagram of bubble prompting assembly；
Fig. 3 F is the schematic diagram of form component；
Fig. 4 is to extend with controller layer at model layer according to functional requirement, uses the grammer of React to write this merit
Energy demand obtains the idiographic flow schematic diagram of the source code of correspondence；
Fig. 5 is the flow chart of component call method in an embodiment；
Fig. 6 is the schematic diagram that invocation component forms the page；
Fig. 7 is that in an embodiment, component call method is applied to build cloud product and sells the Organization Chart of page；
Fig. 8 is the structured flowchart of component construction device in an embodiment；
Fig. 9 is the structured flowchart of component call device in an embodiment.
Detailed description of the invention
In order to make the purpose of the present invention, technical scheme and advantage clearer, below in conjunction with drawings and Examples, right
The present invention is further elaborated.Should be appreciated that specific embodiment described herein only in order to explain the present invention, and
It is not used in the restriction present invention.
It is appreciated that term used in the present invention " first ", " second " etc. can be used for describing various element in this article,
But these elements should not be limited by these terms.These terms are only used for distinguishing first element with another element.
Fig. 1 is the internal structure schematic diagram of electronic equipment in an embodiment.As it is shown in figure 1, this electronic equipment includes leading to
Cross processor, non-volatile memory medium, built-in storage, network interface, display screen and input equipment that system bus connects.Its
In, the non-volatile memory medium storage of electronic equipment has operating system, also includes a kind of component construction device and component call
Device, this component construction device is used for realizing a kind of component construction installation method, and this component call device is used for realizing a kind of group
Part calling device method.This processor is used for providing calculating and control ability, supports the operation of whole electronic equipment.Electronic equipment
In built-in storage be the component construction device in non-volatile memory medium and component call device operation provide environment, should
Built-in storage can store computer-readable instruction, when this computer-readable instruction is performed by described processor, institute can be made
State processor and perform a kind of constructing method of component and component call method.Network interface leads to for carrying out network with other equipment
Letter.The display screen of electronic equipment can be LCDs or electric ink display screen etc., and input equipment can be display screen
The touch layer of upper covering, it is also possible to be button, trace ball or the Trackpad arranged on electronic equipment casing, it is also possible to be external
Keyboard, Trackpad or mouse etc..This electronic equipment can be mobile phone, personal computer, panel computer, personal digital assistant, wear
Wear formula equipment or server etc..It will be understood by those skilled in the art that the structure shown in Fig. 1, be only and the application scheme
The block diagram of relevant part-structure, is not intended that the restriction to the electronic equipment that the application scheme is applied thereon, concrete
Electronic equipment can include than shown in figure more or less of parts, or combines some parts, or has different portions
Part is arranged.
Fig. 2 is the flow chart of constructing method of component in an embodiment.As in figure 2 it is shown, a kind of constructing method of component, bag
Include:
Step 202, obtains functional requirement.
Functional requirement refers to provide the function required for a certain service.Such as address choice service, button can be used to select merit
Energy or drop down box function etc. realize.
Step 204, extends with key-course controller in model layer model according to functional requirement, is used for building
The step storehouse React of user interface writes this functional requirement and obtains the source code of correspondence.
In the present embodiment, extending with controller layer at model layer, React is internal uses JSX grammer to write this function
Demand obtains the source code of correspondence.JSX be a look the same XML (Extensible Markup Language, expansible
Markup language) JavaScript syntax extension.
Model layer is model layer, is for processing the part of application data logic in application program, usual model pair
As being responsible in data base accessing data.Model representation business data and business rule.Controller layer is controller layer, is
Processing the part that user is mutual in application program, usual controller is responsible for reading data from view, controls user's input, and to mould
Type layer sends data.
React is the JavaScipt framework released by Fackbook, for building the Javascript of user interface
(step) storehouse.React achieves the data stream of one-way response.
Step 206, becomes primary script by this compilation of source code.
In the present embodiment, compile source code into primary JavaScript (script).
Step 208, uses asynchronous module load mechanism AMD specification to be packaged into for building user interface in this primary script
Step storehouse React assembly.
In the present embodiment, AMD specification refers to Asynchronous Module Definition, and asynchronous module adds carrier aircraft
System.AMD specification is fully described the definition of module, dependence, adduction relationship and load mechanism.
This step storehouse React assembly being used for building user interface includes button assembly, drop-down assembly, numerical value input frame group
Part, slider bar assembly, bubble prompting assembly and form component.React assembly passes through render () method, receives input
Parameter also returns the object of displaying.
As shown in Figure 3A, after button assembly can be used for the data of the acquisition incoming render component of caller, at a certain item of button
The value that called side is currently chosen is notified the when of choosing.Button can be classified by caller with incoming parameter, disabling ash falls, top
Bubble prompting etc..Button includes Guangzhou, Shanghai, Shanghai finance, Beijing, Hong Kong, Toronto.
As shown in Figure 3 B, drop-down assembly can be used for obtain the incoming render component of caller data after, in combobox certain
One notifies, the when of choosing, the value that called side is currently chosen.Drop-down a certain item can be disabled by caller with incoming parameter, the right side
Discount sales promotion icon etc. is shown in side bubble prompting, each the support rightmost side.
As shown in Figure 3 C, numerical value input frame assembly is for obtaining the incoming minima of caller, maximum to limit user
The interval of the numerical value of input.The most incoming { min:1, max:50}.User can only input the value in 1 to 50 this interval.If user
Input value is not in this interval, and value is repaired into minima or maximum by numerical value input frame assembly automatically.
As shown in Figure 3 D, to can be used for obtaining the incoming minima of caller, maximum defeated to limit user for slider bar assembly
The interval of the numerical value entered.Slider bar renewal can synchronize input frame and update, and input frame numerical value renewal can synchronize the position of slider bar.Number
Value updates and is notified that the value that caller is current.
As shown in FIGURE 3 E, bubble prompting assembly can be used for showing bubble prompting.User can be illustrated in mesh by unrestricted choice bubble
The position (such as upper and lower, left and right) of mark element.When browser reduce wide high time, bubble can self-adapting adjusted positions, it is to avoid quilt
Block invisible.
As illustrated in Figure 3 F, form component can obtain the json data of the incoming displaying of caller and can show form.Form props up
Hold single choice, multiselect, sequence etc..When user chooses a line or multirow, form component is notified that the data that caller is now chosen.
Said modules construction method, needs corresponding source code by using the grammer of React to write function, and by source generation
Code is compiled into primary script, by AMD specification, primary script is packaged into React assembly, when being used, by simply calling
React assembly can be used, expand range, and assembly reusability is high, it is possible to by AMD, webpack module management
Load, feature richness, extend the characteristic that primary html does not possesses, and need not developer and learn React specially and can use
React assembly, reduces the study threshold of developer, and the abundant function that assembly provides simultaneously can meet the daily demand of development group,
Improve new product and sell development efficiency, shorten product and reach the standard grade the cycle.
As shown in Figure 4, in one embodiment, this extends with controller layer at model layer according to functional requirement, makes
Write this functional requirement with the grammer of React and obtain the source code of correspondence, including:
Step 402, extends with key-course controller in model layer model according to functional requirement, is used for building
The step storehouse React of user interface writes the initiation parameter defining assembly corresponding to this functional requirement.
Step 404, the function triggered during definition this component parameter of outside amendment.
Step 406, defines the process function during value change of this assembly.
Step 408, defines when this loses focus and processes function.
Step 410, the function of definition statement assembly.
Process function when triggering function by the parameter of definitions component, change, process function etc. when losing focus, it is simple to be right
Assembly realizes data and processes.
In one embodiment, this compilation of source code is become primary script by this, including: use this source of bable instrument editor
The primary script of code building.
Illustrating with the code that realizes of a numerical value input frame assembly, specific code is as follows:
Other React assembly implementations are similar to and above-mentioned realize numerical value input frame assembly.
In one embodiment, said modules construction method also includes: obtains the assembly comprising assembly mark and updates instruction,
Update instruction according to this assembly the assembly that this assembly mark is corresponding is updated.
Assembly mark is used to uniquely represent the character string of assembly.
React assembly updates, and is not that the overall situation refreshes, but by its internal dom (Document Object Model,
DOM Document Object Model) diff algorithm calculates difference, then it is updated with minimum particle size, so assembly rendering efficiency and property
Can be the highest.
Fig. 5 is the flow chart of component call method in an embodiment.As it is shown in figure 5, a kind of component call method, including
Step 502～step 510.Wherein:
Step 502, obtains business demand.
In the present embodiment, business demand refers to that webpage builds the demand for services provided.
Step 504, calls the step storehouse React assembly for building user interface of correspondence according to this business demand, should
It is at model layer model and key-course according to functional requirement for building the step storehouse React assembly of user interface
Controller extends, and uses the step storehouse React being used for building user interface to write this functional requirement and obtains the source generation of correspondence
Code, and this compilation of source code is become primary script, and this primary script is used asynchronous module load mechanism AMD specification packaging
The step storehouse React assembly for building user interface obtained.
This React assembly includes button assembly, drop-down assembly, numerical value input frame assembly, slider bar assembly, bubble prompting group
Part and form component.
Asynchronous module load mechanism AMD module loader is used to load the corresponding step storehouse for building user interface
React assembly can be illustrated on interface.
Step 506, obtains this for building the parameter of the step storehouse React assembly configuration of user interface.
In the present embodiment, different parameters be can configure for different React assemblies.Such as React assembly is that numerical value is defeated
Entering frame assembly, the numerical value of the parameter of configuration is 1.
Step 508, passes to the step storehouse React assembly being used for building user interface of correspondence by the parameter of this configuration,
Form the step storehouse React assembly for building user interface comprising this parameter.
Such as, the numerical value 1 of parameter is passed to numerical value input frame assembly, then show that the numerical value of this numerical value input frame is 1.
Step 510, shows that comprising this of this parameter is used for building the step storehouse React assembly of user interface.
Said modules call method, calls the step storehouse React for building user interface of correspondence according to business demand
Assembly, and obtain the parameter of React assembly configuration, parameter is passed to the step storehouse React assembly for building user interface,
Form the step storehouse React assembly for building user interface comprising this parameter, and show this React assembly, method of calling
Simply, it is not necessary to developer learns React specially can use React assembly, the study threshold of developer, group simultaneously are reduced
The abundant function that part provides can meet the daily demand of development group, improves new product and sells development efficiency, shortens product and reach the standard grade
Cycle.
Fig. 6 is the schematic diagram that invocation component forms the page.As shown in Figure 6, exploitation is that the assembly that can use includes button
Assembly, drop-down assembly, numerical value input frame assembly, slider bar assembly, bubble prompting assembly and form component.Page A calls slip
Bar assembly and drop-down assembly, page B call buttons assembly, form component and numerical value input frame assembly.AMD is used to load when calling
Device charging assembly is to page A or page B.
Former React component call mode is:
React.render(
<dropdown{…options}/>,
Document.body
)；
Developer needs to use the instrument such as babel that self-defined JSX grammar compilation becomes primary javascript grammer.
And using said modules call method, the method for calling of assembly has lacked the process of compiling, directly uses AMD module to add
Carry device and can be illustrated in interface such as:
Var dropdown=require (' dropdown ')；
Dropdown.create(options)。
For the realization of clearer explanation component call method, be applied to cloud product with component call method and sell page be
Example is described in detail.As it is shown in fig. 7, the cloud product of self-service access page acquisition cloud service developer configuration sells the relevant ginseng of page
Number, and the logical code of page is sold according to the cloud product of relevant parameter loading business side.It is that developer exists that cloud product sells page
Build on the basis of React framework sells logic, including carrying out inquiring the price, place an order, payment etc..React framework extension is primary
The assembly of html, asynchronous data request assembly, page performance monitoring assembly, cloud billing interface etc..Cloud service developer is according to cloud
Product is sold the business demand of page and is called the component construction cloud product of correspondence and sell page；Obtain user on assembly, operate selection cloud
Service configuration；The configuration parameter that the interface captures user provided by assembly is selected, and configuration parameter is submitted to assembly of inquiring the price,
Return price is illustrated in cloud product and sells on the page of page；Get the purchase operation of user, submit to parameter pay page,
Pay page and parameter is submitted to cloud backstage generation order, after generating order, jump to Third-party payment platform or bank card payment interface
Carry out payment to complete to buy.
Fig. 8 is the structured flowchart of component construction device in an embodiment.As shown in Figure 8, a kind of component construction device, bag
Include functional requirement acquisition module 802, write module 804, generation module 806 and package module 808.Wherein:
Functional requirement acquisition module 802 is used for obtaining functional requirement.
Write module 804 for using with key-course controller extension, use in model layer model according to functional requirement
Write this functional requirement in the step storehouse React building user interface and obtain the source code of correspondence.
Generation module 806 is for becoming primary script by this compilation of source code.
Package module 808 is for using asynchronous module load mechanism AMD specification to be packaged into for building in this primary script
The step storehouse React assembly of user interface.
This step storehouse React assembly being used for building user interface includes button assembly, drop-down assembly, numerical value input frame group
Part, slider bar assembly, bubble prompting assembly and form component.
Said modules construction device, needs corresponding source code by using the grammer of React to write function, and by source generation
Code is compiled into primary script, by AMD specification, primary script is packaged into React assembly, when being used, by simply calling
React assembly can be used, expand range, and assembly reusability is high, it is possible to by AMD, webpack module management
Load, feature richness, extend the characteristic that primary html does not possesses, and need not developer and learn React specially and can use
React assembly, reduces the study threshold of developer, and the abundant function that assembly provides simultaneously can meet the daily demand of development group,
Improve new product and sell development efficiency, shorten product and reach the standard grade the cycle.
In one embodiment, this is write module 804 and is additionally operable to according to functional requirement at model layer and controller layer
Extension, uses the grammer of React to write the initiation parameter defining assembly corresponding to this functional requirement, and definition is outside revises this group
The function triggered during part parameter, defines the process function during value change of this assembly, defines when this loses focus and processes function,
And the function of definition statement assembly.
In one embodiment, this generation module 806 is additionally operable to use this source of script compiler (such as bable) instrument editor
The primary script of code building.
Fig. 9 is the structured flowchart of component call device in an embodiment.As it is shown in figure 9, a kind of component call device, bag
Include business demand acquisition module 902, calling module 904, parameter configuration module 906, transfer module 908 and display module 910.Its
In:
Business demand acquisition module 902 is used for obtaining business demand.
Calling module 904 for calling the step storehouse for building user interface of correspondence according to this business function demand
React assembly, this step storehouse React assembly being used for building user interface is in model layer model and control according to functional requirement
Preparative layer controller extends, and uses the grammer of the step storehouse React for building user interface to write this functional requirement and obtains
Corresponding source code, and this compilation of source code is become primary script, and this primary script is used asynchronous module load mechanism
The step storehouse React assembly for building user interface that AMD specification is packaged to be.
Parameter configuration module 906 is for obtaining this for building the ginseng of the step storehouse React assembly configuration of user interface
Number.
Transfer module 908 for passing to the step storehouse being used for building user interface of correspondence by the parameter of this configuration
React assembly, forms the step storehouse React assembly for building user interface comprising this parameter.
Display module 910 is for showing that comprising this of this configuration parameter is used for building the step storehouse React group of user interface
Part.
Said modules calling device, calls the React assembly of correspondence, and obtains the configuration of React assembly according to business demand
Parameter, parameter is passed to React assembly, forms the React assembly comprising this parameter, and show this React assembly, call
Mode is simple, it is not necessary to developer learns React specially can use React assembly, reduces the study threshold of developer, with
Time assembly provide abundant function can meet the daily demand of development group, improve new product and sell development efficiency, shorten product
Reach the standard grade the cycle.
One of ordinary skill in the art will appreciate that all or part of flow process realizing in above-described embodiment method, be permissible
Instructing relevant hardware by computer program to complete, described program can be stored in a non-volatile computer and can read
In storage medium, this program is upon execution, it may include such as the flow process of the embodiment of above-mentioned each method.Wherein, described storage is situated between
Matter can be magnetic disc, CD, read-only store-memory body (Read-Only Memory, ROM) etc..
Embodiment described above only have expressed the several embodiments of the present invention, and it describes more concrete and detailed, but also
Therefore the restriction to the scope of the claims of the present invention can not 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, it is also possible to make some deformation and improvement, these broadly fall into the guarantor of the present invention
Protect scope.Therefore, the protection domain of patent of the present invention should be as the criterion with claims.
Claims (10)
1. a constructing method of component, including:
Obtain functional requirement；
Extend with key-course controller in model layer model according to functional requirement, use the foot for building user interface
Step storehouse React writes described functional requirement and obtains the source code of correspondence；
Described compilation of source code is become primary script；
Asynchronous module load mechanism AMD specification is used to be packaged into the step storehouse for building user interface in described primary script
React assembly.
Method the most according to claim 1, it is characterised in that described according to functional requirement in model layer model and control
Layer controller extension, uses the step storehouse React being used for building user interface to write described functional requirement and obtains correspondence
Source code, including:
Extend with key-course controller in model layer model according to functional requirement, use the foot for building user interface
Step storehouse React writes the initiation parameter defining assembly corresponding to described functional requirement；
The function triggered during the definition described component parameter of outside amendment；
Define the process function during value change of described assembly；
Function is processed when losing focus described in definition；
The function of definition statement assembly.
Method the most according to claim 1, it is characterised in that described described compilation of source code is become primary script, including:
Source code described in script compiler instrument editor is used to generate primary script.
Method the most according to claim 1, it is characterised in that the described step storehouse React group for building user interface
Part includes button assembly, drop-down assembly, numerical value input frame assembly, slider bar assembly, bubble prompting assembly and form component.
5. a component call method, including:
Obtain business demand；
The step storehouse React assembly for building user interface of correspondence is called according to described business demand, described for building
The step storehouse React assembly of user interface is to extend with key-course controller in model layer model according to functional requirement, makes
Write described functional requirement with the step storehouse React for building user interface and obtain the source code of correspondence, and by described source generation
Code is compiled into primary script, and described primary script is used that asynchronous module load mechanism AMD specification is packaged to be for
Build the step storehouse React assembly of user interface；
Obtain the parameter to the described step storehouse React assembly configuration for building user interface；
The parameter of described configuration is passed to the step storehouse React assembly being used for building user interface of correspondence, is formed and comprise institute
State the step storehouse React assembly for building user interface of parameter；
Show the described step storehouse React assembly for building user interface comprising described parameter.
6. a component construction device, it is characterised in that including:
Functional requirement acquisition module, is used for obtaining functional requirement；
Write module, for extending with key-course controller in model layer model according to functional requirement, be used for building
The step storehouse React of user interface writes described functional requirement and obtains the source code of correspondence；
Generation module, for becoming primary script by described compilation of source code；
Package module, for using asynchronous module load mechanism AMD specification to be packaged into for building user in described primary script
The step storehouse React assembly at interface.
Device the most according to claim 6, it is characterised in that described in write module and be additionally operable to according to functional requirement at model
Layer model and key-course controller extends, and uses and writes the described merit of definition for the step storehouse React building user interface
The initiation parameter of the assembly that energy demand is corresponding, defines the function triggered when described component parameter is revised in outside, described in definition
Process function when the value of assembly changes, processes function, and the function of definition statement assembly when losing focus described in definition.
Device the most according to claim 6, it is characterised in that described generation module is additionally operable to use script compiler instrument
Edit described source code and generate primary script.
Device the most according to claim 6, it is characterised in that the described step storehouse React group for building user interface
Part includes button assembly, drop-down assembly, numerical value input frame assembly, slider bar assembly, bubble prompting assembly and form component.
10. a component call device, it is characterised in that including:
Business demand acquisition module, is used for obtaining business demand；
Calling module, for calling the step storehouse React for building user interface of correspondence according to described business function demand
Assembly, the described step storehouse React assembly for building user interface is at model layer model and key-course according to functional requirement
Controller extends, and uses the step storehouse React being used for building user interface to write described functional requirement and obtains the source of correspondence
Code, and described compilation of source code is become primary script, and described primary script is used asynchronous module load mechanism AMD rule
The step storehouse React assembly for building user interface that model is packaged to be；
Parameter configuration module, for obtaining the parameter to the described step storehouse React assembly configuration for building user interface；
Transfer module, for passing to the step storehouse React group being used for building user interface of correspondence by the parameter of described configuration
Part, forms the step storehouse React assembly for building user interface comprising described parameter；
Display module, for showing the described step storehouse React assembly for building user interface comprising described configuration parameter.
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 true CN106250156A (en) | 2016-12-21 |
| CN106250156B 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) |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107391158A (en) * | 2017-08-02 | 2017-11-24 | 郑州云海信息技术有限公司 | A kind of method and apparatus that form drafting is realized based on iDataTable encapsulation |
| CN107704239A (en) * | 2017-10-09 | 2018-02-16 | 武汉斗鱼网络科技有限公司 | Configuration generating method, device and electronic equipment |
| CN108255485A (en) * | 2017-09-22 | 2018-07-06 | 优视科技有限公司 | Page building method, equipment 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 |
| CN108958730A (en) * | 2017-08-23 | 2018-12-07 | 北京五八信息技术有限公司 | Application component sharing method and device, terminal device and readable storage medium storing program for executing |
| CN109614162A (en) * | 2018-11-15 | 2019-04-12 | 福建天泉教育科技有限公司 | Based on the loaded and optimized method in front end under component development paradigm, storage medium |
| CN110209440A (en) * | 2019-06-14 | 2019-09-06 | 福建睿思特科技股份有限公司 | A kind of use optimization method and the storage medium of React component |
| CN110580174A (en) * | 2018-06-11 | 2019-12-17 | 中国移动通信集团浙江有限公司 | application component generation method, server and terminal |
| CN111641672A (en) * | 2020-04-10 | 2020-09-08 | 新智云数据服务有限公司 | Configuration method and configuration system of cloud resource monitoring component |
Citations (5)
| 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 |
| US20120297360A1 (en) * | 2011-05-19 | 2012-11-22 | Microsoft Corporation | Dynamic code generation and memory management for component object model data constructs |
| 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 |
-
2016
- 2016-08-01 CN CN201610624773.6A patent/CN106250156B/en active Active
Patent Citations (5)
| 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 |
| US20120297360A1 (en) * | 2011-05-19 | 2012-11-22 | Microsoft Corporation | Dynamic code generation and memory management for component object model data constructs |
| 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 |
Cited By (14)
| 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 |
| CN107391158A (en) * | 2017-08-02 | 2017-11-24 | 郑州云海信息技术有限公司 | A kind of method and apparatus that form drafting is realized based on iDataTable encapsulation |
| CN108958730A (en) * | 2017-08-23 | 2018-12-07 | 北京五八信息技术有限公司 | Application component sharing method and device, terminal device and readable storage medium storing program for executing |
| CN108255485A (en) * | 2017-09-22 | 2018-07-06 | 优视科技有限公司 | Page building method, equipment and electronic equipment |
| CN108255485B (en) * | 2017-09-22 | 2021-10-29 | 阿里巴巴（中国）有限公司 | Page construction method and equipment and electronic equipment |
| CN107704239A (en) * | 2017-10-09 | 2018-02-16 | 武汉斗鱼网络科技有限公司 | Configuration generating method, 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 |
| CN110580174A (en) * | 2018-06-11 | 2019-12-17 | 中国移动通信集团浙江有限公司 | application component generation method, server and terminal |
| CN109614162A (en) * | 2018-11-15 | 2019-04-12 | 福建天泉教育科技有限公司 | Based on the loaded and optimized method in front end under component development paradigm, storage medium |
| 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 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106250156B (en) | 2019-03-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106250156B (en) | Constructing method of component and device, component call method and apparatus | |
| US9696972B2 (en) | Method and apparatus for updating a web-based user interface | |
| CN103383645B (en) | Code generating method and system | |
| CN102073502B (en) | Method for rendering page frame by WEB primary layout and device thereof | |
| CN107577509A (en) | A kind of method, terminal and computer-readable recording medium for loading application interface | |
| CN102799640B (en) | Page charger and page loading method | |
| US20090150822A1 (en) | Method and system for scrolling | |
| CN102495735A (en) | Web end UI (user interface) component application frame system | |
| CN110134378A (en) | Application program creation method and device, computer equipment and storage medium | |
| CN107092473A (en) | Desktop application development approach and equipment | |
| CN106802804B (en) | Method and system for visualizing variable association component of human-computer interface | |
| CN111124391A (en) | Desktop end software pendant window management method and system | |
| CN110297636A (en) | A kind of automatic production of HTML page and parameter management method based on page configuration file, system and device | |
| JP5588695B2 (en) | Content sharing system | |
| CN112148278A (en) | Visual block chain intelligent contract framework and intelligent contract development and deployment method | |
| CN101876917A (en) | Control development method and device | |
| CN105074652A (en) | Remotely executing operations of an application using a schema that provides for executable scripts in a nodal hierarchy | |
| CN107632833A (en) | Generation method, equipment and the electronic equipment gently applied | |
| CN114996619A (en) | Page display method and device, computer equipment and storage medium | |
| CN110045956A (en) | Configuration method, device, equipment and the readable storage medium storing program for executing of component | |
| Gaouar et al. | HCIDL: Human-computer interface description language for multi-target, multimodal, plastic user interfaces | |
| CN107832088A (en) | Control application method and device, computing device, computer-readable storage medium | |
| CN101872348B (en) | Method for presenting plug-in program page frame in webpage browser as well as computer device | |
| CN103226475A (en) | Method and device for realizing control replacement during transcoding | |
| CN115658046A (en) | Method and device for developing modularized UI (user interface) interaction component based on Web technology |
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 |