Plug-in development method and device, terminal equipment and storage medium
By defining and managing plug-ins on the development side, supporting native JS and React development, and binding in enterprise-level applications, the problem of insufficient maintenance and personalized expansion capabilities of existing plug-in development products is solved, and flexibility and Improved security.
Patent Information
- Application Number
- CN202411043817.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-07-31
- Publication Date
- 2024-12-17
AI Technical Summary
Existing plug-in development products have shortcomings in maintenance and personalized scalability, and misunderstanding their potential in single-customer and enterprise-level applications, resulting in insufficient flexibility and generality.
By defining variable data on the development side and storing it in a preset location, the management side acquires and manages plug-ins, and sends them to the run side for preprocessing and running, it supports native JS and React development plug-ins to realize the personalized needs of plug-ins. Bond with enterprise level, adopts sandbox operation to ensure security.
Improves the flexibility and scalability of plug-in development, enhances maintainability, ensures the effective use of plug-ins in single customer and enterprise-level applications, and ensures security through sandbox operation.
Smart Images
Figure CN119149121A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of front-end development technology, and in particular to a plug-in development method, apparatus, terminal device, and storage medium. Background Art
[0002] Plug-in development is to encapsulate a certain function code into a plug-in module, which can be downloaded, activated, disabled or uninstalled through the configuration of the plug-in center. The main program can obtain new functions without restarting again, thus achieving rapid integration.
[0003] At present, most plug-in development products have their own software launch cycle and are not well maintainable. If you need to modify or add functions, you need to modify the code again and launch it. In addition, similar plug-in development products have low personalized expansion capabilities and use the Vue language for development, which is a single development language. At the same time, there is a misunderstanding about the business applicability of plug-in development, believing that it is only suitable for large-scale, general scenarios, while ignoring its potential in single customer and enterprise-level applications.
[0004] In summary, how to improve the flexibility, openness and universality of plug-in development to achieve innovation in similar products has become a key issue that needs to be urgently addressed in recent years. Summary of the invention
[0005] The main purpose of this application is to provide a plug-in development method, apparatus, terminal device and storage medium, aiming to solve the technical problem of how to improve the efficiency of plug-in development.
[0006] To achieve the above purpose, the present application proposes a plug-in development method, which is applied to the development end and includes: Define variable data in a pre-defined execution environment; Storing the variable data in a preset location; The plug-in is obtained by accessing the variable data at the preset position, and the plug-in is sent to the management end so that the management end can manage the plug-in at the slot corresponding to the plug-in.
[0007] In addition, to achieve the above purpose, the present application also proposes a plug-in development method, which is applied to the management end and includes: Obtaining a plug-in developed by a development end, wherein the plug-in is defined by the development end in a preset execution environment, storing the variable data in a preset location, and obtaining and sending the variable data in the preset location by accessing the variable data and sending it to the management end; Managing the plug-in on the slot corresponding to the plug-in; The plug-in at the slot position is sent to the operation end so that the operation end pre-processes and runs the plug-in.
[0008] In one embodiment, the step of managing the plug-in on the slot corresponding to the plug-in includes: Upload the plug-in to the corresponding slot position of the plug-in; Bind or unbind the plug-in at the slot position with the corresponding enterprise; When the plug-in at the slot position is successfully bound to the corresponding enterprise, the corresponding enterprise is enabled or disabled.
[0009] In addition, to achieve the above purpose, the present application also proposes a plug-in development method, which is applied to the running end and includes: Acquire a plug-in sent by the management end, wherein the plug-in is defined by the development end in a preset execution environment, stores the variable data in a preset location, and obtains and sends the variable data in the preset location to the management end by accessing the variable data; The plug-in is preprocessed and run.
[0010] In one embodiment, the step of obtaining the plug-in sent by the management end includes: Retrieve whether the plugin is obtained through the current page slot; If not obtained, send a request to the server to obtain the plug-in returned by the server; If it has been obtained, it is searched in the execution environment according to the page number and slot number to obtain the plug-in.
[0011] In one embodiment, the step of preprocessing and running the plug-in includes: According to the configuration information of the plug-in, the plug-in is matched in the plug-in center, and the plug-in that meets the preset status condition is screened out; Performing a validity check on the plug-in that meets the preset status condition; Run the plug-in and sandbox the plug-in that has passed the legality check.
[0012] In one embodiment, the step of performing a validity check on the plug-in that meets the preset status condition includes: Initialize a collection of array type variables; Traversing the plug-ins in the plug-in collection, and querying whether the configuration information of the plug-ins in the plug-in collection meets the preset configuration conditions; If the configuration information of the plug-in in the plug-in set meets the preset configuration condition, determining whether the configuration information of the plug-in exists in the array type variable set; If not, register the configuration information of the plug-in and the plug-in corresponding to the configuration information of the plug-in into the array type variable set.
[0013] In one embodiment, the step of executing the plug-in and sandboxing the plug-in that has passed the legality check includes: Load the plug-in data in the array type variable collection for retrieval and processing to obtain code data; According to the code data, sandbox operation is performed.
[0014] In one embodiment, the step of performing sandbox operation according to the code data includes: Convert code data into functions; Runs the function at the specified Document Object Model (DOM) location.
[0015] In addition, to achieve the above-mentioned purpose, the present application also proposes a plug-in development device, the plug-in development device includes a development end, a management end and an operation end, and the development end includes: Definition module, used to define variable data in a pre-set execution environment; A storage module, used for storing the variable data in a preset location; A sending module, used for obtaining a plug-in through the variable data at the corresponding position, and sending the plug-in to a management end, so that the management end can manage the plug-in at the slot corresponding to the plug-in; The management terminal includes: The acquisition module is used to acquire the plug-in developed by the development end. The plug-in is defined by the development end in a preset execution environment, and the variable data is stored in a preset location. The variable data in the preset location is obtained by accessing the variable data and sent to the management end. A management module, used for managing the plug-in on the slot corresponding to the plug-in; The sending module sends the plug-in at the slot position to the running end, so that the running end pre-processes and runs the plug-in; The operating end includes: An acquisition module is used to acquire a plug-in sent by the management end, wherein the plug-in is defined by the development end in a preset execution environment with variable data, the variable data is stored in a preset location, and the variable data in the preset location is obtained by accessing the variable data and sent to the management end; The running module pre-processes and runs the plug-in.
[0016] In addition, to achieve the above-mentioned purpose, the present application also proposes a plug-in development terminal device, which includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, and the computer program is configured to implement the steps of the plug-in development method described above.
[0017] In addition, to achieve the above-mentioned purpose, the present application also proposes a storage medium, which is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the plug-in development method described above are implemented.
[0018] The embodiment of the present application provides a plug-in development method, in which the development end defines variable data in a pre-set execution environment; the variable data is stored in a preset location; a plug-in is obtained by accessing the variable data in the preset location, and the plug-in is sent to the management end. The management end obtains the plug-in developed by the development end; the plug-in is managed in the slot corresponding to the plug-in; and the plug-in in the slot position is sent to the operation end. The operation end obtains the plug-in sent by the management end; and the plug-in is pre-processed and run. This solution improves the flexibility and extensibility of plug-in development by constructing the basic functions of the plug-in based on variable data and the design of different frameworks on the development end; the centralized control of the management end enhances the maintainability of plug-in development; and the sandbox execution environment ensures the security of plug-in development. BRIEF DESCRIPTION OF THE DRAWINGS
[0019] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.
[0020] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.
[0021] Figure 1 A flowchart of the first embodiment of the plug-in development method of this application is provided; Figure 2 A flow chart of the second embodiment of the plug-in development method of this application; Figure 3 A flowchart of the third embodiment of the plug-in development method of this application is provided; Figure 4 A schematic diagram of the process of data sharing and isolation involved in the plug-in development method embodiment of the present application; Figure 5A system framework diagram involved in the embodiment of the plug-in development method of this application; Figure 6 A component property relationship diagram involved in the plug-in development method embodiment of this application; Figure 7 This is a schematic diagram of the module structure of the plug-in development device of the embodiment of the present application; Figure 8 Schematic diagram of the device structure of the hardware operating environment involved in the plug-in development method in the embodiment of the present application.
[0022] The purpose, features and advantages of this application will be further described in conjunction with the embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION
[0023] It should be understood that the specific embodiments described herein are only used to explain the technical solutions of the present application and are not used to limit the present application.
[0024] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.
[0025] The main solution of the embodiment of the present application is: define variable data in a preset execution environment by the development end; store the variable data in a preset position; obtain a plug-in by accessing the variable data in the preset position, and send the plug-in to the management end, so that the management end can manage the plug-in on the slot corresponding to the plug-in. Obtain the plug-in developed by the development end through the management end, the plug-in is defined by the development end in a preset execution environment, the variable data is stored in a preset position, and obtained and sent to the management end by accessing the variable data in the preset position; manage the plug-in on the slot corresponding to the plug-in; and send the plug-in at the slot position to the operation end, so that the operation end can pre-process and run the plug-in. Obtain the plug-in sent by the management end through the operation end, the plug-in is defined by the development end in a preset execution environment, the variable data is stored in a preset position, and obtained and sent to the management end by accessing the variable data in the preset position; pre-process and run the plug-in.
[0026] Due to the existing technology, most plug-in development products have their own software launch cycle and are not well maintainable. If you need to modify or add functions, you need to modify the code again and launch it. In addition, similar plug-in development products have low personalized expansion capabilities and use the Vue language for development, which is a single development language. At the same time, there is a misunderstanding about the business applicability of plug-in development, believing that it is only suitable for large-scale, general scenarios, while ignoring its potential in single customer and enterprise-level applications.
[0027] The present application provides a solution, which realizes personalized needs and adapts to complex function development by supporting native JS language and react development plug-in on the original system; manages the developed plug-in, including but not limited to binding or unbinding the plug-in with the corresponding enterprise to control the activation or deactivation of the enterprise page, so that plug-in development can be used on a single customer and enterprise; through plug-in running and sandbox running, it is ensured that the plug-in data can run accurately, safely and isolated from each other on the current page.
[0028] It should be noted that the execution subject of this embodiment can be a computing service device with data processing, network communication and program running functions, such as a tablet computer, a personal computer, a mobile phone, etc., or an electronic device capable of realizing the above functions, etc. The following takes a personal computer as an example to illustrate this embodiment and the following embodiments.
[0029] Based on this, the embodiment of the present application provides a plug-in development method, which is applied to the development end, referring to Figure 1 , Figure 1 This is a flow chart of the first embodiment of the plug-in development method of this application.
[0030] In this embodiment, the plug-in development method includes steps S10 to S30: Step S10, defining variable data in a pre-set execution environment; It should be noted that in this embodiment, native JS (JavaScript) language and React are supported for co-development of plug-ins. Among them, native JS development has a low threshold, flexible development, and is suitable for simple function development. React plug-in development is suitable for complex function development, and provides third-party libraries for use, which is convenient for development.
[0031] In addition, it should be noted that React is a JavaScript library for building user interfaces. It is designed to solve the problems of efficient updating and rendering of dynamic web pages and single-page applications (SPA).
[0032] Specifically, when the page policy uses native JS language and React to develop plug-ins, it is necessary to first customize the variable data in the set execution environment.
[0033] If you use native JS language to develop plug-ins, you can directly use the variable data provided by the plug-in system in the execution environment. The plug-in system provides a set of standard APIs (Application Programming Interface) that can call variable data in PluginM in the execution environment. PluginM refers to the common methods provided by the original plug-in system for plug-in use, such as export, sorting, etc.
[0034] If you use React for plug-in development, in addition to calling variable data in the execution environment PluginM through standard APIs like native JS language plug-ins, you can also implement hooks through the development framework provided by itself, such as monitoring data changes in the plug-in system, and monitoring data changes shared by the plug-in system in the plug-in.
[0035] Step S20, storing the variable data in a preset location; After customizing the variable data, these variable data can be stored in the preset location for display. In this embodiment, the preset location includes the dom (document_node) node. The document_node refers to the location where the code block or plug-in runs and is displayed on the page. From the code level, document_node refers to the page node information of the specific location of the slot.
[0036] If you use native JS language to develop plug-ins, after defining the variable data, you need to register the variable data to the document_node node, and then it can be displayed on the plug-in system.
[0037] Similarly, if you use React to develop plug-ins, after defining the variable data, you need to register the variable data to the document_node node, and then it can be displayed on the plug-in system.
[0038] Step S30, obtaining a plug-in by accessing the variable data at the preset position, and sending the plug-in to the management end, so that the management end can manage the plug-in in the slot corresponding to the plug-in.
[0039] Once the variable data is stored in the preset location, the plug-in can obtain the plug-in containing these variable data by accessing the pre-defined variable data on the DOM node of the plug-in system.
[0040] It should be noted that when using React for plug-in development, once the variable data is stored in the preset location, you can use the yarn start command to edit, run and debug the variable data, and use the yarn build command to package the processed variable data, and then upload the registered plug-in to obtain the plug-in containing these variable data.
[0041] When the plug-in containing the variable data is obtained, it is sent to the management end so that it can manage the plug-in.
[0042] Through the above-mentioned embodiment method, native JS language and React development plug-in are provided to ensure that the scalability of the original plug-in system is increased without affecting the safe and stable operation of the native plug-in system, to meet personalized needs, to be suitable for the development of different functions, and to improve the convenience of development.
[0043] Based on this, the embodiment of the present application provides a plug-in development method, which is applied to the management end, referring to Figure 2 , Figure 2 This is a flow chart of the second embodiment of the plug-in development method of the present application.
[0044] In this embodiment, the plug-in development method includes steps S40 to S60: Step S40, obtaining a plug-in developed by the development end, wherein the plug-in is defined by the development end in a preset execution environment, the variable data is stored in a preset location, and the variable data in the preset location is obtained by accessing and sent to the management end; It should be noted that, in this embodiment, the plug-in is defined by the development end in a pre-set execution environment, the variable data is stored in a preset location, and the variable data at the preset location is obtained and sent to the management end by accessing the variable data.
[0045] The management end can receive plug-ins uploaded by the development end through an API interface, a version control system (such as Git) pull request, or a dedicated upload channel.
[0046] Step S50, managing the plug-in in the slot corresponding to the plug-in; It should be noted that the plug-in includes the plug-in name, the terminal to which it belongs (PC | mobile), the applicable level (native JS | react), the page number (unique page identifier), and the slot edit (the location identifier where the plug-in code block is displayed when it is running).
[0047] In addition, it should be noted that the slot includes a slot number, a slot type, and a code block.
[0048] In a feasible implementation, step S50 may include steps S51 to S53: Step S51, uploading the plug-in to the corresponding slot position of the plug-in; It should be noted that plugins and slots have a many-to-many relationship: 1. One plug-in for multiple slots: When a plug-in is added, it can realize multiple functions, such as query and export. These functions need to correspond to multiple slot positions respectively.
[0049] 2. One slot for multiple plugins: Multiple plugins can modify the same slot at the same time. Note: When running, the plugin that is first registered to this slot will be run.
[0050] When a new plug-in is added on the management side, the basic information of the new plug-in is defined, including the plug-in name, version, type (native JS, plug-in), applicable scope (mobile terminal, PC terminal), and remarks on the basic information.
[0051] Click the development button of the newly added plug-in to develop project code that can implement the preset functions. Among them, one plug-in supports the development of multiple functions at the same time and can run them at the same time.
[0052] After the project code is developed, based on the relationship between the plug-in and the slot, find the corresponding slot in the plug-in and upload the developed project code to the corresponding slot position.
[0053] Step S52, binding or unbinding the plug-in at the slot position with the corresponding enterprise; Once the plug-in has developed the project code, it can be associated with a specific enterprise account or environment. This means that the plug-in's functions are only visible and usable by that enterprise, ensuring that only authorized enterprises can access and use specific plug-ins.
[0054] Or the plug-in can be unbound from a specific enterprise's account or environment so that the enterprise can no longer use the plug-in by removing the association. This mechanism is conducive to achieving personalized services and permission control.
[0055] Step S53, when the plug-in at the slot position is successfully bound to the corresponding enterprise, the corresponding enterprise is enabled or disabled.
[0056] It should be noted that there is a many-to-many relationship between enterprises and plug-ins: 1. One plug-in for multiple enterprises: The same plug-in can be bound to multiple enterprises.
[0057] 2. One enterprise to multiple plug-ins: An enterprise can bind multiple plug-ins at the same time. After binding multiple plug-ins, the enterprise can control the enable and disable status.
[0058] When a plug-in is successfully bound to an enterprise, the plug-in system allows administrators to enable or disable this binding relationship based on the relationship between the plug-in and the enterprise. Enabling means that the system provides the enterprise with the functions of the plug-in; disabling means that the system prohibits enterprise users from accessing or using the plug-in, even if the plug-in is still in the slot. Similarly, the enterprise can also enable the functions of the plug-in or stop starting the functions of the plug-in.
[0059] Step S60, the plug-in at the slot position is sent to the operation end, so that the operation end pre-processes and runs the plug-in.
[0060] Through the above-mentioned embodiment method, by uploading the plug-in to the corresponding slot, the orderly operation of the plug-in in the system is ensured, conflicts are avoided, and later maintenance and upgrades are facilitated; by binding or unbinding the plug-in with the enterprise, the purpose of plug-in development in the business usage dimension is achieved, and both a single customer and an enterprise can use the plug-in function.
[0061] Based on this, the embodiment of the present application provides a plug-in development method, which is applied to the running end, referring to Figure 3 , Figure 3 This is a flow chart of the third embodiment of the plug-in development method of the present application.
[0062] In this embodiment, the plug-in development method includes steps S70 to S80: Step S70, obtaining the plug-in sent by the management end, wherein the plug-in is defined by the development end in a preset execution environment, the variable data is stored in a preset location, and the variable data in the preset location is obtained by accessing and sent to the management end; In this embodiment, multiple plug-ins are obtained from the management end by remote acquisition.
[0063] In a feasible implementation, step S70 may include steps S71 to S73: Step S71, searching through the current page slot to see if the plug-in has been acquired; It should be noted that the current page slot refers to one or more areas defined in a page template that are intended to be filled by plug-ins.
[0064] In addition, it should be noted that in this embodiment, the plug-in is defined by the development end in a pre-set execution environment, the variable data is stored in a preset location, and the variable data is obtained and sent to the management end by accessing the variable data at the preset location, and is obtained from the management end by the running end through remote acquisition.
[0065] Specifically, when the plugin system renders a page, the plugins are activated and query the data they need. Once the plugin obtains the required plugin data, it "injects" its content into the corresponding page slot. <x-slot>and through the page slot <x-slot>Retrieve whether the plugin data has been fetched.
[0066] Step S72: If the plug-in has not been obtained, a plug-in obtaining request is sent to the server to obtain the plug-in returned by the server; If the page slot retrieves that the plug-in data is not obtained, a request for obtaining the plug-in data can be sent to the server backend. The server backend will return the corresponding plug-in data based on the request, so that the running end can perform data preprocessing, plug-in running, sandbox running and other operations based on these corresponding plug-in data.
[0067] Step S73: If it has been obtained, search in the execution environment according to the page number and the slot number to obtain the plug-in.
[0068] If a page slot is retrieved and plugin data has been fetched, the plugin system creates a unique identifier based on the page number and the slot number of the slot that needs to be filled with content. The combination of these two numbers helps the system identify exactly which slot is on which page.
[0069] Use the page number and slot number to find the corresponding plug-in in the pre-set execution environment. The execution environment refers to an object in the global or module scope, such as window.plugins, which stores all registered plug-in information and its configuration.
[0070] Once a plugin configuration matching the identifier is found in the plugins parameter, the plugin system will further load the corresponding plugin code based on the configuration information.
[0071] Step S80, preprocessing and running the plug-in.
[0072] After the plug-in obtained remotely is loaded into the plug-in system, it cannot be run directly on the plug-in system page. It needs to be pre-processed by the plug-in center before the plug-in can be run and sandboxed.
[0073] In a feasible implementation, step S80 may include steps S81 to S83: Step S81, matching the plug-in in the plug-in center according to the configuration information of the plug-in, and filtering out the plug-in that meets the preset status condition; The plug-in is first entered into the management. According to the configuration information of the plug-in, the plug-in to be loaded is matched in the plug-in center, and the plug-in status is "on" and the plug-in set that matches the current terminal is selected. The current terminal refers to the PC and mobile terminal.
[0074] Step S82, performing a validity check on the plug-in that meets the preset status condition; The validity of the selected plug-ins that meet the preset status conditions and are in line with the current terminal is checked to determine whether the modification of each slot in the plug-in is allowed.
[0075] In a feasible implementation, step S82 may include steps A1 to A4: Step A1, initializing an array type variable set; It should be noted that the array type variable collection (pluginLIst) is an array, list or collection type variable, which is used to store information about all available or loaded plug-ins in the current system.
[0076] Step A2, traversing the plug-ins in the plug-in set, and querying whether the configuration information of the plug-ins in the plug-in set meets the preset configuration conditions; Use a loop program to traverse the plug-ins in the plug-in collection, find the configuration information of the plug-ins in the plug-in collection, and determine whether the configuration information meets the preset configuration conditions, where the configuration conditions include: matching the number of the target page, the same slot number, and the same slot type. Here, "page number", "slot number" and "slot type" are attributes used to uniquely identify a specific slot in the page, ensuring that the corresponding configuration information can be accurately found.
[0077] Step A3, if the configuration information of the plug-in in the plug-in set meets the preset configuration condition, then determining whether the variables in the array type variable set have been recorded locally; Use the page number and slot number in the plugin configuration information as the key to determine whether it already exists in the array type variable collection.
[0078] Step A4: if not, register the configuration information of the plug-in and the plug-in corresponding to the configuration information of the plug-in into the array type variable set.
[0079] If it does not exist, the page number and slot number are used as the key, and the code block at the corresponding position is value, which is registered in the array type variable collection.
[0080] And register the processed data in the array type variable collection into the plugins data with the key being the page number and slot number and the value being the code block data, so that the page can be run based on the plugins data in subsequent operations.
[0081] Step S83, executing the plug-in and sandboxing the plug-in that has passed the legality check.
[0082] Load the plugin data that has passed the validity check to ensure that it can run accurately, safely and in isolation on the current page.
[0083] In a feasible implementation, step S83 may include steps B1-B2: Step B1, loading the plug-in data in the array type variable set for retrieval and processing to obtain code data; It should be noted that the slot has the following attributes: page number, slot number, and shared pool (a data set managed jointly by the system and the plug-in).
[0084] Specifically, when a page with a slot runs, the slot retrieves the plug-in data based on the conditions of the page number and the slot number.
[0085] If the retrieval is successful, the code applicability level is obtained according to the key of the current page number and slot number, and the retrieved plug-in data that needs to be run is processed according to the code applicability level.
[0086] Where code applicability level refers to the rules that determine how to handle plugin data retrieved from a specific slot.
[0087] Based on the code applicability level, for the react development method, it is necessary to request the specific plug-in data again, and then go through operations such as decompression and transcoding; while for the native JS language development method, no other processing is required.
[0088] After getting the processed plug-in data, the code data is obtained and used as input parameters to run the sandbox. In addition, some other data needs to be used as input parameters to the sandbox: the slot's own shared pool data, the system online Step B2: perform sandbox operation according to the code data.
[0089] After the sandbox obtains the code data processed in step B1, it converts the code data into a function and runs it at the specified DOM location.
[0090] It should be noted that when executing step B2, the following points should be noted: 1. Since the plug-in has a new environment, namely the iframe environment, plus the new environment implemented by proxy (proxy object) and with access control, the original system pages and plug-ins need to run in different isolated environments respectively, and the data are also isolated from each other.
[0091] 2. For the isolation of plug-ins and plug-in data, a page can have multiple slot codes at the same time and run in the same sandbox environment. There is a risk of the same data variable name. Here, the get and set methods in the proxy are used. The variables in each slot code are automatically added with the slot number when running the process. Figure 4 , Figure 4 Schematic diagram of the data sharing and isolation process.
[0092] 3. System data synchronization is achieved by the update mechanism of react components and the prototype chain of variables to achieve data modification synchronization.
[0093] 4. Plugin data synchronization uses the get (processing) and set (modification) methods in the proxy, and cooperates with the event monitoring mechanism to trigger plugin data synchronization.
[0094] 5. Event monitoring: When the system data changes, the get method will be triggered and an event containing a combination of the slot number and the variable name will be sent. When the plug-in system is running, it will listen to this event and determine which specific variable triggered the update operation based on the event name.
[0095] Through the above implementation method, plug-in operation and sandbox operation ensure that plug-in data can be accurately and safely isolated from each other and run on the current page. Improve the security of the system and ensure that each plug-in can run stably, efficiently and independently on the current page.
[0096] For example, to help understand the implementation process of the plug-in development method obtained by combining this embodiment with the above-mentioned embodiment 1, please refer to Figure 5 , Figure 5 A system framework diagram of a plug-in development method is provided, specifically: In order to increase the scalability of the original system without affecting the safe and stable operation of the original system, the embodiment of the present application also proposes a plug-in development method based on React. Combining native JS language development and React development, personalized needs are realized on the original system, plug-in replacement is flexible, functions are varied, and the original plug-in development cycle is broken away, and immediate development and immediate use are achieved.
[0097] For example, to help understand the implementation process of the plug-in development method obtained by combining the above-mentioned embodiments 1, 2 and 3, please refer to Figure 6 , Figure 6 A component attribute relationship diagram of a plug-in development method is provided, specifically: In order to enable the plug-in to run safely on the original system, this embodiment provides several key component properties, as follows: Slot: The location where the plugin runs code and renders in the system; Plug-in center: After the plug-in is acquired remotely, it is responsible for acquiring, preprocessing, and registering the plug-in data in the system; Configuration Center: Configure slot information. Each page has several locations (slots) where plugins can be used, and the types of operations supported by the slots; Sandbox environment: The plug-in code will run in this environment and will be isolated from the system.
[0098] It should be noted that the above examples are only used to understand the present application and do not constitute a limitation on the plug-in development method of the present application. More simple transformations based on this technical concept are all within the scope of protection of the present application.
[0099] This application also provides a plug-in development device, please refer to Figure 7 The plug-in development device includes a development end, a management end and an operation end, and the development end includes: A definition module 10, used to define variable data in a pre-set execution environment; A storage module 20, used for storing the variable data in a preset location; The sending module 30 is used to obtain the plug-in through the variable data at the corresponding position, and send the plug-in to the management end, so that the management end can manage the plug-in in the slot corresponding to the plug-in; The management terminal includes: The acquisition module 40 is used to acquire a plug-in developed by the development end, wherein the plug-in is defined by the development end in a preset execution environment, the variable data is stored in a preset location, and the variable data in the preset location is obtained by accessing and sent to the management end; A management module 50, used to manage the plug-in in the slot corresponding to the plug-in; The sending module sends the plug-in at the slot position to the running end, so that the running end pre-processes and runs the plug-in; The operating end includes: The acquisition module 40 is used to acquire the plug-in sent by the management end, wherein the plug-in is defined by the development end in a preset execution environment, the variable data is stored in a preset location, and the variable data in the preset location is accessed and obtained and sent to the management end; The running module 60 pre-processes and runs the plug-in.
[0100] The plug-in development device provided by the present application adopts the plug-in development method in the above embodiment, which can solve the technical problem of how to improve the efficiency of plug-in development. Compared with the prior art, the beneficial effects of the plug-in development device provided by the present application are the same as the beneficial effects of the plug-in development method provided by the above embodiment, and the other technical features in the plug-in development device are the same as the features disclosed in the above embodiment method, which will not be repeated here.
[0101] The present application provides a plug-in development terminal device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the plug-in development method in the above-mentioned embodiment 1.
[0102] Reference below Figure 8 , which shows a schematic diagram of the structure of a plug-in development terminal device suitable for implementing the embodiment of the present application. The plug-in development terminal device in the embodiment of the present application may include but is not limited to mobile terminals such as mobile phones, laptops, PDAs (Personal Digital Assistants), PADs (Portable Application Descriptions: tablet computers), PMPs (Portable Media Players: portable multimedia players), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 8 The plug-in development terminal device shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.
[0103] like Figure 8 As shown, the plug-in development terminal device may include a processing device 1001 (such as a central processing unit, a graphics processor, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM: Read Only Memory) 1002 or a program loaded from a storage device 1003 to a random access memory (RAM: Random Access Memory) 1004. In RAM1004, various programs and data required for the operation of the plug-in development terminal device are also stored. The processing device 1001, ROM1002 and RAM1004 are connected to each other through a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Generally, the following systems can be connected to the I / O interface 1006: an input device 1007 including, for example, a touch screen, a touchpad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; an output device 1008 including, for example, a liquid crystal display (LCD: Liquid Crystal Display), a speaker, a vibrator, etc.; a storage device 1003 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 1009. The communication device 1009 can allow the plug-in development terminal device to communicate with other devices wirelessly or by wire to exchange data. Although the plug-in development terminal device with various systems is shown in the figure, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems can be implemented or provided instead.
[0104] In particular, according to the embodiments disclosed in the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device, or installed from a storage device 1003, or installed from a ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are executed.
[0105] The plug-in development terminal device provided by the present application adopts the plug-in development method in the above embodiment, which can solve the technical problem of how to improve the efficiency of plug-in development. Compared with the prior art, the beneficial effects of the plug-in development terminal device provided by the present application are the same as the beneficial effects of the plug-in development method provided by the above embodiment, and the other technical features in the plug-in development terminal device are the same as the features disclosed in the method of the previous embodiment, which will not be repeated here.
[0106] It should be understood that the various parts disclosed in this application can be implemented by hardware, software, firmware or a combination thereof. In the description of the above embodiments, specific features, structures, materials or characteristics can be combined in any one or more embodiments or examples in a suitable manner.
[0107] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.
[0108] The present application provides a computer-readable storage medium having computer-readable program instructions (ie, computer programs) stored thereon, and the computer-readable program instructions are used to execute the plug-in development method in the above-mentioned embodiment.
[0109] The computer-readable storage medium provided in the present application may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems or devices, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM: Random Access Memory), a read-only memory (ROM: Read Only Memory), an erasable programmable read-only memory (EPROM: Erasable Programmable Read Only Memory or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM: CD-Read Only Memory), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program, which may be used by or in combination with an instruction execution system, system or device. The program code contained on the computer-readable storage medium may be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (Radio Frequency: Radio Frequency), etc., or any suitable combination of the above.
[0110] The computer-readable storage medium may be included in the plug-in development terminal device; or may exist independently without being assembled into the plug-in development terminal device.
[0111] The computer-readable storage medium carries one or more programs. When the one or more programs are executed by the plug-in development terminal device, the plug-in development terminal device: defines variable data in a preset execution environment through the development end; stores the variable data in a preset location; obtains a plug-in by accessing the variable data in the preset location, and sends the plug-in to the management end, so that the management end can manage the plug-in in the slot corresponding to the plug-in. The management end obtains the plug-in developed by the development end; manages the plug-in in the slot corresponding to the plug-in; and sends the plug-in in the slot position to the operation end, so that the operation end can pre-process and run the plug-in. The operation end obtains the plug-in sent by the management end; pre-processes and runs the plug-in.
[0112] Computer program code for performing the operations of the present application may be written in one or more programming languages or a combination thereof, including object-oriented programming languages, such as Java, Smalltalk, C++, and conventional procedural programming languages, such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).
[0113] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present application. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.
[0114] The modules involved in the embodiments described in this application may be implemented by software or hardware, wherein the name of the module does not constitute a limitation on the unit itself in some cases.
[0115] The readable storage medium provided in this application is a computer-readable storage medium, which stores computer-readable program instructions (i.e., computer programs) for executing the above-mentioned plug-in development method, and can solve the technical problem of how to improve the efficiency of plug-in development. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided in this application are the same as the beneficial effects of the plug-in development method provided in the above-mentioned embodiment, and will not be repeated here.
[0116] The present application also provides a computer program product, including a computer program, which implements the steps of the above-mentioned plug-in development method when executed by a processor.
[0117] The computer program product provided by this application can solve the technical problem of how to improve the efficiency of plug-in development. Compared with the prior art, the beneficial effects of the computer program product provided by this application are the same as the beneficial effects of the plug-in development method provided by the above embodiment, which will not be repeated here.
[0118] The above descriptions are only some embodiments of the present application, and are not intended to limit the patent scope of the present application. All equivalent structural changes made using the contents of the present application specification and drawings under the technical concept of the present application, or direct / indirect applications in other related technical fields are included in the patent protection scope of the present application.
Claims
1. A plug-in development method, characterized in that: The method is applied to the development end, and the method includes: Define variable data in a pre-defined execution environment; Storing the variable data in a preset location; The plug-in is obtained by accessing the variable data at the preset position, and the plug-in is sent to the management end so that the management end can manage the plug-in at the slot corresponding to the plug-in.
2. A plug-in development method, characterized in that: The method is applied to a management end, and the method includes: Acquire a plug-in developed by a development end, wherein the plug-in is defined by the development end in a preset execution environment, the variable data is stored in a preset location, and the variable data in the preset location is obtained by accessing and sent to the management end; Managing the plug-in on the slot corresponding to the plug-in; The plug-in at the slot position is sent to the operation end so that the operation end pre-processes and runs the plug-in.
3. The method according to claim 2, characterized in that The step of managing the plug-in on the slot corresponding to the plug-in includes: Upload the plug-in to the corresponding slot position of the plug-in; Bind or unbind the plug-in at the slot position with the corresponding enterprise; When the plug-in at the slot position is successfully bound to the corresponding enterprise, the corresponding enterprise is enabled or disabled.
4. A plug-in development method, characterized in that: The method is applied to the operation end, and the method includes: Acquire a plug-in sent by the management end, wherein the plug-in is defined by the development end in a preset execution environment, stores the variable data in a preset location, and obtains and sends the variable data in the preset location to the management end by accessing the variable data; The plug-in is preprocessed and run.
5. The method according to claim 4, characterized in that The step of obtaining the plug-in sent by the management end includes: Retrieve whether the plugin is obtained through the current page slot; If not obtained, send a request to the server to obtain the plug-in returned by the server; If it has been obtained, it is searched in the execution environment according to the page number and slot number to obtain the plug-in.
6. The method according to claim 4, characterized in that The steps of preprocessing and running the plug-in include: According to the configuration information of the plug-in, the plug-in is matched in the plug-in center, and the plug-in that meets the preset status condition is screened out; Performing a validity check on the plug-in that meets the preset status condition; Run the plug-in and sandbox the plug-in that has passed the legality check.
7. The method according to claim 6, characterized in that The step of performing a validity check on the plug-in that meets the preset status condition includes: Initialize a collection of array type variables; Traversing the plug-ins in the plug-in collection, and querying whether the configuration information of the plug-ins in the plug-in collection meets the preset configuration conditions; If the configuration information of the plug-in in the plug-in set meets the preset configuration condition, determining whether the configuration information of the plug-in exists in the array type variable set; If not, register the configuration information of the plug-in and the plug-in corresponding to the configuration information of the plug-in into the array type variable set.
8. The method according to any one of claims 6 to 7, characterized in that The step of running the plug-in and running the sandbox on the plug-in that has passed the legality check includes: Load the plug-in data in the array type variable collection for retrieval and processing to obtain code data; According to the code data, sandbox operation is performed.
9. The method according to claim 8, characterized in that The step of performing sandbox operation according to the code data includes: Convert code data into functions; Runs the function at the specified Document Object Model (DOM) location.
10. A plug-in development device, characterized in that: The plug-in development device includes a development end, a management end, and an operation end, and the development end includes: Definition module, used to define variable data in a pre-set execution environment; A storage module, used for storing the variable data in a preset location; A sending module, used for obtaining a plug-in through the variable data at the corresponding position, and sending the plug-in to a management end, so that the management end can manage the plug-in at the slot corresponding to the plug-in; The management terminal includes: The acquisition module is used to acquire the plug-in developed by the development end. The plug-in is defined by the development end in a preset execution environment, and the variable data is stored in a preset location. The variable data in the preset location is obtained by accessing the variable data and sent to the management end. A management module, used for managing the plug-in on the slot corresponding to the plug-in; The sending module sends the plug-in at the slot position to the running end, so that the running end pre-processes and runs the plug-in; The operating end includes: An acquisition module is used to acquire a plug-in sent by the management end, wherein the plug-in is defined by the development end in a preset execution environment with variable data, the variable data is stored in a preset location, and the variable data in the preset location is obtained by accessing the variable data and sent to the management end; The running module pre-processes and runs the plug-in.
11. A plug-in development terminal device, characterized in that: The device comprises: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the plug-in development method according to any one of claims 1 or claims 2 to 3 or claims 4 to 9.
12. A storage medium, characterized in that: The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the plug-in development method according to any one of claims 1 or claims 2 to 3 or claims 4 to 9 are implemented.