Web application system interface information internationalization method based on shared instance and object storage without plug-in dependency, storage medium and equipment

Abstract

The invention discloses a Web application system interface information internationalization method based on shared instances and object storage without plug-in dependency, a storage medium and equipment. The method comprises the steps of packaging an internationalization logic processing class Translator, setting an instance of the internationalization logic processing class as a shared instance Translator, defining a global function user Translator, and accessing the shared instance Translator and a translation method through the global function user Translator. An internationalization resource library is created and used for storing all interface elements needing internationalization, and each interface element stores a translation document in a key-value pair mode; the method comprises the following steps: in a service component of a Web application system, introducing a global function user Translator, accessing a lang attribute of a shared instance translator through the global function user Translator to obtain a current language environment, calling a translation method to dynamically load a translation copywriting in the current language environment from an internationalized resource library, and performing interface display. According to the method, the flexibility of internationalization processing of the interface information of the Web application system is improved.

Description

Technical Field

[0001] The present invention belongs to the technical field of Web application system interface design, and in particular, relates to a method, storage medium and device for internationalizing Web application system interface information based on shared instances and object storage without plug-in dependency. Background Art

[0002] In the era of globalization, domestic network exchanges and cooperation are becoming more and more extensive. In order to create multilingual web pages or software for domestic and foreign users, information can be more widely disseminated and applied. Although mainstream development languages ​​and technology stacks have some common and mature internationalization solutions in active communities, these solutions are extracted into plug-ins for developers to use, such as the vue-i18n plug-in of the Vue technology stack and the react-intl plug-in of the React technology stack. The common internationalization solution in the market is to install these internationalization plug-ins in the web application system to implement this function.

[0003] Internationalization plug-ins are usually mature solutions developed by the community or third parties. They can be used directly without writing code from scratch, which improves development efficiency. However, this way of integrating internationalization plug-ins increases the cost of learning the corresponding internationalization plug-ins, and also increases the size and complexity of the project package. Especially in cross-technology stack micro-frontend projects, multiple sub-application technology stacks are not unified. For example, three sub-applications use Vue, React or pure js respectively, and internationalization plug-ins on the market are often designed for a certain type of technology stack. In this case, developers need to understand and learn several different internationalization plug-ins, and install and use them separately in different sub-projects, which increases project complexity and destroys project unity. Summary of the invention

[0004] In view of the problems existing in the prior art, the present invention provides a method, storage medium and device for internationalizing the interface information of a Web application system based on shared instances and object storage without plug-in dependence, proposes a lightweight cross-technology stack Web application system interface information internationalization solution, and improves the flexibility of the internationalization processing of the interface information of the Web application system.

[0005] To achieve the above technical objectives, the present invention adopts the following technical solution: a method for internationalizing interface information of a Web application system based on shared instances and object storage without plug-in dependency, specifically comprising the following steps:

[0006] Step S1, encapsulate the internationalization logic processing class Translator, set the instance of the internationalization logic processing class as the shared instance translator, define the global function useTranslator, and access the shared instance translator and the translation method through the global function useTranslator;

[0007] Step S2: Create an internationalized resource library to store all interface elements that need to be internationalized. Each interface element stores the translation copy in the form of a key-value pair.

[0008] Step S3: In the business component of the Web application system, introduce the global function useTranslator, access the lang attribute of the shared instance translator through the global function useTranslator to obtain the current language environment, call the translation method to dynamically load the translation copy in the current language environment from the internationalization resource library, and display it on the interface.

[0009] Furthermore, the resource object translations and the language environment lang attribute, language switching, translation method and placeholder replacement variables are set in the constructor of the internationalization logic processing class Translator, wherein the language environment lang attribute is set as a responsive variable.

[0010] Further, the translation method is set to t(code, lang, ... rest), wherein code represents the identifier of the interface element to be translated, lang represents the target language of the translation, ... rest represents the remaining variable number of parameters used to replace the placeholders in the translation string.

[0011] Furthermore, the specific process of the internationalization logic processing class Translator to implement interface element translation is: obtain the translation string from the resource object translations, obtain the corresponding translation object according to the code in the translation method, use lang or the lang attribute of the shared instance translator as the default language, assign the obtained translation string to transStr, call the placeholder replacement method (transStr, rest), replace the value in rest with the placeholder in transStr, and obtain the final translation string.

[0012] Furthermore, the specific process of step S2 is as follows: the resource files in the internationalization resource library are divided into multiple independent files according to the interface and function. One independent file exports a copy resource object. Each copy resource object contains multiple interface elements. Each interface element uses a key-value pair to store the translation copy, where the key is the identifier of the interface element and the value is an object that stores the translation copy in each language.

