An apparatus and method for constructing a web front-end application based on object technology

Abstract

This invention discloses an apparatus and method for building web front-end applications based on object technology, belonging to the field of Internet technology. It solves the technical problems of existing technologies for building web front-end applications, such as the high learning cost caused by the separation of HTML, CSS, and JavaScript in traditional native methods; difficulties in data access between components during runtime in component-based methods; instability of common basic code and redundant code during component reuse; and difficulties in code understanding, porting, and debugging due to significant differences between component-based implementations and traditional native methods. It includes a main application base class, page view base class, storage base class, event base class, and loading and packaging tool base class, encapsulating common and basic functions in these base classes, while the specific page and function-related code required by the web application is implemented by their respective derived classes. This invention is convenient and quick to build, has a low learning cost, overcomes the problems of unstable common basic code and redundant code in existing component-based methods, and reduces the complexity of inter-component access and operation.

Description

Technical Field

[0001] This invention relates to an apparatus and method for building web front-end applications, specifically to an apparatus and method for building web front-end applications based on object technology, belonging to the field of Internet technology. Background Technology

[0002] In recent years, with the development of web front-end technology, various front-end applications based on the three basic technologies of HTML, CSS, and JavaScript have developed rapidly and have been widely used in PC web front-end applications, PC desktop front-end applications, and mobile applications.

[0003] The traditional way to build web front-end applications is to define HTML, CSS, and JavaScript in different files. This separation of HTML and CSS resource definitions from JavaScript business logic code brings a lot of learning costs to web front-end application development.

[0004] To address this shortcoming, component-based front-end frameworks that have emerged in recent years, such as React and Angular, break down web applications into independent components based on functionality. They also organize the HTML, CSS, and JavaScript files into smaller fragments within the implementation code of these components. This approach combines the HTML and CSS resource definitions with the component-related code in the JavaScript business logic, making it easier for developers to understand the component's implementation logic and reducing the learning curve. However, this organization makes data access between components difficult at runtime due to their relative independence. Furthermore, if a component needs to be reused, all of its HTML, CSS, and JavaScript code must be copied and modified. This reuse method is detrimental to the stability of the component's "common, fundamental" code, and the excessive coupling forces the retention of some "redundant and useless" code during reuse.

[0005] To ensure component encapsulation, the framework mentioned above also uses a virtual DOM to replace the traditional HTML explicitly defined DOM. While this seemingly technologically advanced approach improves component encapsulation, it also makes these components significantly different from traditional DOM-based code, leading to difficulties in code understanding, porting, and debugging.

[0006] The aforementioned drawbacks directly result in high learning and usage costs when building web front-end applications using traditional native and component-based methods.

[0007] The applicant has discovered that the prior art has at least the following technical problems:

[0008] 1. In existing technologies, the traditional native way of building web front-end applications has problems such as the separation of resource definition code and business logic code due to the definition of HTML, CSS and JavaScript in different files, which makes it difficult to understand and has a high learning cost;

[0009] 2. In existing technologies, front-end frameworks based on component technology face difficulties in data access between components at runtime;

[0010] 3. In the existing technology, the component reuse method of the front-end framework based on component technology is not conducive to the stability of the "common and basic" code of the components. At the same time, due to too much coupling, some "redundant and useless" code has to be retained when reusing.

[0011] 4. In the existing technology, front-end frameworks based on component technology use virtual DOM to replace the traditional HTML explicitly defined DOM in order to ensure the encapsulation of components. This makes these components very different from the code developed based on traditional DOM, which brings difficulties in code understanding, porting and debugging, and increases the learning and usage costs. Summary of the Invention

[0012] The purpose of this invention is to provide an apparatus and method for building web front-end applications based on object technology, in order to solve the problems of traditional native methods for building web front-end applications in the prior art, which separate resource definition code and business logic code due to the definition of HTML, CSS, and JavaScript in different files, making them difficult to understand and with high learning costs; the difficulty of data access between components in component-based front-end frameworks at runtime; the component reuse method of component-based front-end frameworks is not conducive to the stability of the "common and basic" code of components, and at the same time, due to too much coupling, some "redundant and useless" code must be retained during reuse; in order to ensure the encapsulation of components, component-based front-end frameworks use virtual DOM to replace the traditional HTML explicitly defined DOM, making these components significantly different from the code developed based on traditional DOM, resulting in difficulties in code understanding, porting, and debugging, and increasing the learning and usage costs.

