(19)国家知识产权局
(12)发明专利申请
(10)申请公布号 (43)申请公布日 (21)申请号 202111606656.4
(22)申请日 2021.12.26
(71)申请人 世纪恒通科技股份有限公司
地址 550081 贵州省贵阳市贵阳国家高新
技术产业开发区中关村贵阳科技园核
心区南园科教街188号
(72)发明人 杨兴荣　徐卓进　杨兴海　李建州　
杨伟帆　
(74)专利代理机构 深圳泛航知识产权代理事务
所(普通合伙) 44867
专利代理师 张智轶
(51)Int.Cl.
G06F  8/73(2018.01)
G06F  8/72(2018.01)
G06F  8/74(2018.01)
G06F  8/38(2018.01)G06F  9/455(2006.01)G06F  9/445(2018.01)
(54)发明名称一种基于Vue代码优化的JavaScript插件(57)摘要本发明公开了一种基于V ue 代码优化的JavaScript插件，涉及互联网技术领域，针对前端人员开发前需要熟悉公司要求的前端开发规范，虽然目前主流的前端代码框架多为Vue，但是通读规范并执行需要耗费时间成本，对己开发完成的代码，需要手动一一修改，工程较大，耗费时间过长的问题，现提出如下方案，包括包括启动模块、文件导入模块、文件识别模块、文件分析模块、文件处理模块与结果输出模块。本发明基于JavaScript与canvas针对前端代码做规范化优化，提高前端代码质量，降低后期维护成本，标准化前端代码，基本命名模板可以使前端初学者熟悉页面命名规范，并对不规范的命名部分进行命名替换操作生成正确规范的命名，保证投入使用
的代码规范。权利要求书1页  说明书3页  附图3页CN 114610380 A 2022.06.10
C N  114610380
A
1.一种基于Vue代码优化的JavaScript插件，包括启动模块、文件导入模块、文件识别模块、文件分析模块、文件处理模块与结果输出模块，其特征在于：所述启动模块与所述文件导入模块相连接，所述文件导入模块与所述文件识别模块相连接，所述文件识别模块与所述文件分析模块相连接，所述文件分析模块与所述文件处理模块相连接，所述文件处理模块与所述结果输出模块相连接。
2.根据权利要求1所述的一种基于Vue代码优化的JavaScript插件，其特征在于：所述文件识别模块包含CSS文件单元、HTML文件单元与JS文件单元，所述CSS文件单元与所述HTML文件单元相连接，所述HTML文件单元与所述JS文件单元相连接。
3.根据权利要求1所述的一种基于Vue代码优化的JavaScript插件，其特征在于，包含以下步骤：
S1：启动本插件，导入待规范的HTML、CSS与JS文件，待规范的HTML、CSS与JS文件包括己开发完成的代码。
S2：运用递归算法对导入的待规范HTML文件从父级节点到子级节点对各级节点进行数组赋值，形成DOM节点，并存储各个分层节点被赋予的数组数据。JavaScript数组对象主要用于在单独的变量名中存储一系列的值，在一实施例中主要用于对各节点实现数据赋值并存储。
js脚本开发S3：各节点的被赋予的数组长度决定其节点分支，每一节点分支生成一节点坐标，canvas通过JavaScript来绘制的2D图形，逐像素进行渲染，主要用于绘制展示树状图，节点在树状图中坐标值由JavaScript获取的节点数据即各节点的被赋予的数组决定。数组的长度也决定所渲染出的树状图的形状，同时数组对象也完成树状图一对一命名赋值，根据JavaScript获取的数组对象的生成的坐标绘制不同的树状图，其中数组存储节点信息，数组对象即数组存储。
S4：通过JavaScript的replace操作，基于数据双向绑定，形成与HTML相应的CSS，JS文件中对应各节点的命名替换。
S5：导出代码命名规范的HTML、CSS与JS文件，保障HTML、CSS与JS文件的代码规范，方便后续操作。
4.根据权利要求1所述的一种基于Vue代码优化的JavaScript插件，其特征在于：完整的JavaScript实现包含三个部分：ECMAScript、文档对象模型与字节顺序记号，该方法利用JavaScript完成主干工作。
权　利　要　求　书1/1页CN 114610380 A
一种基于Vue代码优化的JavaScript插件
技术领域
[0001]本发明涉及互联网技术领域，尤其涉及一种基于Vue代码优化的JavaScript插件。
背景技术
[0002]Vue是一套用于构建用户界面的渐进式JavaScript框架，与其它大型框架不同的是，Vue被设计
为可以自底向上逐层应用,Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用(SPA)提供驱动。JavaScript(简称“JS”)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式，为提高团队的协作效率，所以亟需一种基于Vue代码优化的JavaScript插件。
[0003]但是，前端人员开发前需要熟悉公司要求的前端开发规范，虽然目前主流的前端代码框架多为Vue，但是通读规范并执行需要耗费时间成本，对己开发完成的代码，需要手动一一修改，工程较大，耗费时间过长。
发明内容
[0004]本发明的目的是为了解决前端人员开发前需要熟悉公司要求的前端开发规范，虽然目前主流的前端代码框架多为Vue，但是通读规范并执行需要耗费时间成本，对己开发完成的代码，需要手动一一修改，工程较大，耗费时间过长的缺点，而提出的一种基于Vue代码优化的JavaScript插件。
[0005]为了实现上述目的，本发明采用了如下技术方案：
[0006]一种基于Vue代码优化的JavaScript插件，包括启动模块、文件导入模块、文件识别模块、文件分析模块、文件处理模块与结果输出模块，所述启动模块与所述文件导入模块相连接，所述文件导入模块与所述文件识别模块相连接，所述文件识别模块与所述文件分析模块相连接，所述文件分析模块与所述文件处理模块相连接，所述文件处理模块与所述结果输出模块相连接。
[0007]优选的，所述文件识别模块包含CSS文件单元、HTML文件单元与JS文件单元，所述CSS文件单元与所述HTML文件单元相连接，所述HTML文件单元与所述JS文件单元相连接。[0008]一种基于Vue代码优化的JavaScript插件，包含以下步骤：
[0009]S1：启动本插件，导入待规范的HTML、CSS与JS文件，待规范的HTML、CSS与JS文件包括己开发完成的代码。
[0010]S2：运用递归算法对导入的待规范HTML文件从父级节点到子级节点对各级节点进行数组赋值，形成DOM节点，并存储各个分层节点被赋予的数组数据。JavaScript数组对象主要用于在单独的变量名中存储一系列的值，在一实施例中主要用于对各节点实现数据赋值并存储。
[0011]S3：各节点的被赋予的数组长度决定其节点分支，每一节点分支生成一节点坐标，canvas通过JavaScript来绘制的2D图形，逐像素进行渲染，主要用于绘制展示树状图，节点在树状图中坐标值由JavaScript获取的节点数据即各节点的被赋予的数组决定。数组的长度也决定所渲染出的树状图的形状，
同时数组对象也完成树状图一对一命名赋值，根据JavaScript获取的数组对象的生成的坐标绘制不同的树状图，其中数组存储节点信息，数组对象即数组存储。
[0012]S4：通过JavaScript的replace操作，基于数据双向绑定，形成与HTML相应的CSS，JS文件中对应各节点的命名替换。
[0013]S5：导出代码命名规范的HTML、CSS与JS文件，保障HTML、CSS与JS文件的代码规范，方便后续操作。
[0014]优选的，完整的JavaScript实现包含三个部分：ECMAScript、文档对象模型与字节顺序记号，该方法利用JavaScript完成主干工作。
[0015]本发明中，所述的一种基于Vue代码优化的JavaScript插件，DOM节点获取模块，通过JavaScript获取HTML文件的DOM节点，并存储各个分层节点数据；节点树状图生成模块，基于各节点数据计算各节点坐标并通过canvas绘制节点树状图；
[0016]本发明中，所述的一种基于Vue代码优化的JavaScript插件，DOM节点获取模块，通过JavaScript获取HTML文件的DOM节点，并存储各个分层节点数据；节点树状图生成模块，基于各节点数据计算各节点坐标并通过canvas绘制节点树状图；同步命名规范模块，通过JavaScript的replace操作，基于数据双向绑定，完成增加或删除框架中冗余的代码，使前端代码标准化；
[0017]本发明基于JavaScript与canvas针对前端代码做规范化优化，提高前端代码质量，降低后期维护成本，标准化前端代码，基本命名模板可以使前端初学者熟悉页面命名规范，并对不规范的命名部分进行命名替换操作生成正确规范的命名，保证投入使用的代码规范。
附图说明
[0018]图1为本发明提出的一种基于Vue代码优化的JavaScript插件的框图示意图；[0019]图2为本发明提出的一种基于Vue代码优化的JavaScript插件的框图示意图；[0020]图3为本发明提出的一种基于Vue代码优化的JavaScript插件的文件识别模块的框图示意图。
具体实施方式
[0021]下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。[0022]参照图1‑3，本方案提供的一种实施例：一种基于Vue代码优化的JavaScript插件，包括一种基于Vue代码优化的JavaScript插件，包括启动模块、文件导入模块、文件识别模块、文件分析模块、文件处理模块与结果输出模块，启动模块与文件导入模块相连接，文件导入模块与文件识别模块相连接，文件识别模块与文件分析模块相连接，文件分析模块与文件处理模块相连接，文件处理模块与结果输出模块相连接。
[0023]本发明中，文件识别模块包含CSS文件单元、HTML文件单元与JS文件单元，CSS文件单元与HTML文件单元相连接，HTML文件单元与JS文件单元相连接。
[0024]一种基于Vue代码优化的JavaScript插件，包含以下步骤：
[0025]S1：启动本插件，导入待规范的HTML、CSS与JS文件，待规范的HTML、CSS与JS文件包括己开发完成的代码。
[0026]S2：运用递归算法对导入的待规范HTML文件从父级节点到子级节点对各级节点进行数组赋值，形成DOM节点，并存储各个分层节点被赋予的数组数据。JavaScript数组对象主要用于在单独的变量名中存储一系列的值，在一实施例中主要用于对各节点实现数据赋值并存储。
[0027]S3：各节点的被赋予的数组长度决定其节点分支，每一节点分支生成一节点坐标，canvas通过JavaScript来绘制的2D图形，逐像素进行渲染，主要用于绘制展示树状图，节点在树状图中坐标值由JavaScript获取的节点数据即各节点的被赋予的数组决定。数组的长度也决定所渲染出的树状图的形状，同时数组对象也完成树状图一对一命名赋值，根据JavaScript获取的数组对象的生成的坐标绘制不同的树状图，其中数组存储节点信息，数组对象即数组存储。
[0028]S4：通过JavaScript的replace操作，基于数据双向绑定，形成与HTML相应的CSS，JS文件中对应各节点的命名替换。
[0029]S5：导出代码命名规范的HTML、CSS与JS文件，保障HTML、CSS与JS文件的代码规范，方便后续操作。
[0030]本发明中，完整的JavaScript实现包含三个部分：ECMAScript、文档对象模型与字节顺序记号，该方法利用JavaScript完成主干工作。
[0031]以上，仅为本发明较佳的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，根据本发明的技术方案及其发明构思加以等同替换或改变，都应涵盖在本发明的保护范围之内。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。