CN107632831B - 快速规范前端代码的方法及装置 - Google Patents

快速规范前端代码的方法及装置 Download PDF

Info

Publication number
CN107632831B
CN107632831B CN201710865715.7A CN201710865715A CN107632831B CN 107632831 B CN107632831 B CN 107632831B CN 201710865715 A CN201710865715 A CN 201710865715A CN 107632831 B CN107632831 B CN 107632831B
Authority
CN
China
Prior art keywords
node
naming
javascript
html
data
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201710865715.7A
Other languages
English (en)
Other versions
CN107632831A (zh
Inventor
李艳萍
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Xiamen Jiwei Technology Co ltd
Original Assignee
Xiamen Jiwei Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Xiamen Jiwei Technology Co ltd filed Critical Xiamen Jiwei Technology Co ltd
Priority to CN201710865715.7A priority Critical patent/CN107632831B/zh
Publication of CN107632831A publication Critical patent/CN107632831A/zh
Application granted granted Critical
Publication of CN107632831B publication Critical patent/CN107632831B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Landscapes

  • Stored Programmes (AREA)
  • Devices For Executing Special Programs (AREA)
  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)

Abstract

一种快速规范前端代码的方法及装置，该方法包括：通过javascript获取html文件的DOM节点，并存储各个分层节点数据；基于各节点数据计算各节点坐标并通过canvas绘制节点树状图；调用基础命名模板对节点树状图中各节点实现一级命名规范；基于各节点对应的可编辑label同步修改各节点的二级命名；通过javascript的replace()操作，基于数据双向绑定，完成与html相应的css，js文件中对应各节点的命名替换。

Description