[0013] To achieve the above objectives, the present invention provides the following technical solution:

[0014] This invention provides an apparatus and method for building web front-end applications based on object technology, utilizing the concepts and techniques of JavaScript Classes in the ES6 standard. The apparatus includes an apparatus for building web front-end applications based on object technology, and a method for building web front-end applications based on object technology.

[0015] One type of device for building web front-end applications based on object technology includes:

[0016] The main application base class is used to create objects of the main application class of the front-end application, and to manage the global data and main page view of the front-end application.

[0017] The base class for page views, used to derive view classes and the main page view, manages the page's HTML and CSS resources, DOM event responses defined on the page, as well as page-related data and custom events;

[0018] A base storage class, used to derive storage classes, derive global data, and organize and manage private and public data;

[0019] The base class for events is used to derive event classes, manage event registration, triggering, and event handling functions.

[0020] A base class for loading and packaging tools, used to derive loading and packaging tool classes as well as the final compilation and distribution of the front-end application files.

[0021] Furthermore, the main application class object of the front-end application is created through the main application base class, and a hierarchical nested object tree including various page objects is established with the main application class object as the root node. Each page object is created by a page view class that inherits from the page view base class. Each page view class manages the HTML, CSS resources, DOM, related data, and page-related events required by the page. The operation of the related data is completed through the page-derived storage class that inherits from the storage base class. At the same time, the handling of page-related events is completed through the page-derived event class that inherits from the event base class. The various files of the front-end application are finally compiled and published through the loading and packaging tool base class.

[0022] Furthermore, the operations of the main application base class in the front-end application include: creating the main application object of the front-end application and using it as the root node of the page object tree; triggering the creation of each subordinate page object; creating and managing a nested object tree containing all page and component objects; managing the global data of the front-end application; and creating and managing application-level events and their response functions.

[0023] Furthermore, the main application base class also includes internal member functions for traversing, filtering, and enabling each object node in the object tree.

[0024] Furthermore, the operations of the page view base class in the front-end application also include:

[0025] It provides sequential loading of HTML and CSS resources and registration of DOM event response functions;

[0026] Load and manage the page's DOM, and register and manage DOM-related callback functions;

[0027] Manages the definition and loading order of the page's child pages and child components;

[0028] Manage the registration of events related to the page and trigger responses to registered events.

[0029] Furthermore, the page view base class uses a storage class to handle page-related business data. Furthermore, the operations of the storage base class in the front-end application also include:

[0030] Provide functions to perform access to and control of the aforementioned private and public data;

[0031] Provides functions to enable data binding to the DOM and rendering operations.

[0032] Furthermore, its derived class, namely the storage class, serves as a member of the main application base class and the page view base class. After instantiation, it can perform data processing functions for application and page view level objects. The operations of the storage class in the front-end application also include:

[0033] Manage private data related to the current object, component, and plugin;

[0034] Complete two-way data binding between HTML and JavaScript.

[0035] Furthermore, the main application base class and the page view base class use event classes to handle application and page-related events.

[0036] Furthermore, the operations of the event base class in the front-end application also include:

[0037] It provides the ability to customize event registration, triggering, and corresponding handling functions at different lifecycles at the application and page levels;

[0038] Manage the registration, triggering, and handling functions of events related to applications, pages, components, and plugins.

[0039] Furthermore, the operations of the loading and packaging tool base class in the front-end application also include:

[0040] Manages the loading, combination, encryption, and packaging of all source files of the main application base class, page view base class, storage base class, event base class, and their derived classes; calls system tools to compile the complete debug and release versions of the front-end application; and provides common functions for log printing, format conversion, and asynchronous response.

[0041] Furthermore, the loading and packaging utility class is used to load, combine, package, and call system tools to compile debug and release versions of the complete front-end application.

