CN115857935A - Front-end development method and device independent of framework - Google Patents

Front-end development method and device independent of framework Download PDF

Info

Publication number
CN115857935A
CN115857935A CN202310113948.7A CN202310113948A CN115857935A CN 115857935 A CN115857935 A CN 115857935A CN 202310113948 A CN202310113948 A CN 202310113948A CN 115857935 A CN115857935 A CN 115857935A
Authority
CN
China
Prior art keywords
module
view
application module
business service
framework
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
Application number
CN202310113948.7A
Other languages
Chinese (zh)
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.)
Beijing Vhall Time Technology Co ltd
Original Assignee
Beijing Vhall Time Technology 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 Beijing Vhall Time Technology Co ltd filed Critical Beijing Vhall Time Technology Co ltd
Priority to CN202310113948.7A priority Critical patent/CN115857935A/en
Publication of CN115857935A publication Critical patent/CN115857935A/en
Pending legal-status Critical Current

Links

Images

Landscapes

  • Stored Programmes (AREA)

Abstract

The application relates to a front-end development method and a device independent of a framework, wherein the front-end development method comprises the following steps: encapsulating one or more business service modules in a class type form in a native JavaScript language, wherein each business service module comprises a corresponding API (application programming interface); registering the corresponding business service module to the terminal application module through the selected API; and calling the corresponding business service module through the terminal application module. The front-end development method and device independent of the framework can be separated from the specific framework for logic multiplexing in the front-end development, the same logic does not need to be repeatedly written, and the efficiency of the front-end development is improved.

Description