[0013] Furthermore, at the entrance of the internationalized resource library, the shared instance translator is introduced through import, each internationalized resource file is loaded, and each text resource object is merged and assigned to the resource object translations of the shared instance translator.

[0014] Furthermore, when the user switches the language, the lang attribute is updated through the language switching of the shared instance translator, and the translation method is called to dynamically load the translation copy under the lang attribute of the current language environment from the internationalization resource library to update the interface of the business component.

[0015] Furthermore, the guard route is used to monitor the target language in the internationalization of the Web application system interface information, the language keywords contained in the route are parsed through to.path, the lang attribute in the shared instance translator is updated, and the translation method is called to dynamically load the translation copy under the lang attribute of the current language environment from the internationalization resource library to update the interface of the business component.

[0016] Furthermore, the present invention also provides a computer-readable storage medium storing a computer program, wherein the computer program enables a computer to execute the method for internationalizing interface information of a Web application system based on shared instances and object storage without plug-in dependency.

[0017] Furthermore, the present invention also provides an electronic device, comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the method for internationalizing interface information of a Web application system based on shared instances and object storage without plug-in dependency is implemented.

[0018] Compared with the prior art, the present invention has the following beneficial effects:

[0019] (1) The present invention introduces a global function useTranslator in the business component of the Web application system based on shared instances and object storage without plug-in dependency. The global function useTranslator accesses the lang attribute of the shared instance translator to obtain the current language environment, and calls the translation method to dynamically load the translation copy in the current language environment from the internationalization resource library for interface display. No other plug-ins are needed to realize the internationalization of the Web application system interface information, thereby reducing code complexity and maintenance costs.

[0020] (2) The internationalization logic processing class Translator encapsulated by the method for internationalization of Web application system interface information without plug-in dependency based on shared instances and object storage, the defined global function useTranslator, and the created internationalization resource library are completely separated from the business code, with less coupling, high reusability and flexibility;

[0021] (3) The method for internationalizing the interface information of a Web application system based on shared instances and object storage without plug-in dependency of the present invention has a small code size, a simple implementation principle, and only relies on simple JavaScript objects and functions. It is easy to integrate and expand in projects with different technology stacks. BRIEF DESCRIPTION OF THE DRAWINGS

[0022] Figure 1 It is a flow chart of the method for internationalizing the interface information of a Web application system based on shared instances and object storage without plug-in dependency of the present invention;

[0023] Figure 2 A schematic diagram of setting an instance of the internationalization logic processing class as a shared instance translator and defining a global function useTranslator for the present invention;

[0024] Figure 3 Schematic diagram of creating an internationalized resource library for the present invention. DETAILED DESCRIPTION

[0025] The technical solution of the present invention is further explained below in conjunction with the accompanying drawings.

[0026] like Figure 1 The flowchart of the method for internationalizing the interface information of a Web application system based on shared instances and object storage without plug-in dependency of the present invention is as follows:

[0027] Step S1, encapsulate the internationalization logic processing class Translator, set the instance of the internationalization logic processing class as the shared instance translator, define the global function useTranslator, access the shared instance translator and the translation method through the global function useTranslator, and completely separate the internationalization logic processing class Translator from the business code by encapsulating it, with less coupling and easy transplantation. The encapsulated internationalization logic processing class Translator can be reused between projects, reducing duplication of work and improving development efficiency. At the same time, encapsulating the core logic of the internationalization method into a js can provide a more intuitive API, improve code readability, and facilitate function expansion.

[0028] like Figure 2In the constructor of the internationalization logic processing class Translator of the present invention, resource object translations and language environment lang attributes, language switching, translation methods and placeholder replacement variables are set. Among them, ref is used to create a responsive variable lang in the vue project, which can trigger the re-rendering of the interface view in real time when the language is switched. Specifically, when the language is switched, the value of the language environment lang attribute changes and will be detected by Vue, and the translation method t(code,...rest) that replaces the literal value with the text will also change accordingly; in React, the responsive variable lang can be replaced by useState to define; there is no directly available API in native JavaScript, and a simple responsive variable can be implemented by yourself through the observer mode.

[0029] The definition process of language switching is: receive a parameter lang as the target language, assign it to the language environment lang attribute of the shared instance translator, and save the target language in the browser sessionStorage. When the user switches the language, call the language switching method, and select the language zh or en accordingly. The language environment lang attribute of the shared instance translator will be changed accordingly.