[0042] Furthermore, the operation of the event base class in the front-end application includes:

[0043] The main application base class and the page view base class call the event class to provide customized capabilities for event registration, triggering, and corresponding handling functions at different lifecycles of the application and page levels; and manage the registration, triggering, and handling functions of events related to the application, page, component, and plugin.

[0044] A method for building web front-end applications based on object technology includes:

[0045] Step 1: Initialize the main application class object, including the following sub-steps:

[0046] Step 11: Instantiate the main application class;

[0047] Step 12: Create the root node of the front-end application object tree;

[0048] Step 13: Trigger the instantiation of the main page view.

[0049] Step 2, initialize the main page view, including the following sub-steps:

[0050] Step 21: Derive the homepage view class from the page view base class;

[0051] Step 22: Implement the necessary storage classes and event classes for the homepage view class;

[0052] Step 23: Define a list of the next-level subview classes to which the homepage view class belongs;

[0053] Step 24: Instantiate the homepage view class;

[0054] Step 25: Mount the instantiated object of the homepage view class to the root node;

[0055] Step 26: Trigger the instantiation of the next-level subview class.

[0056] Step 3: Initialize each subpage view, including the following sub-steps:

[0057] Step 31: The parent view class drives the instantiation of each subpage view class according to the list of next-level subpage view classes described in step 23;

[0058] Step 32: The resource loading function of the page view base class is automatically called and the page-related resources are loaded;

[0059] Step 33: Check that the child page DOM is ready to load and register callback handling functions;

[0060] Step 34: Load the data inside the subpage;

[0061] Step 35: Register subpage events.

[0062] Step four: The front-end application build is complete. Wait for the response operation, which includes the following sub-steps:

[0063] Step 41: All DOM callback functions are in the callback response state, waiting for a response to user actions;

[0064] Step 42: All registered events are in a callback response state, waiting for response events.

[0065] Based on the above technical solution, the embodiments of the present invention can produce at least the following technical effects:

[0066] (1) The present invention provides an apparatus and method for building web front-end applications based on object technology. By defining classes, the resource definition code and business logic code of the web front-end application are integrated, which solves the problem of separation between resource definition code and business logic code caused by defining HTML, CSS and JavaScript in different files when building web front-end applications in the traditional native way.

[0067] (2) The present invention provides an apparatus and method for building web front-end applications based on object technology. By utilizing the characteristics of class inheritance, common and basic code is collected into the base class, thereby overcoming the problem that existing component-based code reuse affects common and basic code and has a lot of redundant code.

[0068] (3) The present invention provides a device and method for building web front-end applications based on object technology. When the main application class and page view class are instantiated, an application object tree is built. The member functions provided by the main application class can be used to easily access any node in the object tree. This method reduces the complexity of inter-component access and operation when the existing component method is run.

[0069] (4) The present invention provides an apparatus and method for building web front-end applications based on object technology, which fully preserves the DOM definition in HTML and avoids the problems of understanding obstacles, actual use and rendering time caused by the virtual DOM mode in the existing component method.

[0070] (5) The present invention provides an apparatus and method for building web front-end applications based on object technology. The construction method of the present invention fully follows the syntax and basic method of traditional native HTML construction. The construction method is convenient, fast and has low learning cost. Attached Figure Description

[0071] Figure 1 This is a schematic diagram of the basic class relationships in an embodiment of the present invention;

[0072] Figure 2 This is a schematic diagram of the internal implementation of the basic class in an embodiment of the present invention;

[0073] Figure 3 This is a schematic diagram illustrating the object tree construction and management method in the application framework of this invention embodiment;

[0074] Figure 4 This is a schematic diagram illustrating the steps of building a front-end application according to an embodiment of the present invention. Detailed Implementation

[0075] To further clarify the purpose, technical features, and advantages of this invention, we will describe the technical solution of this invention clearly and completely in conjunction with the accompanying drawings. Obviously, the embodiments described in this section are only some, not all, of the embodiments of this invention. Based on the names of the basic classes and their derived classes involved in the illustrations of this invention, the names and quantities of class members can be varied within the technical implementation mechanism described in this invention. However, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this invention.