Front-end development method and device independent of framework
Technical Field
The present application relates to the field of front-end development, and in particular, to a method and an apparatus for front-end development independent of a framework.
Background
At present, logic multiplexing in front-end development depends on a specific front-end development framework, and the following two modes are mainly adopted: the React Hooks method and the Vue3 Composition API method.
The React Hooks method relies on a React frame and provides a means for dividing and treating states and state changing methods. The reach Hooks method extracts state logic from the component so that the logic can be tested and multiplexed separately and the state logic multiplexed without modifying the component structure.
The Vue3 Composition API method relies on a Vue3 framework, codes are organized according to logic functions, all APIs defined by one logic function are put together, and when logic multiplexing is carried out, specific functions are positioned, and all the APIs used can be positioned.
In the two methods for realizing the service logic multiplexing in the front-end opening method, the service logic multiplexing can be only carried out in the same frame in the application process, and the multiplexing logic is organized by highly depending on the characteristics of the frame.
In the prior art, because business logic is difficult to separate from a framework for multiplexing in front-end development, the same business logic needs to be written repeatedly during the front-end development, thereby causing the problems of resource waste and low efficiency.
Disclosure of Invention
Aiming at the problems in the prior art, the application provides a front-end development method and a front-end development device which are independent of a framework. The scheme of the application independently packs the service logic irrelevant to the framework, and can be combined with any semi-open front-end framework to realize service logic multiplexing.
According to a first aspect of the present application, a framework-independent front-end development method is presented, comprising:
one or more business service modules are packaged in a class type form in a native JavaScript language, and each business service module or each business service module comprises a corresponding API (application program interface); registering the corresponding business service module to the terminal application module through the selected API;
and calling the corresponding business service module through the terminal application module.
In some embodiments, the framework-independent front-end development method further comprises:
packaging the business service modules into a software package set;
and generating an API interface list of the software package set, wherein the API interface list comprises API interface information.
In some embodiments, registering the corresponding business service module with the terminal application module through the selected API interface includes:
and selecting the corresponding API interface according to the API interface information.
In some embodiments, the business service module includes a business state and a business method.
In some embodiments, the terminal application modules include a logic application module and a view application module.
In some embodiments, in a case that the terminal application module is a view application module, invoking, by the terminal application module, the corresponding service module includes:
displaying the service state of the corresponding service module in the view of the view application module;
and calling the business method of the corresponding business service module in the view.
In some embodiments, the view application modules include a Vue2 framework based view application module, a Vue3 framework based view application module, and a fact framework based view application module.
In some embodiments, in the case that the view application module is a view application module based on the Vue2 framework, displaying the business state of the corresponding business service module in the view of the view application module includes:
and binding the service state of the corresponding service module with the view data of the Vue2 framework.
In some embodiments, in the case that the view application module is a view application module based on the Vue3 framework, displaying the business state of the corresponding business service module in the view of the view application module includes:
and performing reactive function packing and overwriting on the service state of the corresponding service module.
According to a second aspect of the present application, there is provided a framework-independent front-end development apparatus, comprising:
the service encapsulation unit is used for encapsulating one or more service modules in a class type form in a native JavaScript language, and each of the one or more service modules comprises a corresponding API (application programming interface);
the registration unit is used for registering the corresponding business service module to the terminal application module through the selected API;
and the application unit is used for calling the corresponding business service module through the terminal application module.
According to a third aspect of the present application, an electronic device is proposed, comprising a memory, a processor and a computer program stored on the memory and executable on the processor, the processor implementing the method according to the first aspect when executing the computer program.
According to a fourth aspect of the present application, there is provided a non-transitory computer storage medium storing a computer program which, when executed by a plurality of processors, causes the processors to perform the method according to the first aspect.
The front-end development scheme independent of the framework can be separated from the limitation of the framework and can be freely combined with various front-end frameworks, and meanwhile, specific UI is separated to carry out uniform packaging maintenance on business logic, so that repeated writing of the business logic is avoided, and the front-end development efficiency is improved. In addition, aiming at the problems that interface interaction logics of all terminals in front-end development in the prior art are different, UI is packaged by traditional multiplexing, service logics and the UI are coupled too deeply, and personalized multiplexing is not suitable, after the UI logics and non-UI logics are decoupled and hierarchically divided, the application of the UI interaction logics can be freely accessed into the non-UI logics and the relationship between the non-UI logics can be organized in a personalized mode, and meanwhile parallel development and maintenance of the UI logics and the non-UI service logics can be achieved.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the description of the embodiments are briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without exceeding the protection scope of the present application.
Fig. 1 is a schematic overall framework diagram of a framework-independent front-end development method according to the present application.
FIG. 2 is a flow chart of the steps of a framework-independent front-end development method of the present application.
Fig. 3 is a schematic diagram of a front-end development apparatus independent of a framework according to the present application.
Fig. 4 is a block diagram of an electronic device provided in the present application.
Detailed description of the preferred embodiments
The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are some, but not all, embodiments of the present application. 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 application.
Fig. 1 is an overall framework diagram of a framework-independent front-end development method according to the present application.
As shown in fig. 1, one or more business service modules are first encapsulated in a form of class in a native JavaScript language, and each of the one or more business service modules includes a corresponding API interface. In some embodiments, the API interface may be a specifically named referencing method that may be used to reference specific functions in the business service module and be used in the view application module or other application logic.
And packaging the packaged business service modules into a software package set, wherein in some specific embodiments, the packaging process is completed through a front-end packaging tool.
In some embodiments, all the business service modules are loaded after the software package set is loaded through the browser network or the package management tool. The business service module is registered to different terminals through the API interface, and the API interface information included in the API interface list enables a specific business service module realizing the required function to be found during registration, so that the specific logic function of the business service module can be applied to different terminals.
In some embodiments, the service encapsulation unit encapsulates one or more service modules, encapsulates a plurality of service modules into a set of software packages, generates an API interface list, and registers the service modules to the terminal application unit through the API interface.
In some embodiments, the terminal application modules include a logic application module and a view application module. In some embodiments, the functions implemented by the logic application module do not require the presentation of a specific view, and the functions implemented by the logic application module include global parameter setting, permission acquisition, data maintenance, and the like. In some embodiments, the view application module includes functionality that requires rendering with a view.
In some embodiments, the view application modules include a view application module based on the Vue2 framework, a view application module based on the Vue3 framework, and a view application module based on the fact framework. In some embodiments, for different types of view application modules, the manner of displaying the business state of the corresponding business service module in the view of the view application module is different.
FIG. 2 is a flow chart of the steps of a framework-independent front-end development method of the present application.
Step S101, one or more business service modules are packaged in a class type form in a native JavaScript language, and each business service module or business service module comprises a corresponding API interface.
In some embodiments, the API interface may be a specifically named referencing method that may be used to reference specific functions in the business service module and be used in the view application module or other application logic. In some embodiments, the business service module includes a business state and a business method, wherein the business state includes a variable value defined in implementing the function, and the business method includes a method of changing the business state.
And step S102, registering the corresponding business service module to the terminal application module through the selected API.
In some embodiments, the terminal application modules include a logic application module and a view application module. The functions implemented by the logic application module do not require the presentation of a specific view, and in some specific embodiments, the functions implemented by the logic application module include global parameter setting, permission acquisition, data maintenance, and the like. In some embodiments, the view application module includes functionality that requires rendering with a view.
In some embodiments, the view application modules include a view application module based on the Vue2 framework, a view application module based on the Vue3 framework, and a view application module based on the fact framework.
And step S103, calling the corresponding business service module through the terminal application module.
In some embodiments, the terminal application module is a view application module based on the Vue2 framework. And after calling the corresponding useXXXXServer method to take out the corresponding business service module, binding the business state of the business service module with the view data of the Vue2 framework. In some specific embodiments, the service module may be a chat logic module, an API interface corresponding to the module is a useChatService method, and the specific implementation statement of the binding is this. $ data. Through this statement, the business state in the business service module can be displayed on the view. And then calling the business method on the view to drive the logic, wherein in some specific embodiments, the specific implementation statement for calling the business method may be this.
In some specific embodiments, the terminal application module is a view application module based on a Vue3 framework, and after calling a corresponding useXXXXService method to fetch a corresponding service module, the service state of the view application module is subjected to reactive function wrapping and overwriting. In some embodiments, the service module may be a chat logic module, an API interface corresponding to the module is a usechastaservice method, and a specific implementation statement overwritten by a reactive function wrapper is chat service. Then, the business method is called on the view to drive the logic, and in some specific embodiments, the specific implementation statement for calling the business method is chatservice.
In some embodiments, the terminal application module is a view application module based on a fact frame, and the service method is directly called according to the change of the service state, and the calling of the service method may be calling of a setState method in the fact frame.
And step S104, packaging the business service modules into a software package set.
Step S105, generating an API interface list of the software package set, wherein the API interface list comprises API interface information.
In some embodiments, the packaging process is accomplished by a front-end packaging tool. In some embodiments, after the software package set is packaged, an API interface list is generated, where the API interface list includes a plurality of usexxxservice methods, and the usexxxservice methods correspond to the service modules one to one. And the corresponding business service module can be taken out and used by calling the corresponding useXXXXServer method. For the native javascript environment without a framework, the usexxxxscript can be used without an additional reference.
In some embodiments, the service module may be a chat logic module, and an API interface corresponding to the module is a usechattservice method. The service method and the service state inside the chat logic module can be used through the usechathservice method.
Fig. 3 is a schematic diagram of a front-end development apparatus independent of a frame according to the present application.
The service encapsulation unit is used for encapsulating one or more business service modules in a class type form in a native JavaScript language, and each of the one or more business service modules comprises a corresponding API interface.
In some embodiments, the API interface may be a specifically named referencing method that may be used to reference specific functions in the business service module and be used in the view application module or other application logic. In some embodiments, the business service module includes a business state and a business method, wherein the business state includes a variable value defined in implementing the function, and the business method includes a method of changing the business state.
And the registering unit is used for registering the corresponding business service module to the terminal application module through the selected API interface.
In some embodiments, the terminal application modules include a logic application module and a view application module. The functions implemented by the logic application module do not require the presentation of a specific view, and in some specific embodiments, the functions implemented by the logic application module include global parameter setting, permission acquisition, data maintenance, and the like. In some embodiments, the view application module includes functionality that requires rendering with a view.
And the application unit is used for calling the corresponding business service module through the terminal application module.
In some embodiments, the terminal application module is a view application module based on the Vue2 framework. And after calling the corresponding useXXXXServer method to take out the corresponding business service module, binding the business state of the business service module with the view data of the Vue2 framework. In some specific embodiments, the service module may be a chat logic module, an API interface corresponding to the module is a useChatService method, and the specific implementation statement of the binding is this. $ data. Through this statement, the business state in the business service module can be displayed on the view. And then calling the business method on the view to drive the logic, wherein in some specific embodiments, the specific implementation statement for calling the business method may be this.
In some specific embodiments, the terminal application module is a view application module based on a Vue3 framework, and after calling a corresponding useXXXXService method to fetch a corresponding service module, the service state of the service module is subjected to reactive function packing and overwriting. In some embodiments, the service module may be a chat logic module, an API interface corresponding to the module is a usechastaservice method, and a specific implementation statement overwritten by a reactive function wrapper is chat service. Then, a business method is called on the view to drive the logic, and in some specific embodiments, a specific implementation statement for calling the business method is chatservice.
In some embodiments, the terminal application module is a view application module based on a fact frame, and the service method is directly called according to the change of the service state, and the calling of the service method may be calling of a setState method in the fact frame.
In some embodiments, the process of developing a simple single-person to single-person chat service at different terminals using a framework-independent front-end development approach includes:
firstly, a chat data service module and a user identity recognition service module are packaged in a class type form in a native JavaScript language, and each of the two service modules comprises a corresponding API interface. The API interface is named as a chatting data method and a user identity identification method, and the specific function in the business service module can be referred by using the reference method. And packaging the packaged chatting data service module and the user identity recognition service module into a software package set.
After the software package set is loaded through the browser network, two business service modules are loaded. The business service module is registered to different terminals by a chat data method and a user identity identification method, and the API interface information included in the method enables a specific business service module realizing the required function to be found during registration, so that the specific logic function of the business service module can be applied to different terminals.
The user identity recognition service module is a logic application module and does not need view presentation. And respectively and directly calling the service method of the user identity recognition service module at the terminal A and the terminal B.
The chat data service module is a view application module and needs to present views. In some specific embodiments, the terminal application module is a terminal a, the chat data service module is a view application module based on a Vue2 framework, and the service method of the chat data service module is invoked after the service state of the chat data service module is bound with the view data of the Vue2 framework. In some embodiments, the terminal application module is a terminal B, the chat data service module is a view application module based on a Vue3 framework, and the service method of the chat data service module is called after the service state of the chat data service module is subjected to reactive function packing and overwriting.
In the foregoing embodiments, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.
Referring to fig. 4, fig. 4 provides an electronic device including a processor and a memory. The memory stores computer instructions which, when executed by the processor, cause the processor to execute the computer instructions to implement the method and refinement scheme as shown in figure 2.
It should be understood that the above-described device embodiments are merely exemplary, and that the devices disclosed herein may be implemented in other ways. For example, the division of the units/modules in the above embodiments is only one logical function division, and there may be another division manner in actual implementation. For example, multiple units, modules, or components may be combined, or may be integrated into another system, or some features may be omitted, or not implemented.
In addition, unless otherwise specified, each functional unit/module in each embodiment of the present invention may be integrated into one unit/module, each unit/module may exist alone physically, or two or more units/modules may be integrated together. The integrated units/modules may be implemented in the form of hardware or software program modules.
If the integrated unit/module is implemented in hardware, the hardware may be digital circuits, analog circuits, etc. Physical implementations of hardware structures include, but are not limited to, transistors, memristors, and the like. The processor or chip may be any suitable hardware processor, such as a CPU, GPU, FPGA, DSP, ASIC, etc., unless otherwise specified. The on-chip cache, the off-chip Memory, and the Memory may be any suitable magnetic storage medium or magneto-optical storage medium, such as Resistive Random Access Memory (RRAM), dynamic Random Access Memory (DRAM), static Random Access Memory (SRAM), enhanced Dynamic Random Access Memory (EDRAM), high-Bandwidth Memory (HBM), hybrid Memory Cubic (HMC), or the like, unless otherwise specified.
The integrated units/modules, if implemented in the form of software program modules and sold or used as a stand-alone product, may be stored in a computer readable memory. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a memory and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present disclosure. And the aforementioned memory comprises: a U-disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a removable hard disk, a magnetic or optical disk, and other various media capable of storing program codes.
Embodiments of the present application also provide a non-transitory computer storage medium storing a computer program, which when executed by a plurality of processors causes the processors to perform the method and refinement scheme as shown in fig. 2.
The foregoing detailed description of the embodiments of the present application has been presented to illustrate the principles and implementations of the present application, and the description of the embodiments is only intended to facilitate the understanding of the methods and their core concepts of the present application. Meanwhile, a person skilled in the art should, according to the idea of the present application, change or modify the embodiments and applications of the present application based on the scope of the present application. In view of the above, the description should not be taken as limiting the application.