快速规范前端代码的方法及装置
技术领域
本发明涉及互联网技术领域，更具体地涉及一种快速规范前端代码的方法及装置。
背景技术
为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，
公司要求前端人员规范前端代码，前端人员开发前需要熟悉公司要求的前端开发规范，但是通读规范并执行需要耗费时间成本，对已开发完成的代码，需要手动一一修改，工程浩大，耗费时间过长。如何帮助前端人员快速熟悉规范，生成规范代码，确保线上代码规范性是当前亟需解决的问题。
发明内容
鉴于现有方案存在的问题，为了克服上述现有技术方案的不足，本发明提出了一种快速规范前端代码的方法及装置。
根据本发明的一个方面，提供一种快速规范前端代码的方法，包括：通过javascript获取html文件的DOM节点，并存储各个分层节点数据；基于各节点数据计算各节点坐标并通过canvas绘制节点树状图；调用基础命名模板对节点树状图中各节点实现一级命名规范；基于各节点对应的可编辑label同步修改各节点的二级命名；通过javascript的replace()操作，基于数据双向绑定，完成与html相应的css，js文件中对应各节点的命名替换。
在一些实施例中，通过javascript获取html文件的DOM节点包括：
运用递归算法从父级节点到子级节点对各级节点进行数组赋值。
在一些实施例中，基于各节点数据计算各节点坐标包括：
各节点的数组长度决定其节点分支，每一节点分支生成一节点坐标。
在一些实施例中，所述基础命名模板通过javascript完成前端命名库编写，并整合补充当前使用的命名规则来设定。
在一些实施例中，所述replace()操作用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
在一些实施例中，所述数据双向绑定在javascript pubsub模式下实现，利用数据特性来为html代码进行绑定，所有被绑定在一起的css，js和DOM订阅一个pubsub对象。
在一些实施例中，在通过javascript获取html文件的DOM节点之前还包括：导入待规范的html、css、js文件。
在一些实施例中，在通过javascript的replace()操作，基于数据双向绑定，完成与html相应的css，js文件中对应各节点的命名替换之后还包括：导出代码命名规范的html、css、js文件。
在一些实施例中，在通过javascript获取html文件的DOM节点之前还包括：导入待规范的html文件；以及在基于各节点对应的可编辑label同步修改各节点的二级命名之后还包括：导入待规范的css、js文件。
根据本发明的另一个方面，提供一种快速规范前端代码的装置，包括：DOM节点获取模块，通过javascript获取html文件的DOM节点，并存储各个分层节点数据；节点树状图生成模块，基于各节点数据计算各节点坐标并通过canvas绘制节点树状图；一级命名规范模块，调用基础命名模板对节点树状图中各节点实现一级命名规范；二级命名规范模块，基于各节点对应的可编辑label同步修改各节点的二级命名；同步命名规范模块，通过javascript的replace()操作，基于数据双向绑定，完成与html相应的css，js文件中对应各节点的命名替换。
从上述技术方案可以看出，本发明具有至少以下有益效果：
基于javascript与canvas针对前端代码做规范化优化，提高前端代码质量，降低后期维护成本，专业化前端代码。
基本命名模板可以使前端初学者熟悉页面命名规范，并对不规范的命名部分进行命名替换操作生成正确规范的命名，保证投入使用的代码规范。
附图说明
图1为本发明一实施例中快速规范前端代码的方法的流程图；
图2为本发明一实施例在javascript pubsub模式下数据双向绑定的示意图；
图3为本发明另一实施例中快速规范前端代码的装置的结构框图。
具体实施方式
本发明某些实施例于后方将参照所附附图做更全面性地描述，其中一些但并非全部的实施例将被示出。实际上，本发明的各种实施例可以许多不同形式实现，而不应被解释为限于此数所阐述的实施例；相对地，提供这些实施例使得本发明满足适用的法律要求。
在本说明书中，下述用于描述本发明原理的各种实施例只是说明，不应该以任何方式解释为限制发明的范围。参照附图的下述描述用于帮助全面理解由权利要求及其等同物限定的本发明的示例性实施例。下述描述包括多种具体细节来帮助理解，但这些细节应认为仅仅是示例性的。因此，本领域普通技术人员应认识到，在不悖离本发明的范围和精神的情况下，可以对本文中描述的实施例进行多种改变和修改。此外，为了清楚和简洁起见，省略了公知功能和结构的描述。此外，贯穿附图，相同附图标记用于相似功能和操作。
为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明进一步详细说明。
本发明实施例提供了一种快速规范前端代码的方法，针对前端代码做规范化优化，提高前端代码质量，降低后期维护成本，专业化前端代码，该方法以javascript为基础，利用javascript基于对象和事件驱动完成工具开发。javascript是一种广泛用于客户端web开发的脚本语言，常用来给html网页添加动态功能，比如响应用户的各种操作。javascript也用于其他场合，如服务器端编程。完整的javascript实现包含三个部分：ECMAscript，文档对象模型，字节顺序记号。该方法利用javascript完成主干工作，如节点获取，数据同步。
图1示出了一实施例中快速规范前端代码的方法的流程图，如附图1所示，快速规范前端代码的方法包括以下具体步骤：
步骤S101：导入待规范的html、css、js文件；
其中，待规范的html、css、js文件包括已开发完成的代码，该代码中包括大量不规范的代码。
步骤S102：通过javascript获取html文件的DOM节点，并存储各个分层节点数据；
具体地，运用递归算法对导入的待规范html文件从父级节点到子级节点对各级节点进行数组赋值，形成DOM节点，并存储各个分层节点被赋予的数组数据。javascript数组对象主要用于在单独的变量名中存储一系列的值，在一实施例中主要用于对各节点实现数据赋值并存储。
步骤S103：基于各节点数据计算各节点坐标并通过canvas绘制节点树状图。
具体地，各节点的被赋予的数组长度决定其节点分支，每一节点分支生成一节点坐标，canvas通过javascript来绘制的2D图形，逐像素进行渲染，主要用于绘制展示树状图，节点在树状图中坐标值由JavaScript获取的节点数据即各节点的被赋予的数组决定。数组的长度也决定所渲染出的树状图的形状，同时数组对象也完成树状图一对一命名赋值，根据JavaScript获取的数组对象的生成的坐标绘制不同的树状图，其中数组存储节点信息，数组对象即数组存储的信息。
步骤S104：调用基础命名模板对节点树状图中各节点实现一级命名规范。
具体地，基础命名模板通过javascript完成前端命名库编写，并整合补充当前使用的命名规则来设定，工具配备基本的上中下、左中右等布局的前端命名模板，设置基础模板选项用以更快的匹配节点主命名减少工作量，基础命名模板可以调用前端命名库中的前端命名模板。在树状图完成后调用基础模板实现一级命名的一对一初始替换，规范树状图中各节点的一级命名，例如为常规class。
步骤S105：基于各节点对应的可编辑label同步修改各节点的二级命名；
具体地，在canvas画布中各个DOM节点对应的树状图中的节点的位置进行二级命名修改。
步骤S106：通过javascript的replace()操作，基于数据双向绑定，完成与html相应的css，js文件中对应各节点的命名替换。
所述replace()操作用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串，在该实施例的方法中主要实现除html文件的其他文件的字符串替换，完成文件的命名替换工作
所述数据双向绑定在javascript pubsub模式下实现，图2示出了在javascriptpubsub模式下数据双向绑定的示意图，如图2所示，利用数据特性来为html代码进行绑定，所有被绑定在一起的JavaScript对象，例如css，js，和DOM元素订阅一个pubsub对象。只要JavaScript对象或者一个HTML输入元素，例如为DOM节点命名，监听到数据的变化时，就会触发绑定到PubSub对象上的事件，从而其他绑定的对象和元素都会做出相应的变化。
步骤S107：导出代码命名规范的html、css、js文件。
导出代码命名规范的html、css、js文件，保障html、css、js文件的代码规范，方便后续操作。
在其他变形实施例中，也可以在步骤S101中仅导入html文件，待步骤S105完成后，在导入css、js文件。
本发明另一实施例提供一种快速规范前端代码的装置，图3示出了本发明另一实施例中快速规范前端代码的装置的结构框图。如图3所示，快速规范前端代码的装置100包括：文件导入模块10、DOM节点获取模块20、节点树状图生成模块30、一级命名规范模块40、二级命名规范模块50、同步命名规范模块60及文件导出模块70。
文件导入模块10用于导入待规范的html、css、js文件；
其中，待规范的html、css、js文件包括已开发完成的代码，该代码中包括大量不规范的代码。
DOM节点获取模块20通过javascript获取html文件的DOM节点，并存储各个分层节点数据；
具体地，运用递归算法对导入的待规范html文件从父级节点到子级节点对各级节点进行数组赋值，形成DOM节点，并存储各个分层节点被赋予的数组数据。javascript数组对象主要用于在单独的变量名中存储一系列的值，在一实施例中主要用于对各节点实现数据赋值并存储。
节点树状图生成模块30基于各节点数据计算各节点坐标并通过canvas绘制节点树状图。
具体地，各节点的被赋予的数组长度决定其节点分支，每一节点分支生成一节点坐标，canvas通过javascript来绘制的2D图形，逐像素进行渲染，主要用于绘制展示树状图，节点在树状图中坐标值由JavaScript获取的节点数据即各节点的被赋予的数组决定。数组的长度也决定所渲染出的树状图的形状，同时数组对象也完成树状图一对一命名赋值，根据JavaScript获取的数组对象的生成的坐标绘制不同的树状图，其中数组存储节点信息，数组对象即数组存储的信息。
一级命名规范模块40调用基础命名模板对节点树状图中各节点实现一级命名规范。
具体地，基础命名模板通过javascript完成前端命名库编写，并整合补充当前使用的命名规则来设定，工具配备基本的上中下、左中右等布局的前端命名模板，设置基础模板选项用以更快的匹配节点主命名减少工作量，基础命名模板可以调用前端命名库中的前端命名模板。在树状图完成后调用基础模板实现一级命名的一对一初始替换，规范树状图中各节点的一级命名，例如为常规class。
二级命名规范模块50基于各节点对应的可编辑label同步修改各节点的二级命名；
具体地，在canvas画布中各个DOM节点对应的树状图中的节点的位置进行二级命名修改。
同步命名规范模块60通过javascript的replace()操作，基于数据双向绑定，完成与html相应的css，js文件中对应各节点的命名替换。
所述replace()操作用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串，在该实施例的方法中主要实现除html文件的其他文件的字符串替换，完成文件的命名替换工作
所述数据双向绑定在javascript pubsub模式下实现，图2示出了在javascriptpubsub模式下数据双向绑定的示意图，如图2所示，利用数据特性来为html代码进行绑定，所有被绑定在一起的JavaScript对象，例如css，js，和DOM元素订阅一个pubsub对象。只要JavaScript对象或者一个HTML输入元素，例如为DOM节点命名，监听到数据的变化时，就会触发绑定到PubSub对象上的事件，从而其他绑定的对象和元素都会做出相应的变化。
文件导出模块70导出代码命名规范的html、css、js文件。
导出代码命名规范的html、css、js文件，保障html、css、js文件的代码规范，方便后续操作。
前面的附图中所描绘的进程或方法可通过包括硬件(例如，电路、专用逻辑等)、固件、软件(例如，被承载在非瞬态计算机可读介质上的软件)，或两者的组合的处理逻辑来执行。虽然上文按照某些顺序操作描述了进程或方法，但是，应该理解，所描述的某些操作能以不同顺序来执行。此外，可并行地而非顺序地执行一些操作。
需要说明的是，在附图或说明书正文中，未绘示或描述的实现方式，均为所属技术领域中普通技术人员所知的形式，并未进行详细说明。此外，上述对各元件和方法的定义并不仅限于实施例中提到的各种具体结构、形状或方式，本领域普通技术人员可对其进行简单地更改或替换。
以上所述的具体实施例，对本发明的目的、技术方案和有益效果进行了进一步详细说明，应理解的是，以上所述仅为本发明的具体实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种快速规范前端代码的方法，其中，包括：
通过javascript获取html文件的DOM节点，并存储各个分层节点数据；
基于各节点数据计算各节点坐标并通过canvas绘制节点树状图；
调用基础命名模板对节点树状图中各节点实现一级命名规范；
基于各节点对应的可编辑label同步修改各节点的二级命名；
通过javascript的replace()操作，基于数据双向绑定，完成与html相应的css，js文件中对应各节点的命名替换。
2.根据权利要求1所述的快速规范前端代码的方法，其中，通过javascript获取html文件的DOM节点包括：
运用递归算法从父级节点到子级节点对各级节点进行数组赋值。
3.根据权利要求1所述的快速规范前端代码的方法，其中，基于各节点数据计算各节点坐标包括：
各节点的数组长度决定其节点分支，每一节点分支生成一节点坐标。
4.根据权利要求1所述的快速规范前端代码的方法，其中，所述基础命名模板通过javascript完成前端命名库编写，并整合补充当前使用的命名规则来设定。
5.根据权利要求1所述的快速规范前端代码的方法，其中，所述replace()操作用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
6.根据权利要求1所述的快速规范前端代码的方法，其中，所述数据双向绑定在javascript pubsub模式下实现，利用数据特性来为html代码进行绑定，所有被绑定在一起的css，js和DOM订阅一个pubsub对象。
7.根据权利要求1所述的快速规范前端代码的方法，其中，在通过javascript获取html文件的DOM节点之前还包括：
导入待规范的html、css、js文件。
8.根据权利要求1所述的快速规范前端代码的方法，其中，在通过javascript的replace()操作，基于数据双向绑定，完成与html相应的css，js文件中对应各节点的命名替换之后还包括：
导出代码命名规范的html、css、js文件。
9.根据权利要求1所述的快速规范前端代码的方法，其中，在通过javascript获取html文件的DOM节点之前还包括：导入待规范的html文件；以及
在基于各节点对应的可编辑label同步修改各节点的二级命名之后还包括：导入待规范的css、js文件。
10.一种快速规范前端代码的装置，其中，包括：
DOM节点获取模块，通过javascript获取html文件的DOM节点，并存储各个分层节点数据；
节点树状图生成模块，基于各节点数据计算各节点坐标并通过canvas绘制节点树状图；
一级命名规范模块，调用基础命名模板对节点树状图中各节点实现一级命名规范；
二级命名规范模块，基于各节点对应的可编辑label同步修改各节点的二级命名；
同步命名规范模块，通过javascript的replace()操作，基于数据双向绑定，完成与html相应的css，js文件中对应各节点的命名替换。
CN201710865715.7A 2017-09-22 2017-09-22 快速规范前端代码的方法及装置 Active CN107632831B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710865715.7A CN107632831B (zh) 2017-09-22 2017-09-22 快速规范前端代码的方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710865715.7A CN107632831B (zh) 2017-09-22 2017-09-22 快速规范前端代码的方法及装置