[0076] This invention provides a device for building web front-end applications based on object technology. It utilizes the Class concept from the ES6 standard to organize and define the web front-end application, and designs a set of class member functions to manage the runtime characteristics of instantiated class objects, thereby realizing the runtime behavior of the web front-end application. Now, in conjunction with... Figure 1 , 2 3. This will be explained in detail.

[0077] In a preferred embodiment of the present invention, the web application framework includes five basic base classes: a main application base class, a page view base class, a storage base class, an event base class, and a loading and packaging utility base class. These five base classes work together to complete the functionality of the entire web application. The specific construction and functional implementation process is as follows: First, the main application base class creates the main control object of the web application and establishes a hierarchically nested object tree that includes various page objects. Each page object is created by a view class that inherits from the page view base class. Each view class manages the HTML, CSS resources, DOM, and related data and events required by the page. The related data operations are completed through the page-derived storage class that inherits from the storage base class. At the same time, page-related event handling is completed through the page-derived event class that inherits from the event base class. Finally, the various files of the entire application are compiled and published by the loading and packaging utility class.

[0078] In a preferred embodiment of the present invention, these five basic classes are named class theAPP, class CView, class CStore, class CEvent, and class CTools.

[0079] `class theAPP`: The main application base class is designed to not include any HTML or CSS resources. It is only responsible for managing the global data and the application's main page view (i.e., the root page view). The global data and the application's main page view are derived from the storage base class and the page view base class, respectively. In actual application (i.e., runtime), after the main application base class is instantiated, it becomes the root node of the front-end application instance object tree. During its instantiation, it triggers the instantiation of the main view class. The instantiation of the main view class will trigger the instantiation of each page in the next level defined within it, and load the instantiated objects of these view classes, thus forming a hierarchical object tree with the main application class object as the root node, including all view class objects of this application. The main application base class is also designed with a set of internal functions to provide the ability to traverse, filter, and enable each object node in the object tree.

[0080] The `CView` class is the base class for page views. It manages the page's HTML and CSS resources, defined DOM event responses, page-related data, and other custom events. It provides sequential loading of HTML and CSS resources and registration of DOM event response functions; it also manages the definition and loading order of sub-pages and components, as well as the registration and triggering of events related to these page objects. In actual use (i.e., runtime), each application page derives its own specific view class from this base class. After instantiation, the derived class produces the actual page object and is attached to the aforementioned main application class object node.

[0081] The base page view class manages the page's HTML and CSS resources. In actual use (i.e., runtime), the specific view classes derived from this base page view class contain the complete HTML DOM and CSS style definitions of the specific page. This approach is seamlessly compatible with the "traditional native" technology mentioned earlier, and integrating these resources into one class effectively avoids the inconvenience of overall understanding and coding caused by the separation of HTML, CSS, and JavaScript in "traditional native" development technology. The derived specific view classes can also further subdivide the current page into sub-level subpages or components / plugins by using themselves as parent pages. This approach is compatible with the "componentization" technology mentioned earlier, and the instantiated sub-level subpage objects are mounted under themselves to form a hierarchical view class object tree.

[0082] The page view base class manages the DOM event responses of the current page, loading and managing the DOM registration callback functions for this page. This maintains consistency in the way native DOM responses are handled and debugged.

[0083] The basic management tasks mentioned above are completed by the common code of the page view base class. In actual application, you only need to derive your own view class and use the interface functions provided by the base class to manage the resources of your own page, without any additional coding.

[0084] The `CStore` class is a base class for organizing and managing private and public data. It provides a set of functions to enable the access, control, data binding, and rendering of this private and public data to the DOM. In actual use (i.e., at runtime), its derived classes serve as members of the main application base class and the page view base class. After instantiation, they can perform data processing functions for application and page view level objects.

[0085] The basic management of the aforementioned data is handled by the storage base class code. In practical applications, you only need to associate the data definition of your own page with the management interface of CStore, without any further coding.