Claims (12)

1. A framework-independent front-end development method, comprising:
encapsulating one or more business service modules in a class type form in a native JavaScript language, wherein each business service module comprises a corresponding API (application programming interface);
registering the corresponding business service module to the terminal application module through the selected API;
and calling the corresponding business service module through the terminal application module.
2. The method of claim 1, further comprising:
packaging the business service modules into a software package set;
generating an API interface list of the software package set, the API interface list including API interface information.
3. The method of claim 2, wherein registering the corresponding business service module with the terminal application module through the selected API interface comprises:
and selecting the API interface according to the API interface information.
4. The method of claim 1, wherein the business service module comprises a business state and a business method.
5. The method of claim 4, wherein the terminal application modules comprise a logical application module and a view application module.
6. The method of claim 5, wherein in case that the terminal application module is the view application module, the invoking the corresponding business service module by the terminal application module comprises:
displaying the business state of the corresponding business service module in the view of the view application module;
and calling the business method of the corresponding business service module in the view.
7. The method of claim 6, wherein the view application modules comprise a view application module based on a Vue2 framework, a view application module based on a Vue3 framework, and a view application module based on a read framework.
8. The method of claim 7, wherein in the case that the view application module is the Vue2 framework-based view application module, the displaying the business state of the corresponding business service module in the view of the view application module comprises:
and binding the service state of the corresponding service module with the view data of the Vue2 framework.
9. The method of claim 7, wherein in case that the view application module is the Vue3 framework-based view application module, the displaying the business state of the corresponding business service module in the view of the view application module comprises:
and performing reactive function packing and overwriting on the service state of the corresponding service module.
10. A framework-independent front-end development apparatus, comprising:
the service encapsulation unit is used for encapsulating one or more business service modules in a class type form in a native JavaScript language, and each business service module or business service modules comprises a corresponding API (application programming interface);
the registration unit registers the corresponding business service module to the terminal application module through the selected API;
and the application unit is used for calling the corresponding business service module through the terminal application module.
11. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, the processor implementing the method of any of claims 1-9 when executing the computer program.
12. A computer-readable storage medium, characterized in that it stores a computer program for electronic data exchange, wherein the computer program causes a computer to perform the method according to any one of claims 1-9.
CN202310113948.7A 2023-02-15 2023-02-15 Front-end development method and device independent of framework Pending CN115857935A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310113948.7A CN115857935A (en) 2023-02-15 2023-02-15 Front-end development method and device independent of framework

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310113948.7A CN115857935A (en) 2023-02-15 2023-02-15 Front-end development method and device independent of framework