[0030] The translation method is set to t(code,lang,...rest), where code represents the identifier of the interface element to be translated, lang represents the target language for translation, and ...rest represents the remaining variable number of parameters used to replace the placeholders in the translation string. The specific process of implementing the translation of interface elements in the internationalization logic processing class Translator is as follows: obtain the translation string from the resource object translations, obtain the corresponding translation object according to the code in the translation method, use lang or the lang attribute of the shared instance translator as the default language, assign the obtained translation string to transStr, call the placeholder replacement method (transStr,rest), replace the value in rest with the placeholder in transStr, and obtain the final translation string.

[0031] Step S2: Create an international resource library to store all interface elements that need to be internationalized. Each interface element stores the translation copy in the form of a key-value pair. Specifically, Figure 3, the resource files in the internationalized resource library are divided into multiple independent files according to the interface and function. One independent file exports a text resource object. Each text resource object contains multiple interface elements. Each interface element uses a key-value pair to store the translation copy, where the key is the identifier of the interface element and the value is an object that stores the translation copy of each language. Create an internationalized resource library, all translation strings are centrally managed, and updates and maintenance become simpler. When you need to add new language support or update existing translations, you only need to modify the internationalized resource file without changing the business code logic. The resource library is created in an object storage manner, directly utilizing the object literal feature of JavaScript, without the need for additional serialization and deserialization steps, and can be used directly in the code; internationalized resources can be directly imported as JavaScript modules and seamlessly integrated with other parts of the application; internationalized resources can be directly accessed and modified through object properties without parsing JSON strings, which is particularly useful at runtime; for developers, using JavaScript objects to store internationalized resource files is more intuitive and easy to understand.

[0032] At the entrance of the internationalization resource library, the shared instance translator is introduced through import, each internationalization resource file is loaded, and each copy resource object is merged and assigned to the resource object translations of the shared instance translator.

[0033] Step S3, there are multiple pages in the Web application system, and one page is usually implemented by one or more business component codes. In the business component, the global function useTranslator is introduced, and the lang attribute of the shared instance translator is accessed through the global function useTranslator to obtain the current language environment, and the translation method is called to dynamically load the translation copy in the current language environment from the internationalization resource library for interface display. No other plug-ins are needed to realize the internationalization of the interface information of the Web application system, reducing code complexity and maintenance costs. The lang attribute is defined as a responsive variable. When the language is switched, the change of the lang value will be detected by frameworks such as Vue, and the business components that depend on the value will be updated, thereby triggering the update of the view. Automatic interface update by setting the target language lang as a responsive variable has the following advantages: maintaining the user's operation context when switching languages, avoiding the loss of user operations or navigation status due to refreshing the page; reducing page refreshes and reloads, reducing server requests and improving page performance; responsive language switching provides users with a smooth multi-language experience and enhances user satisfaction.

[0034] In a technical solution of the present invention, when the user switches the language, the lang attribute is updated by the language switching of the shared instance translator, and the translation method is called to dynamically load the translation text under the lang attribute of the current language environment from the internationalization resource library to update the interface of the business component.

[0035] In a technical solution of the present invention, a guard route is used to monitor the target language in the internationalization of the interface information of the Web application system, the language keyword contained in the route is parsed through to.path, the lang attribute in the shared instance translator is updated, and the translation method is called to dynamically load the translation copy under the lang attribute of the current language environment from the internationalization resource library to update the interface of the business component.

[0036] Through the method for internationalizing interface information of a Web application system based on shared instances and object storage without plug-in dependency of the present invention, the internationalization of interface information can be achieved without introducing plug-ins, reducing the code complexity and maintenance cost increased by introducing multiple plug-ins, reducing the coupling between plug-ins and front-end codes, improving the readability and maintainability of the code, and meeting the internationalization requirements of all types of interface information.

[0037] In a technical solution of the present invention, a computer-readable storage medium is also provided, storing a computer program, wherein the computer program enables a computer to execute the method for internationalizing interface information of a Web application system based on shared instances and object storage without plug-in dependency.

[0038] In a technical solution of the present invention, an electronic device is also provided, including: a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the method for internationalizing the interface information of a Web application system based on shared instances and object storage without plug-in dependency is implemented.

