CN112434236A - JS language based form customization method - Google Patents
JS language based form customization method Download PDFInfo
- Publication number
- CN112434236A CN112434236A CN202011306251.4A CN202011306251A CN112434236A CN 112434236 A CN112434236 A CN 112434236A CN 202011306251 A CN202011306251 A CN 202011306251A CN 112434236 A CN112434236 A CN 112434236A
- Authority
- CN
- China
- Prior art keywords
- configuration
- style
- parameters
- parameter
- initialization
- 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.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 16
- 230000006870 function Effects 0.000 claims abstract description 8
- 238000012986 modification Methods 0.000 claims description 4
- 230000004048 modification Effects 0.000 claims description 4
- 238000007405 data analysis Methods 0.000 claims description 3
- 238000011161 development Methods 0.000 abstract description 3
- 238000013461 design Methods 0.000 description 3
- 230000003993 interaction Effects 0.000 description 2
- 238000010586 diagram Methods 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000012216 screening Methods 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- 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/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- Stored Programmes (AREA)
Abstract
The invention provides a method for customizing a form based on JS language, which belongs to the technical field of software development, and is based on HTML, JavaScript and CSS language, controls a plug-in by inputting related initialization parameters, can be embedded into an HTML page in the form of a formed tag after the function menu completes configuration initialization, and finally generates an inputtable form after being edited by a browser. The development efficiency of the application software can be improved, and better code readability and maintainability are achieved.
Description
Technical Field
The invention relates to software development technical equipment, in particular to a form customization method based on JS language.
Background
HTML, known as hypertext markup language, is a markup language. The document format on the network can be unified through the labels, so that the scattered Internet resources are connected into a logic whole. HTML text is descriptive text consisting of HTML commands that can specify words, graphics, animations, sounds, tables, links, etc.
JavaScript is an transliterated scripting language, which is a dynamic type, weak type, prototype-based language and a built-in support type. Its interpreter, called JavaScript engine, is a part of the browser, widely used in the scripting language of the client, and was originally used on the HTML web page to add dynamic functionality to the HTML web page.
The CSS cascading style sheet is a computer language used to represent file styles such as HTML. The CSS can not only statically modify the web page, but also dynamically format elements of the web page in coordination with various scripting languages.
Most of input form forms of the current html page are form contents spliced by a developer, and the form function is realized by manually writing codes by the developer.
Disclosure of Invention
Based on the technical problem, the invention provides a form self-defining method based on JS language so as to improve the development efficiency of application software.
The technical scheme of the invention is as follows:
a user-defined form method based on JS language,
based on HTML, JavaScript and CSS languages, the plug-in is controlled by transmitting related initialization parameters, and after the function menu completes configuration initialization, the plug-in can be embedded into an HTML page in the form of a formed tag, and finally an inputtable form is generated after being edited by a browser.
Further, in the above-mentioned case,
and configuring the parameters exposed to the outside by the components to realize the personalized configuration of the custom expression.
The initialized configuration parameters mainly comprise functional form components, including the number of the input contents of the form, the default data type of the contents, the style of the form and the overall attributes of the form.
Further, in the above-mentioned case,
the parameter is an object in the form of JSON, which includes three parts,
the first part is an array of form components, wherein each element in the array menu is a sub-element of a form, including the name, input type, maximum length, canonical check, and specific configuration of whether an entry is necessary or not of the current form element.
The parameter of the second part is the style configuration of the form, and the style configuration is divided into a system style configuration part and a custom style configuration part.
The parameters of the third part are configured by global parameters.
In a still further aspect of the present invention,
the system style configuration is used for configuring the current system, simple style modification is realized by adjusting the color and font size of the theme, and the system is provided with more than one different style theme APIs (application programming interfaces), such as flat, mellow and the like different style theme styles.
If the current simple configuration cannot meet the requirements, custom configuration can be used to implement style reconstruction for the form by declaring a new style file.
After parameter configuration is completed, a parameter object is transmitted into a tool class in a component by using a built initialization function (init) to perform form initialization, a JavaScript main tool class in the component performs data analysis on the JSON parameter object, form tags are spliced according to corresponding condition rules containing parameters, finally, a final complete tag block is generated by loading global parameter configuration, the generated tag block is loaded in a page position appointed by a user, and a final form element is generated.
The invention has the advantages that
1. The development efficiency of the application software is improved;
2. better code readability and maintenance.
Drawings
FIG. 1 is a schematic workflow diagram of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the embodiments of the present invention clearer and more complete, the technical solutions in the embodiments of the present invention will be described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are some, but not all, embodiments of the present invention, and based on the embodiments of the present invention, all other embodiments obtained by a person of ordinary skill in the art without creative efforts belong to the scope of the present invention.
jQuery is a fast, compact JavaScript frame, which is another excellent JavaScript code base (or JavaScript frame) after Prototype. The aim of jQuery design is "write Less, Do More", i.e. advocate writing Less code and doing More. The method encapsulates functional codes commonly used by JavaScript, provides a simple JavaScript design mode, and optimizes HTML document operation, event processing, animation design and Ajax interaction.
Most of business pages of the current web application are formed by splicing JQuery + related plug-ins, node trees of html page Document objects are operated (value values and the like are obtained), and then condition combination is carried out according to related business logic, so that screening condition results are generated, and then data retrieval is carried out.
The method is customized based on HTML, JavaScript and CSS languages, controls the plug-in by inputting related initialization parameters, embeds the plug-in into an HTML page in the form of a formed tag after the function menu completes configuration initialization, and generates an inputtable form after being edited by a browser.
By configuring the externally exposed parameters of the components, developers can realize the personalized configuration of the user-defined expression, and the initialized and configured parameters mainly comprise functional form components including the number of form input contents and default type login. A style customization portion and a global control portion.
The parameter is an object in the form of JSON, which includes three parts:
the first part is an array of form components, wherein each element in the array menu is a sub-element of a form, including the name, input type, maximum length, regular test, and the specific configuration of attributes such as whether entry is necessary or not.
The parameter of the second part is the style configuration of the form, the style configuration is divided into a system style configuration part and a custom style configuration part, the system style configuration is used, developers can simply configure the current system, simple style modification is realized by adjusting the color, the font size and the like of a theme, the system is provided with several different style theme APIs (application programming interfaces), such as flat, mellow and other different style theme styles, if the current simple configuration cannot meet the requirement, the custom configuration can be used, and the style reconstruction of the form is realized by declaring a new style file.
The parameters of the third part are configured for global parameters, such as the return type of the current form entry result.
After parameter configuration is completed, a parameter object is transmitted into a tool class in a component by using a built initialization function (init) to perform form initialization, a JavaScript main tool class in the component performs data analysis on the JSON parameter object, form labels are spliced according to corresponding condition rules containing parameters, such as the name, the length, the type, the interaction event and other attributes of a certain form, finally, a final complete label block is generated by loading global parameter configuration, and the generated label block is loaded in a page position appointed by a user to generate a final form element.
The above description is only a preferred embodiment of the present invention, and is only used to illustrate the technical solutions of the present invention, and not to limit the protection scope of the present invention. Any modification, equivalent replacement, or improvement made within the spirit and principle of the present invention shall fall within the protection scope of the present invention.
Claims (8)
1. A method for customizing a form based on JS language is characterized in that,
based on HTML, JavaScript and CSS languages, the plug-in is controlled by transmitting related initialization parameters, and after the function menu completes configuration initialization, the plug-in can be embedded into an HTML page in the form of a formed tag, and finally an inputtable form is generated after being edited by a browser.
2. The method of claim 1,
and configuring the parameters exposed to the outside by the components to realize the personalized configuration of the custom expression.
3. The method of claim 2,
the initialized configuration parameters mainly comprise functional form components, including the number of the input contents of the form, the default data type of the contents, the style of the form and the overall attributes of the form.
4. The method of claim 1,
the parameter is an object in the form of JSON, which includes three parts,
the first part is an array of form components, wherein each element in the array menu is a sub-element of a form, including the name of the current form element, input type, maximum length, canonical check, and the specific configuration of whether an entry must be entered,
the parameters of the second part are the style configuration of the form, and the style configuration is divided into a system style configuration part and a user-defined style configuration part;
the parameters of the third part are configured by global parameters.
5. The method of claim 4,
and configuring the current system by using system style configuration, and realizing simple style modification by adjusting the color and font size of the theme.
6. The method of claim 5,
the system is provided with more than one API with different styles of themes.
7. The method according to claim 5 or 6,
if the current simple configuration cannot meet the requirements, custom configuration can be used to implement style reconstruction for the form by declaring a new style file.
8. The method of claim 7,
after parameter configuration is completed, a parameter object is transmitted into a tool class in a component by using a built initialization function (init) to perform form initialization, a JavaScript main tool class in the component performs data analysis on the JSON parameter object, form tags are spliced according to corresponding condition rules containing parameters, finally, a final complete tag block is generated by loading global parameter configuration, the generated tag block is loaded in a page position appointed by a user, and a final form element is generated.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011306251.4A CN112434236A (en) | 2020-11-20 | 2020-11-20 | JS language based form customization method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011306251.4A CN112434236A (en) | 2020-11-20 | 2020-11-20 | JS language based form customization method |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112434236A true CN112434236A (en) | 2021-03-02 |
Family
ID=74692762
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011306251.4A Pending CN112434236A (en) | 2020-11-20 | 2020-11-20 | JS language based form customization method |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112434236A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115291876A (en) * | 2022-09-29 | 2022-11-04 | 安徽商信政通信息技术股份有限公司 | Form design tool construction method, system, electronic equipment and storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108205744A (en) * | 2016-12-19 | 2018-06-26 | 成都鼎桥通信技术有限公司 | The implementation method and device of work process flow list |
| CN110609989A (en) * | 2019-08-30 | 2019-12-24 | 广东易臣信息技术有限公司 | Operation method for rapidly generating information form by adopting predefined layout component and application |
| CN111736831A (en) * | 2020-06-23 | 2020-10-02 | 山东浪潮商用系统有限公司 | Custom menu component development method based on HTML page of mobile terminal |
-
2020
- 2020-11-20 CN CN202011306251.4A patent/CN112434236A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108205744A (en) * | 2016-12-19 | 2018-06-26 | 成都鼎桥通信技术有限公司 | The implementation method and device of work process flow list |
| CN110609989A (en) * | 2019-08-30 | 2019-12-24 | 广东易臣信息技术有限公司 | Operation method for rapidly generating information form by adopting predefined layout component and application |
| CN111736831A (en) * | 2020-06-23 | 2020-10-02 | 山东浪潮商用系统有限公司 | Custom menu component development method based on HTML page of mobile terminal |
Non-Patent Citations (1)
| Title |
|---|
| 周兴宇: "面向智慧油田应用的Web前端框架研究与实现", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115291876A (en) * | 2022-09-29 | 2022-11-04 | 安徽商信政通信息技术股份有限公司 | Form design tool construction method, system, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7562307B2 (en) | Automated creation of web page to XML translation servers | |
| CN100568174C (en) | The system and method for consistent visual appearance is provided to the output of a plurality of application programs generations | |
| CA2764012C (en) | Computer-implemented method, system and computer program product for displaying a user interface component | |
| US8020103B2 (en) | Using templates for ensuring visual consistency among portlets | |
| AU2004205330A1 (en) | Programming interface for a computer platform | |
| US11349902B2 (en) | System and method to standardize and improve implementation efficiency of user interface content | |
| CN108170409B (en) | Development method and system of WEB front-end control | |
| CN111736831A (en) | Custom menu component development method based on HTML page of mobile terminal | |
| CN112434236A (en) | JS language based form customization method | |
| Pohja | COMPARISON OF COMMON XML-BASED WEB USER INTERFACE LANGUAGESCOMPARISON OF COMMON XML-BASED WEB USER INTERFACE LANGUAGES | |
| US9727537B2 (en) | Application of a system font mapping to a design | |
| US10331774B2 (en) | System and methods for designing artifacts associated with a webpage | |
| KR101228877B1 (en) | Device and Method for Producing Dynamic Web Site Using Web Design | |
| CN112486378B (en) | Graph generation method, device, terminal and storage medium | |
| Lang | Embedding S in other languages and environments | |
| Pohja et al. | Web User Interaction: Comparison of Declarative Approaches | |
| Pokorný et al. | Chart visualization of large data amount | |
| US11922113B2 (en) | Systems, methods, and devices for e-mail rendering | |
| JP2012216245A (en) | Business form server device, control method for business form server device, and control program of business form server device | |
| Zhekova et al. | Automatic Conversion of Image Design into HTML and CSS | |
| CN118092914A (en) | Page generation method, device, equipment, storage medium and low-code generation system | |
| Gündoğan | Automation of Artwork Processes | |
| Sundar et al. | Content Management System and Automation of Model Cloning Scalable EAV Model in GNEISYS Framework | |
| Gagniuc | Python Specific | |
| Zhan | HTML5 and JavaScript |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20210302 |