Publications (1)

Publication Number Publication Date
CN115857935A true CN115857935A (en) 2023-03-28

Family

ID=85658034

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310113948.7A Pending CN115857935A (en) 2023-02-15 2023-02-15 Front-end development method and device independent of framework

Country Status (1)

Country Link
CN (1) CN115857935A (en)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108958714A (en) * 2018-07-02 2018-12-07 平安科技(深圳)有限公司 Service Component formula development approach, device, computer equipment and storage medium
CN112653618A (en) * 2020-12-07 2021-04-13 深圳市远行科技股份有限公司 Gateway registration method and device of micro-service application API endpoint
CN114679491A (en) * 2020-12-24 2022-06-28 京东科技控股股份有限公司 Micro front-end service application method and device, storage medium and electronic equipment

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108958714A (en) * 2018-07-02 2018-12-07 平安科技(深圳)有限公司 Service Component formula development approach, device, computer equipment and storage medium
CN112653618A (en) * 2020-12-07 2021-04-13 深圳市远行科技股份有限公司 Gateway registration method and device of micro-service application API endpoint
CN114679491A (en) * 2020-12-24 2022-06-28 京东科技控股股份有限公司 Micro front-end service application method and device, storage medium and electronic equipment

Similar Documents

Publication Publication Date Title
US8996714B2 (en) State-dependent entity based implementation of a service oriented architected application
CN108572965A (en) A kind of resource loading method and device
CN110580174B (en) Application component generation method, server and terminal
CN110175201A (en) Business data processing method, system, device and electronic equipment
CN102193806B (en) Upgrade the method and apparatus of animation
CN113885935A (en) Resource packaging method and device, electronic equipment and computer readable storage medium
CN110083625A (en) Realtime stream processing method, equipment, data processing equipment and medium
CN112346713A (en) Secondary packaging method and system of el-table based on Vue + Element-UI and electronic equipment
CN106648567B (en) Data acquisition method and device
CN113181657B (en) Cross-platform rendering method and device
CN112667305A (en) Page display method and device
CN111176628B (en) Front-end access method under modular architecture and storage medium
CN115857935A (en) Front-end development method and device independent of framework
CN112905263A (en) Loading method and device of custom component, electronic equipment and storage medium
CN116503529A (en) Rendering, 3D picture control method, electronic device, and computer-readable storage medium
CN112579212A (en) Cross-language calling method, calling party device and called party device
CN113835748B (en) Packaging method, system and readable medium for application program based on HTML5
CN108334317A (en) Graphics engine, graphics engine construction method, update method and device
CN112162793B (en) Method, storage medium, electronic device and system for separating structured view services
CN108563514A (en) Access method, application and the electronic equipment of application configuration service
CN114489645A (en) Form generation construction method, system and storage medium based on Vue and Element-UI
CN114237407A (en) Font icon processing method and device and computer readable storage medium
CN107402749A (en) Realize the method and device in picture loading storehouse
CN104317575B (en) The method for packing and device of the code file of air-conditioning device assembly
EP3507689B1 (en) Java card application package used as a library package

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: 20230328