[0039] In the embodiments disclosed in the present application, the computer storage medium can be a tangible medium that can contain or store a program for use by or in conjunction with an instruction execution system, device or equipment. The computer storage medium can include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices or equipment, or any suitable combination of the above. More specific examples of computer storage media can include electrical connections based on one or more lines, portable computer disks, hard disks, random access memories (RAM), read-only memories (ROM), erasable programmable read-only memories (EPROM or flash memory), optical fibers, portable compact disk read-only memories (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the above.

[0040] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed in this application can be implemented in electronic hardware or a combination of computer software and electronic hardware. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of this application.

[0041] The above are only preferred embodiments of the present invention, and the protection scope of the present invention is not limited to the above embodiments. All technical solutions under the concept of the present invention belong to the protection scope of the present invention. It should be pointed out that for ordinary technicians in this technical field, some improvements and modifications without departing from the principle of the present invention should be regarded as the protection scope of the present invention.

Claims

1. A method for internationalizing interface information of a Web application system based on shared instances and object storage without plug-in dependency, characterized in that: The specific steps include: Step S1, encapsulate the internationalization logic processing class Translator, set the instance of the internationalization logic processing class as the shared instance translator, define the global function useTranslator, and access the shared instance translator and the translation method through the global function useTranslator; Step S2: Create an internationalized resource library to store all interface elements that need to be internationalized. Each interface element stores the translation copy in the form of a key-value pair. Step S3: In the business component of the Web application system, introduce the global function useTranslator, access the lang attribute of the shared instance translator through the global function useTranslator to obtain the current language environment, call the translation method to dynamically load the translation copy in the current language environment from the internationalization resource library, and display it on the interface.

2. According to claim 1, a method for internationalizing interface information of a Web application system based on shared instances and object storage without plug-in dependency, characterized in that: The constructor of the internationalization logic processing class Translator sets resource object translations and language environment lang attribute, language switching, translation method and placeholder replacement variables, wherein the language environment lang attribute is set to a responsive variable.

3. According to claim 2, a method for internationalizing interface information of a Web application system based on shared instances and object storage without plug-in dependency, characterized in that: The translation method is set to t(code, lang, ... rest), where code represents the identifier of the interface element to be translated, lang represents the target language of the translation, and ... rest represents the remaining variable number of parameters used to replace placeholders in the translation string.

4. According to claim 3, a method for internationalizing interface information of a Web application system based on shared instances and object storage without plug-in dependency, characterized in that: The specific process of implementing interface element translation by the internationalization logic processing class Translator is as follows: obtaining the translation string from the resource object translations, obtaining the corresponding translation object according to the code in the translation method, using lang or the lang attribute of the shared instance translator as the default language, assigning the obtained translation string to transStr, calling the placeholder replacement method (transStr, rest), replacing the value in rest with the placeholder in transStr, and obtaining the final translation string.

5. According to claim 4, a method for internationalizing interface information of a Web application system based on shared instances and object storage without plug-in dependency, characterized in that: The specific process of step S2 is as follows: the resource files in the internationalization resource library are divided into multiple independent files according to the interface and function. One independent file exports a copy resource object. Each copy resource object contains multiple interface elements. Each interface element uses a key-value pair to store the translation copy, where the key is the identifier of the interface element and the value is an object that stores the translation copy in each language.

6. A method for internationalizing interface information of a Web application system based on shared instances and object storage without plug-in dependency according to claim 5, characterized in that: At the entrance of the internationalization resource library, the shared instance translator is introduced through import, each internationalization resource file is loaded, and each copy resource object is merged and assigned to the resource object translations of the shared instance translator.

7. A method for internationalizing interface information of a Web application system based on shared instances and object storage without plug-in dependency according to claim 6, characterized in that: When the user switches the language, the lang attribute is updated through the language switching of the shared instance translator, and the translation method is called to dynamically load the translation copy under the lang attribute of the current language environment from the internationalization resource library to update the interface of the business component.

8. According to claim 1, a method for internationalizing interface information of a Web application system based on shared instances and object storage without plug-in dependency, characterized in that: Use guard routing to monitor the target language in the internationalization of the Web application system interface information, parse the language keywords contained in the route through to.path, update the lang attribute in the shared instance translator, call the translation method to dynamically load the translation copy under the lang attribute of the current language environment from the internationalization resource library, and update the interface of the business component.

9. A computer-readable storage medium storing a computer program, characterized in that: The computer program enables the computer to execute the method for internationalizing the interface information of a Web application system based on shared instances and object storage without plug-in dependency as described in any one of claims 1 to 8.

10. An electronic device, characterized in that: include: A memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the method for internationalizing interface information of a Web application system based on shared instances and object storage without plug-in dependency as described in any one of claims 1 to 8 is implemented.

Images