[发明专利]一种基于Vue代码优化的JavaScript插件

说明书

本发明公开了一种基于Vue代码优化的JavaScript插件，涉及互联网技术领域，针对前端人员开发前需要熟悉公司要求的前端开发规范，虽然目前主流的前端代码框架多为Vue，但是通读规范并执行需要耗费时间成本，对己开发完成的代码，需要手动一一修改，工程较大，耗费时间过长的问题，现提出如下方案，包括包括启动模块、文件导入模块、文件识别模块、文件分析模块、文件处理模块与结果输出模块。本发明基于JavaScript与canvas针对前端代码做规范化优化，提高前端代码质量，降低后期维护成本，标准化前端代码，基本命名模板可以使前端初学者熟悉页面命名规范，并对不规范的命名部分进行命名替换操作生成正确规范的命名，保证投入使用的代码规范。

技术领域

本发明涉及互联网技术领域，尤其涉及一种基于Vue代码优化的JavaScript插件。

背景技术

Vue是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用,Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合,另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用(SPA)提供驱动。JavaScript(简称“JS”)是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式，为提高团队的协作效率，所以亟需一种基于Vue代码优化的JavaScript插件。

但是，前端人员开发前需要熟悉公司要求的前端开发规范，虽然目前主流的前端代码框架多为Vue，但是通读规范并执行需要耗费时间成本，对己开发完成的代码，需要手动一一修改，工程较大，耗费时间过长。

发明内容

本发明的目的是为了解决前端人员开发前需要熟悉公司要求的前端开发规范，虽然目前主流的前端代码框架多为Vue，但是通读规范并执行需要耗费时间成本，对己开发完成的代码，需要手动一一修改，工程较大，耗费时间过长的缺点，而提出的一种基于Vue代码优化的JavaScript插件。

为了实现上述目的，本发明采用了如下技术方案：

一种基于Vue代码优化的JavaScript插件，包括启动模块、文件导入模块、文件识别模块、文件分析模块、文件处理模块与结果输出模块，所述启动模块与所述文件导入模块相连接，所述文件导入模块与所述文件识别模块相连接，所述文件识别模块与所述文件分析模块相连接，所述文件分析模块与所述文件处理模块相连接，所述文件处理模块与所述结果输出模块相连接。

优选的，所述文件识别模块包含CSS文件单元、HTML文件单元与JS文件单元，所述CSS文件单元与所述HTML文件单元相连接，所述HTML文件单元与所述JS文件单元相连接。

一种基于Vue代码优化的JavaScript插件，包含以下步骤：

S1：启动本插件，导入待规范的HTML、CSS与JS文件，待规范的HTML、CSS与JS文件包括己开发完成的代码。

S2：运用递归算法对导入的待规范HTML文件从父级节点到子级节点对各级节点进行数组赋值，形成DOM节点，并存储各个分层节点被赋予的数组数据。JavaScript数组对象主要用于在单独的变量名中存储一系列的值，在一实施例中主要用于对各节点实现数据赋值并存储。

S3：各节点的被赋予的数组长度决定其节点分支，每一节点分支生成一节点坐标，canvas通过JavaScript来绘制的2D图形，逐像素进行渲染，主要用于绘制展示树状图，节点在树状图中坐标值由JavaScript获取的节点数据即各节点的被赋予的数组决定。数组的长度也决定所渲染出的树状图的形状，同时数组对象也完成树状图一对一命名赋值，根据JavaScript获取的数组对象的生成的坐标绘制不同的树状图，其中数组存储节点信息，数组对象即数组存储。