[0086] The `CEvent` class is a base class for managing the registration, triggering, and handling functions of page / component / plugin-level events related to the current application, page, component, and plugin. Examples include registering and triggering events such as Mounting the page when an HTML page loads and Active Displaying the page when it is displayed. It works in conjunction with the aforementioned main application base class and page view base class to provide customized capabilities for event registration, triggering, and corresponding handling functions at different lifecycle stages of the application and page.

[0087] The basic management of these events and their triggering is handled by the common code in the event base class. In practice, you only need to associate the event and handling function definitions of your own page with the management interface of the view class, without any further coding.

[0088] class CTools: Base class for loading and packaging tools. It manages the loading, combining, encryption, and packaging of all source files from the aforementioned classes. This base class for loading and packaging tools calls system tools to compile the application into a debug or release version. At the same time, it also provides basic public functions such as logging, format conversion, and asynchronous response.

[0089] The above implementation encapsulates all the "common and basic" functions in the base class, while the specific pages and function-related code required by the specific web application are implemented by their respective derived classes. This effectively avoids the disadvantages of the current "component technology" implementation framework, which breaks the "common and basic" code and retains too much "redundant" code when reusing components.

[0090] The five derived base classes include: main application class, view class, storage class, event class, and loading and packaging utility class.

[0091] This invention also provides a method for building web front-end applications based on object technology, combined with Figure 4 Please provide a detailed explanation.

[0092] Step 1: Import the main application class and initialize the root node theAPP object.

[0093] Sample code:

[0094] import { theApp, CView} from 'yydFrame'

[0095] Step 2: Initialize the first main page view. Inherit the CMainFrm view class from the base class CView and instantiate it, then mount the instantiated page object to the root node of theAPP.

[0096] Sample code:

[0097] / / Inherit from CView to define the CMainFrm class

