一种用于前端页面多语言项目快速开发的方法及系统技术方案

本发明专利技术涉及前端页面展示领域，特别涉及一种用于前端页面多语言项目快速开发的方法及系统。其系统包括源码处理系统和页面实时翻译系统，所述源码处理系统包括用户与系统交互模块、源码读取和解析模块、Excel表格写入与读取模块、词条源码写入模块；且基于该系统提供一种用于前端页面多语言项目快速开发的方法，包括用户与系统交互流程、源码读取和解析流程、Excel表格写入和读取流程、词条源码写入流程、页面实时翻译流程。本发明专利技术降低人工编码的复杂度和出错率；提高代码的可读性，便于代码的迭代和维护；节省词条维护和占用的人力成本和时间成本。间成本。间成本。

【技术实现步骤摘要】
一种用于前端页面多语言项目快速开发的方法及系统


[0001]本专利技术涉及前端页面展示领域，特别涉及一种用于前端页面多语言项目快速开发的方法及系统。

技术介绍

[0002]在经济全球化的背景下，一个好的产品通常会销往全球，面对全球不同国家的用户，那不同语言的操作界面就必不可少，给不同的国家，提供不同语言的操作界面也成为产品开发的必备需求。开发多语言页面是个比较繁琐的工作，当前比较流行的有两种方案，核心思路都差不多。
[0003]第一种是通过开源I18N库，在编码阶段通过规定的格式编写占位符，通过占位符去匹配对应的语言词条，对词条信息存储文件和代码格式都有特定的要求。
[0004]第二种就是通过个页面上的语言相关显示的html标签添加id属性，确定唯一标识，然后通过id去查找对应的标签，然后通过id去匹配词条，将匹配到的词条替换进html内容里面。
[0005]两种方式局限性都比较大，对编码有要求，代码也不好维护，语言词条和标识之间没有必然的联系，无法通过代码直接理解内容，同时词条的维护成本较高，不利于后续的代码维护和扩展本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种用于前端页面多语言项目快速开发的方法，其特征在于，包括以下步骤：S1.用户与系统交互流程：读取用户输入的包括代码路径的配置信息，判断配置信息是否合法且代码路径是否存在，如输入配置正确执行步骤S2，否则提示相关错误并转到步骤S1；S2.源码读取和解析流程：读取代码源文件，分析文件内容，转成AST文件；根据配置信息提取中文、英文或规定格式的词条信息；去除词条前后的空格、去除重复的词条信息，返回词条列表；S3.Excel表格写入和读取流程：将词条写入excel中的第一列，同时在列头标注列语言信息；对excel中的词条进行多国家语言翻译，翻译完成后给回excel；将给回的excel进行提取，以英文词条为Key，转成多个国家的词条JSON文件；S4.词条源码写入流程：重新遍历读取源代码，自动将html中的词条全部替换为英文，将包括js的逻辑文件中的词条替换，并添加翻译函数；S5.页面实时翻译流程：将保存各国语言词条的JSON文件添加到项目中，同时引入全局翻译处理库。2.根据权利要求1所述用于前端页面多语言项目快速开发的方法，其特征在于，所述步骤S1用户与系统交互流程具体包括：S11.初始化包括configs的相关配置，输入必要的配置信息；S12.系统提取语种类型、源代码路径、Excel输出路径、其他次要配置信息的数据，并对数据进行合法性检验；S13.若合法性检验不通过，则显示错误信息，用户重新输入并修正错误后，返回步骤S11中，执行必要配置信息的输入；若合法性检验通过，则隐藏错误信息，将配置信息保存。3.根据权利要求1所述用于前端页面多语言项目快速开发的方法，其特征在于，所述步骤S2源码读取和解析流程具体包括步骤：S21.源码读取时首先通过Node读取本地文件流，转为utf
‑
8编码的字符串；再对不同的文件通过不同的方式进行处理，不同的处理方式包括html、js、vue和字符串方式；S22.html、js和vue方式通过第三方库，将源码转为一颗抽象语法树，然后递归遍历整颗抽象语法树，提取出相应的词条；S23.所有不能处理的文件或者在解析成ast过程中报错的文件，全部通过字符串正则匹配的方式进行提取；S24.定义Extract基类，然后定义继承自基类的四个子类ExtractVue、ExtractHtml、ExtractJs、ExtractRegexp，以解析文件源码。4.根据权利要求3所述用于前端页面多语言项目快速开发的方法，其特征在于，所述步骤S22中，遍历整颗抽象语法树的执行过程包括步骤：S221.进行JS
‑
AST解析，递归遍历listAst()，判断节点类型，若为array类型，则遍历数据的每项节点，并返回递归遍历listAst()步骤；若为object类型则执行步骤S222；若为其他类型则跳过继续进行兄弟节点的递归操作，并返回JS
‑
AST解析步骤；S222.判断object类型的节点是否包含宏，若包含则执行步骤S223；若不包含则处理当前节点，并判断nodeType是否为CallExpression，若是则返回步骤S221执行JS
‑
AST解析；若否则处理目标NodeListNode()，返回词条getWord()，并判断词条是否为空，若为空则跳过
继续进行兄弟节点递归，并返回JS
‑
AST解析步骤；若不为空则记录提取词条addWord()；S223.判断宏值是否正确，若正确则不记录leadComment，时处理缓存的Node，并遍历缓存Node，清空缓存Node后，返回JS
‑
AST解析步骤；若不正确则记录leadComment，记录当前ASTNode，匹配endComment，并判断leadComment和endComment是否匹配，若不匹配则跳转至执行时处理缓存的Node，若匹配则直接清空缓存ASTNode，并调整到步骤S222中处理当前节点的步骤。5.根据权利要求3所述用于前端页面多语言项目快速开发的方法，其特征在于，所述步骤S24中，源码文件解析的过程具体包括步...

【专利技术属性】
技术研发人员：谢昌，杨春梅，彭紫琳，
申请(专利权)人：深圳市吉祥腾达科技有限公司，
类型：发明
国别省市：