CN113918154A - Front-end framework system and method with controllable life cycle and functions - Google Patents

Front-end framework system and method with controllable life cycle and functions Download PDF

Info

Publication number
CN113918154A
CN113918154A CN202111237586.XA CN202111237586A CN113918154A CN 113918154 A CN113918154 A CN 113918154A CN 202111237586 A CN202111237586 A CN 202111237586A CN 113918154 A CN113918154 A CN 113918154A
Authority
CN
China
Prior art keywords
function
component
picture
end frame
attribute
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
Application number
CN202111237586.XA
Other languages
Chinese (zh)
Other versions
CN113918154B (en
Inventor
徐锋
刘杨华
张�杰
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Hailong Software Kunshan Co ltd
Original Assignee
Hailong Software Kunshan Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Hailong Software Kunshan Co ltd filed Critical Hailong Software Kunshan Co ltd
Priority to CN202111237586.XA priority Critical patent/CN113918154B/en
Publication of CN113918154A publication Critical patent/CN113918154A/en
Application granted granted Critical
Publication of CN113918154B publication Critical patent/CN113918154B/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/166Editing, e.g. inserting or deleting
    • G06F40/177Editing, e.g. inserting or deleting of tables; using ruled lines
    • G06F40/18Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/166Editing, e.g. inserting or deleting
    • G06F40/186Templates
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/36Software reuse

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Computational Linguistics (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Artificial Intelligence (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The invention relates to the technical field of front-end development frames, in particular to a life cycle and function controllable front-end frame system, which comprises a front-end frame total system, the front-end frame total system comprises a verification input box, a picture layout interface, a picture migration interface, a component library, an asynchronous communication interface, a common function library and a response type display, wherein the verification input box is used for automatically verifying input values of specified types for a control, the invention has very low learning cost and light weight, provides simple attribute setting, can make developers concentrate on the development of business logic, supports component development, makes the common business matched with controls and application interfaces into components and forms a component library, can be recycled, can be expanded according to requirements, and makes the functions more abundant.

Description

Front-end framework system and method with controllable life cycle and functions
Technical Field
The invention relates to the technical field of front-end development frameworks, in particular to a front-end framework system and a method with controllable life cycle and functions.
Background
The development of the internet is on the rise, a novel front-end framework can appear on average every half month, the front-end framework is updated quickly, some frameworks have a life cycle from birth to popularity in a few years and then finally cancel the voice invisibility, various frameworks are available in the market, the frameworks have a heavier UI (user interface), have a heavier weight and reduce the code quantity, or are compiled by inclusion construction, but none of the frameworks can always follow the market, and the requirements of all people are met.
Therefore, it is difficult for enterprises to find a framework fully suitable for their business requirements, and it is only cost-effective to follow a popular framework, and in consideration of the continuous business of companies and the learning cost later, and the problems encountered when using a popular framework, we need to provide a front-end framework system and method with controllable life cycle and function to solve the problems.
Disclosure of Invention
The present invention is directed to a front-end framework system and method with controllable life cycle and function, which solves the above-mentioned problems of the prior art.
The technical scheme of the invention is as follows: a front-end frame system with controllable life cycle and function comprises a front-end frame total system, wherein the front-end frame total system comprises a verification input box, a picture layout interface, a picture migration interface, a component library, an asynchronous communication interface, a common function library and a response type display, the verification input box is used for automatically verifying input values of specified types for a control, and displays the specified error information to the specified position, the picture layout interface is used for realizing the general layout of each part of the picture by introducing template page resources such as a header, a navigation, a bottom and the like, the picture migration interface is used for realizing corresponding picture migration processing by setting the form action attribute to be consistent with the background action name, the asynchronous communication interface is used for triggering the bound front-end processing function through the designated property setting to transfer parameters to the background, and calling the open customized interface to render the picture after receiving the background information.
Preferably, the component library comprises a drop-down box component and a table component, wherein the drop-down box component is used for displaying the drop-down options by setting the content property values, and asynchronously acquiring data from the background through the binding update events to update the drop-down options.
Preferably, the table component is used for displaying the table content by setting the content attribute value, and can asynchronously acquire data from the background to update the table content through the update event of the binding.
Preferably, the responsive display comprises a layout response and a height response, and the layout response is used for controlling whether the layout of all the sub-elements of the lower hierarchy can be automatically adjusted according to the screen size by setting a mark of the elastic box.
Preferably, the height response is used to automatically adapt the height of the corresponding element to the screen size by setting the name of the element that automatically responds to the height change.
Preferably, the common function library enables developers to insert self-written code logic in the critical phase of the process by rewriting the opened callback functions, thereby performing some processing.
A method for controlling the life cycle and the function of a front-end frame comprises the following specific operation steps:
the method comprises the following steps: expanding the functions of the HTML basic tags by the custom component;
step two: a hierarchical responsive display;
step three: inheriting a reloading type picture layout;
step four: the attributes drive the Dom objects.
Preferably, the function expansion of the HTML basic tag by the custom component in the step one is mainly to bind the custom tag and the corresponding component function in a dictionary form, search the Dom objects of all the custom tags after the screen loading is completed and transmit the Dom objects to the component function, modify the custom tag into the appropriate HTML basic tag by the component function through the outer HTML attribute of the Dom object, and add the customized function to the Dom object, so as to realize the function expansion of the HTML basic tag by the custom component.
Preferably, in the hierarchical responsive display in the second step, the Dom object with the "data-flexbox" attribute set is mainly used as a root node, and whether the line is broken is judged by calculating the gap, the indentation and the font size of the control from the child node of the lowest layer upwards by a recursive method, so that the number of the control elements in one line and the width of the picture are adapted, and the child node with the "data-flexbox" attribute set is automatically skipped.
Preferably, the inherited reloading type screen layout in the third step mainly takes the content of the "base" attribute in the layout template as an inheritance source, and reads the template information from the root template at the top layer downwards layer by layer through a recursive method, if the lower layer template redefines a certain attribute of the upper layer template, the information of the upper layer template is covered by the information of the lower layer template, and if the lower layer template defines a certain attribute which is undefined by the upper layer template, the information is read as the added information.
Preferably, the attribute-driven Dom object in the fourth step is mainly that custom attributes corresponding to common screen events such as clicking, content change, size change, loading completion and the like are preset for the framework, the framework automatically searches the Dom object with the corresponding custom attributes when monitoring the events, and automatically executes corresponding operations on the Dom object according to the set contents of the custom attributes.
The present invention provides a front end frame system and method with controllable life cycle and function by improving, compared with the prior art, the following improvements and advantages:
one is as follows: the invention has very low learning cost and light weight, provides simple attribute setting, can lead developers to concentrate on the development of business logic, supports component development, makes the common business matched with controls and application interfaces into components and forms a component library, can be repeatedly used, can be expanded according to requirements, and leads the functions to be richer;
the second step is as follows: the method has strong compatibility, can continuously perfect and add functions according to project requirements, can independently introduce functional modules, can quickly manufacture Mock, is accelerated by at least fifty percent compared with normal programming, can be easily realized by only looking up help documents and simply configuring attributes, and is suitable for new-specification projects or reconstructed projects in Web development projects.
Drawings
The invention is further explained below with reference to the figures and examples:
FIG. 1 is a schematic diagram of the overall system architecture of the present invention;
FIG. 2 is a schematic diagram of the component library structure of the present invention;
FIG. 3 is a schematic diagram of a responsive display structure according to the present invention.
Detailed Description
The present invention is described in detail below, and technical solutions in the embodiments of the present invention are clearly and completely described, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The invention provides a front-end frame system and a method with controllable life cycle and function through improvement, and the technical scheme of the invention is as follows:
the first embodiment is as follows:
as shown in fig. 1-3, a front-end framework system with controllable lifecycle and function includes a front-end framework overall system, which includes a verification input box, a screen layout interface, a screen migration interface, a component library, an asynchronous communication interface, a common function library and a response display, the verification input box is used to automatically perform input value verification of a specified kind for a control and display specified error information to a specified position, the screen layout is composed of four sub-screens, namely, a header, a footer, a navigation and a body, the screen layout interface is used to implement a common layout of each part of the screen by introducing template page resources such as a header, a navigation and a bottom, the screen migration interface is used to implement corresponding screen migration processing by setting a form action attribute to be consistent with a background action name, the asynchronous communication interface is used to trigger a bound front-end processing function to transfer parameters through a specified attribute setting, and calling an open customized interface to render the picture after receiving the background information.
Further, in the above technical solution, the component library includes a drop-down box component and a table component, where the drop-down box component is configured to display a drop-down option by setting a content attribute value, and may asynchronously obtain data from a background through a bound update event to update the drop-down option.
Further, in the above technical solution, the table component is configured to display the table content by setting a content attribute value, and may asynchronously obtain data from the background through the binding update event to update the table content.
Further, in the above technical solution, the responsive display includes a layout response and a height response, and the layout response is used to control whether to automatically adjust the layout of all the sub-elements of the lower hierarchy according to the screen size by setting a flag of the elastic box.
Further, in the above technical solution, the height response is used for automatically responding to the height change by setting an element name, so that the height of the corresponding element can be automatically adapted to the screen size.
Further, in the above technical solution, the common function library may enable a developer to insert self-written code logic in a critical stage of a process by rewriting the opened callback function, so as to execute some processing.
A method for controlling the life cycle and the function of a front-end frame comprises the following specific operation steps:
the method comprises the following steps: expanding the functions of the HTML basic tags by the custom component;
step two: a hierarchical responsive display;
step three: inheriting a reloading type picture layout;
step four: the attributes drive the Dom objects.
Further, in the above technical solution, the function expansion of the HTML basic tag by the custom component in the first step is mainly to bind the custom tag and the corresponding component function in a dictionary form, search all Dom objects of the custom tag after the picture loading is completed and transmit the Dom objects to the component function, modify the custom tag into an appropriate HTML basic tag by the component function through the outer HTML attribute of the Dom object, and add a customized function to the Dom object, so as to implement the function expansion of the HTML basic tag by the custom component.
Further, in the above technical solution, the hierarchical response type display in the second step mainly uses a Dom object with a data-flexbox attribute as a root node, starts from a child node on the lowest layer by layer upwards through a recursive method, and determines whether to break the line through calculation of a gap, an indentation, and a font size of the control, so as to adapt the number of the control pieces in a line and the width of the screen, and automatically skip the child node with the data-flexbox attribute.
Further, in the above technical solution, the inherited heavy load type screen layout in the third step mainly uses the content of the "base" attribute in the layout template as an inheritance source, and reads the template information layer by layer from the root template at the top layer by a recursive method, if the lower layer template redefines a certain attribute of the upper layer template, the information of the upper layer template is covered by the information of the lower layer template, and if the lower layer template defines a certain attribute that is undefined for the upper layer template, the information is read as the added information.
Further, in the foregoing technical solution, the attribute-driven Dom object in the fourth step is mainly that a frame presets custom attributes corresponding to common screen events such as clicking, content change, size change, and loading completion, and when monitoring these events, the frame automatically searches for a Dom object with the corresponding custom attributes, and automatically executes corresponding operations on the Dom object according to the set contents of the custom attributes.
The working principle is as follows: firstly inputting keywords in a search condition of the upper half part of a search picture and pressing a search button, displaying a search result in a form component of the lower half part of the search picture, selecting any result in the form and jumping to an editing picture after pressing the editing button, acquiring the content of a linkage project from a background through asynchronous communication, pressing a storage button after inputting modified content, automatically verifying an input value of the picture and automatically submitting the form to a corresponding background for processing, binding a custom tag and a corresponding component function in a dictionary form by a custom component, searching all Dom objects of the custom tag after the picture is loaded and transferring the Dom objects to the component function, modifying the custom tag into a proper HTML base tag through an outerHTML attribute of the Dom object by the component function, and adding a customized function to the Dom object, the hierarchical response type display mainly takes a Dom object with a set data-flexbox attribute as a root node, starts from a subnode of the lowest layer to go up layer by layer through a recursive method, judges whether to break the line through calculation of gaps, retraction and font size of a control, thereby adapting the number of control pieces in one line and the width of a picture, automatically skips over the subnode with the set data-noneflex attribute, inherits the heavy-loaded picture layout and mainly takes the content of the base attribute in the layout template as an inheritance source, reads the template information from the root template of the uppermost layer downwards layer by layer through the recursive method, and covers the information of the upper layer template by using the information of the lower layer template if the lower layer template redefines a certain attribute of the upper layer template, if the lower layer template defines a certain attribute undefined by the upper layer template, and reading in the attribute-driven Dom object as the added information, wherein custom attributes corresponding to common picture events such as clicking, content change, size change, loading completion and the like are preset for the framework by the attribute-driven Dom object, the framework can automatically search the Dom object with the corresponding custom attributes when monitoring the events, and automatically execute corresponding operation on the Dom object according to the set contents of the custom attributes.
The previous description is provided to enable any person skilled in the art to make or use the present invention. Various modifications to these embodiments will be readily apparent to those skilled in the art, and the generic principles defined herein may be applied to other embodiments without departing from the spirit or scope of the invention. Thus, the present invention is not intended to be limited to the embodiments shown herein but is to be accorded the widest scope consistent with the principles and novel features disclosed herein.

Claims (10)

1. The utility model provides a controllable front end frame system of life cycle, function, includes front end frame total system, its characterized in that: the front-end frame total system comprises a verification input box, a picture layout interface, a picture migration interface, a component library, an asynchronous communication interface, a common function library and a response type display, wherein the verification input box is used for automatically verifying input values of specified types of controls and displaying specified error information to a specified position, the picture layout interface is used for realizing the general layout of each part of a picture by introducing template page resources such as a head part, a navigation part and a bottom part, the picture migration interface is used for realizing corresponding picture migration processing by setting the action attribute of a form to be consistent with the action name of a background, and the asynchronous communication interface is used for triggering a bound front-end processing function to transmit parameters to the background through the specified attribute setting and calling an open customized interface to render the picture after receiving the information of the background.
2. The front-end frame system with controllable lifecycle, functions of claim 1, characterized in that: the component library comprises a drop-down box component and a table component, wherein the drop-down box component is used for displaying drop-down options by setting content attribute values, and asynchronously acquiring data from a background through a bound update event to update the drop-down options.
3. The front end frame system with controllable lifecycle, functions of claim 2, characterized in that: the table component is used for displaying the table content by setting the content attribute value, and asynchronously acquiring data from the background through the update event of the binding to update the table content.
4. The front-end frame system with controllable lifecycle, functions of claim 1, characterized in that: the response type display comprises a format response and a height response, and the format response is used for controlling whether the typesetting of all the sub-elements of the lower level can be automatically adjusted according to the screen size or not by setting a mark of the elastic box.
5. The life cycle, function controllable front end frame system of claim 4, wherein: the height response is used for automatically responding to the height change by setting the element name, so that the height of the corresponding element can be automatically adapted to the screen size.
6. The front-end frame system with controllable lifecycle, functions of claim 1, characterized in that: the common function library can enable a developer to insert self-written code logic in the key stage of the process by rewriting the opened callback function, so that some processing is executed.
7. A method for lifecycle, functionality control of a front-end framework, using a lifecycle, functionality control front-end framework system according to any of claims 1-6, characterized by: the specific operation steps are as follows:
the method comprises the following steps: expanding the functions of the HTML basic tags by the custom component;
step two: a hierarchical responsive display;
step three: inheriting a reloading type picture layout;
step four: the attributes drive the Dom objects.
8. The front-end frame lifecycle, function controllable method according to claim 7, characterized by: the function expansion of the HTML basic tag by the custom component in the first step is mainly to bind the custom tag and the corresponding component function in a dictionary form, search all Dom objects of the custom tag after the picture loading is completed and transmit the Dom objects to the component function, modify the custom tag into a proper HTML basic tag by the component function through the outHTML attribute of the Dom object, and add the customized function to the Dom object so as to realize the function expansion of the HTML basic tag by the custom component.
9. The front-end frame lifecycle, function controllable method according to claim 7, characterized by: in the second step, the hierarchical response type display mainly takes the Dom object with the data-flexbox attribute set as a root node, and judges whether to break the line or not by calculating the gap, the indentation and the font size of the control from the subnode of the lowest layer upwards layer by layer through a recursive method, so that the number of the control elements in one line is adapted to the width of the picture, and the subnode with the data-flexbox attribute set is automatically skipped.
10. The front-end frame lifecycle, function controllable method according to claim 7, characterized by: the inheritance reloading type picture layout in the third step mainly takes the content of 'base' attribute in the layout template as an inheritance source, and reads the template information from the root template at the top layer downwards layer by a recursive method, if the lower layer template redefines a certain attribute of the upper layer template, the information of the lower layer template is used for covering the information of the upper layer template, and if the lower layer template redefines a certain attribute of the upper layer template, the information is read as the added information;
the attribute-driven Dom object in the fourth step is mainly that custom attributes corresponding to common picture events such as clicking, content change, size change, loading completion and the like are preset for the framework, the framework can automatically search the Dom object with the corresponding custom attributes when monitoring the events, and automatically execute corresponding operation on the Dom object according to the set contents of the custom attributes.
CN202111237586.XA 2021-10-22 2021-10-22 Front end framework system and method with controllable life cycle and function Active CN113918154B (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202111237586.XA CN113918154B (en) 2021-10-22 2021-10-22 Front end framework system and method with controllable life cycle and function

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202111237586.XA CN113918154B (en) 2021-10-22 2021-10-22 Front end framework system and method with controllable life cycle and function

Publications (2)

Publication Number Publication Date
CN113918154A true CN113918154A (en) 2022-01-11
CN113918154B CN113918154B (en) 2024-06-25

Family

ID=79242500

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202111237586.XA Active CN113918154B (en) 2021-10-22 2021-10-22 Front end framework system and method with controllable life cycle and function

Country Status (1)

Country Link
CN (1) CN113918154B (en)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104798036A (en) * 2012-08-14 2015-07-22 微软公司 User interface control framework for stamping out controls using a declarative template
CN109325203A (en) * 2018-09-10 2019-02-12 北京亚鸿世纪科技发展有限公司 The device of Web system visualization multiplexing is realized in a kind of automation
CN111813403A (en) * 2020-07-09 2020-10-23 北京亚鸿世纪科技发展有限公司 Method and device for managing dragging component data in large-screen data visualization development
CN113296758A (en) * 2021-03-15 2021-08-24 上海爱数信息技术股份有限公司 Front-end component library construction method and device and storage medium

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104798036A (en) * 2012-08-14 2015-07-22 微软公司 User interface control framework for stamping out controls using a declarative template
CN109325203A (en) * 2018-09-10 2019-02-12 北京亚鸿世纪科技发展有限公司 The device of Web system visualization multiplexing is realized in a kind of automation
CN111813403A (en) * 2020-07-09 2020-10-23 北京亚鸿世纪科技发展有限公司 Method and device for managing dragging component data in large-screen data visualization development
CN113296758A (en) * 2021-03-15 2021-08-24 上海爱数信息技术股份有限公司 Front-end component library construction method and device and storage medium

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
九五之尊唯我独尊: "前端组件化", Retrieved from the Internet <URL:《https://www.cnblogs.com/xmhu/p/6654880.html》> *

Also Published As

Publication number Publication date
CN113918154B (en) 2024-06-25

Similar Documents

Publication Publication Date Title
US8239882B2 (en) Markup based extensibility for user interfaces
CN106250156B (en) Constructing method of component and device, component call method and apparatus
CN102495735A (en) Web end UI (user interface) component application frame system
KR20050039551A (en) Programming interface for a computer platform
CN102254049A (en) Web page design system and method for building same
CN109298864A (en) The method and electronic equipment of automation generation project skeleton screen under teaching platform
US20120151388A1 (en) Creating portals having consistent appearances
CN107748658A (en) A kind of software development methodology, system, computer-readable recording medium and electronic equipment
US10984170B2 (en) Systems and/or methods for dynamic layout design
CN113918154A (en) Front-end framework system and method with controllable life cycle and functions
Grolaux et al. FlexClock, a Plastic Clock Written in Oz with the QTk toolkit.
Grolaux et al. Qtk: An integrated model-based approach to designing executable user interfaces
Wang et al. Abstract interface specification languages for device-independent interface design: classification, analysis and challenges
WO2024138357A1 (en) Application development platform, method, device, and storage medium
Kim et al. Multi-platform document-oriented guis
Wang et al. Implementation of Tree Menu Based on Vue3 Responsive Array and Subcomponent Recursive Application
Campbell Objective-C Recipes: A Problem-Solution Approach
Ghoda Windows 8 MVVM Patterns Revealed: covers both C# and JavaScript
Slender Developing with ext GWT: Enterprise RIA development
Wei et al. Research on software reuse of user interface for mobile computing devices based on XML
De Donatis AdvancED ActionScript Components: Mastering the Flash Component Architecture
Yeung et al. The table widget reloaded: requirements, design and implementation
Mehl et al. Window programming in DFKI Oz
Lyman et al. Building and Processing Web Forms with Zend_Form
Marsden Designing graphical interface programming languages for the end user

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
GR01 Patent grant
GR01 Patent grant