[0098] class CMainFrm extends CView{ / / ! inherit from CView !

[0099] constructor(hParent) {

[0100] let option = {

[0101] aParent: hParent,

[0102] aNodeID: 'mainFrm',

[0103] aChildViews: [CSubView1, CSubView2], / / Defines the next-level page to be mounted to this CMainFrm node.

[0104] };

[0105] _this.init(option);

[0106] }

[0107] / / Mounted to the root node of the app object

[0108] theApp.attachMainFrm(CMainFrm);

[0109] Step 3: Initialize each subpage and plugin / component, and attach them to its parent object node. Simply inherit and derive each subpage view class from CView, connect its own page resources to the inherited subpage view class, import DOM callback functions, a list of sub-view classes, custom events and response functions, and necessary data definitions. Subsequent steps will be automatically initialized by the framework and attached to its own parent object node.

[0110] Sample code:

[0111] / / Define the CSubView1 class by inheriting from CView

[0112] import HTMLTemplate from '. / CSubView1.HTML'; / / Import your own HTML

[0113] import '. / CSubView1.css'; / / Import your own CSS

[0114] class CSubView1 extends CView{

[0115] constructor(hParent){

[0116] var _this = this;

[0117] _this.Data = {}

[0118] let option = {

[0119] aParent: hParent,

[0120] aNodeID: 'subView',

[0121] aHTML: HTMLTemplate, / / Mount your own HTML

[0122] aRegCtrlCallBack: this.regCtrlCb, / / Define the DOM callback table

[0123] aRenderData: _this.Data,

[0124] aChildViews: [CSubPage1, CSubPage2,…], / / Defines the next-level page, which will be mounted to this object node.

[0125] aEvCallback: {}, / / Defines a custom event and callback function

[0126] };

[0127] this.init(option);

[0128] }

[0129] Step 4: After all page resources and processing functions have been loaded and registered, the build is complete, and the system enters a state of waiting for user response.

[0130] The entire construction process can be completed in just the four steps mentioned above.

Claims

1. An apparatus for constructing a web front-end application based on object technology, characterized in that, include: The main application base class is used to create objects of the main application class of the front-end application, and to manage the global data and main page view of the front-end application. The base class for page views, used to derive view classes and the main page view, manages the page's HTML and CSS resources, DOM event responses defined on the page, as well as page-related data and custom events; A base storage class, used to derive storage classes, derive global data, and organize and manage private and public data; The base class for events is used to derive event classes, manage event registration, triggering, and event handling functions. A base class for loading and packaging tools, used to derive loading and packaging tool classes as well as the final compilation and distribution of the front-end application files; The main application class object of the front-end application is created through the main application base class, and a hierarchical nested object tree including various page objects is established with the main application class object as the root node. Each page object is created by a page view class that inherits from the page view base class. Each page view class manages the HTML, CSS resources, DOM, related data, and page-related events required by the page. The operation of the related data is completed through the page-derived storage class that inherits from the storage base class. At the same time, the handling of page-related events is completed through the page-derived event class that inherits from the event base class. The various files of the front-end application are finally compiled and published through the loading and packaging tool base class.

2. The apparatus for building web front-end applications based on object technology according to claim 1, characterized in that, The operations of the main application base class in the front-end application include: creating the main application object of the front-end application and using it as the root node of the page object tree; triggering the creation of each subordinate page object; creating and managing a nested object tree containing all page and component objects; managing the global data of the front-end application; and creating and managing application-level events and their response functions.

3. The apparatus for building web front-end applications based on object technology according to claim 2, characterized in that, The main application base class also includes internal member functions for traversing, filtering, and enabling each object node in the object tree.

4. The apparatus for building web front-end applications based on object technology according to claim 1, characterized in that, The operations of the page view base class in the front-end application include: It provides sequential loading of HTML and CSS resources and registration of DOM event response functions; Load and manage the page's DOM, and register and manage DOM-related callback functions; Manages the definition and loading order of the page's child pages and child components; Manage the registration of events related to the page and trigger responses to registered events.

5. The apparatus for building web front-end applications based on object technology according to claim 1, characterized in that, The page view base class uses a storage class to handle page-related business data.

6. The apparatus for building web front-end applications based on object technology according to claim 1, characterized in that, The operations of the storage base class in the front-end application include: Provide functions to perform access to and control of the aforementioned private and public data; Provides functions to enable data binding to the DOM and rendering operations.

7. The apparatus for building web front-end applications based on object technology according to claim 1, characterized in that, The operations of the event base class in the front-end application include: The main application base class and the page view base class call the event class to provide customized capabilities for event registration, triggering, and corresponding processing functions at different lifecycles at the application and page levels; Manage the registration, triggering, and handling functions of events related to applications, pages, components, and plugins.

8. The apparatus for building web front-end applications based on object technology according to claim 1, characterized in that, The operations of the loading and packaging tool base class in the front-end application include: Manage the loading, combination, encryption, and packaging of all source files of the main application base class, page view base class, storage base class, event base class, and their derived classes; Use system tools to compile the complete debug and release versions of the front-end application; Provides common functions for log printing, format conversion, and asynchronous response.

9. A method for building a web front-end application based on object technology, comprising the main application class, view class, storage class, event class, and loading and packaging utility class as described in any one of claims 1 to 8, characterized in that the steps... include: Step 1: Initialize the main application class object, including the following sub-steps: Step 11: Instantiate the main application class; Step 12: Create the root node of the front-end application object tree; Step 13: Trigger the instantiation of the main page view; Step 2, initialize the main page view, including the following sub-steps: Step 21: Derive the homepage view class from the page view base class; Step 22: Implement the necessary storage classes and event classes for the homepage view class; Step 23: Define a list of the next-level subpage view classes to which the homepage view class belongs; Step 24: Instantiate the homepage view class; Step 25: Mount the instantiated object of the homepage view class to the root node; Step 26: Trigger the instantiation of the next-level subpage view class; Step 3: Initialize each subpage view, including the following sub-steps: Step 31: The parent view class drives the instantiation of each subpage view class according to the list of next-level subpage view classes described in step 23; Step 32: The resource loading function of the page view base class is automatically called and the resources related to the child page view class are loaded; Step 33: Check that the child page DOM is ready to load and register callback handling functions; Step 34: Load the data inside the subpage; Step 35: Register subpage events; Step four: The front-end application build is complete. Wait for the response operation, which includes the following sub-steps: Step 41: All DOM callback functions are in the callback response state, waiting for a response to user actions; Step 42: All registered events are in a callback response state, waiting for response events.

Images