Publications (2)

Publication Number Publication Date
CN107632831A CN107632831A (zh) 2018-01-26
CN107632831B true CN107632831B (zh) 2020-07-31

Family

ID=61102337

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710865715.7A Active CN107632831B (zh) 2017-09-22 2017-09-22 快速规范前端代码的方法及装置

Country Status (1)

Country Link
CN (1) CN107632831B (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112732643B (zh) * 2021-04-01 2021-07-20 南京国睿信维软件有限公司 流程图图形文件数据与s1000d标准xml格式数据的相互转换方法
CN113031940A (zh) * 2021-04-29 2021-06-25 武汉夜莺科技有限公司 前端框架开发方法、装置及终端设备

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7516397B2 (en) * 2004-07-28 2009-04-07 International Business Machines Corporation Methods, apparatus and computer programs for characterizing web resources
US10540416B2 (en) * 2011-06-23 2020-01-21 Microsoft Technology Licensing, Llc Linking source code to running element
CN103678118B (zh) * 2013-10-18 2016-09-28 北京奇虎测腾科技有限公司 一种Java源代码的合规性检测方法和装置
CN104268353B (zh) * 2014-10-10 2017-05-31 中国农业银行股份有限公司 一种规范检测方法及装置
CN106951399B (zh) * 2017-03-23 2020-05-19 北京捷成世纪科技股份有限公司 一种快速生成onix标准文件的方法及装置

Also Published As

Publication number Publication date
CN107632831A (zh) 2018-01-26

Similar Documents

Publication Publication Date Title
CN104461484B (zh) 前端模板的实现方法和装置
CN107918666B (zh) 一种区块链上的数据同步方法和系统
CN105447099A (zh) 日志结构化信息提取方法及装置
US9152619B2 (en) System and method for constructing markup language templates and input data structure specifications
CN110941427B (zh) 代码生成方法及代码生成器
CN104035754A (zh) 一种基于xml的自定义代码生成方法及生成器
JP2019133621A (ja) Ａｐｉドキュメンテーションの収集
US9141596B2 (en) System and method for processing markup language templates from partial input data
CN110262783B (zh) 一种接口生成方法、装置及终端设备
CN104572577B (zh) 数学公式处理方法及装置
CN113051285A (zh) Sql语句的转换方法、系统、设备及存储介质
CN113609820A (zh) 基于可扩展标记语言文件生成word文件的方法、装置及设备
CN103823793A (zh) 基于Excel模板的动态报表实现方法
CN107632831B (zh) 快速规范前端代码的方法及装置
CN105069116A (zh) 一种将json串转化为数组的方法及系统
WO2011069903A1 (en) Method and system for on-line editing electronic documents
CN104268163A (zh) 一种网管网元配置界面的实现方法及系统
CN109683881B (zh) 一种代码格式调整方法及装置
CN104793933A (zh) 一种终端数据展现方法和系统
CN106383734A (zh) 一种从代码中提取详细设计的方法
CN110716913B (zh) 一种Kafka与Elasticsearch数据库数据的互相迁移方法
CN110531968B (zh) 一种自动抽离web前端功能代码生成独立模板的方法
CN112199626A (zh) 基于dsl布局引擎的动态表单生成方法
CN110738202A (zh) 字符识别方法、装置及计算机可读存储介质
JP2008052356A (ja) ソースコード自動生成装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant