[發明專利]快速規范前端代碼的方法及裝置

有效

• 申請號: 201710865715.7
• 申請日: 2017-09-22
• 公開（公告）號: CN107632831B
• 公開（公告）日: 2020-07-31
• 發明（設計）人: 李艷萍
• 申請（專利權）人: 廈門集微科技有限公司
• 主分類號: G06F8/41
• 分類號: G06F8/41
• 代理公司: 中科專利商標代理有限責任公司 11021
• 代理人: 方丁一

一種快速規范前端代碼的方法及裝置，該方法包括：通過javascript獲取html文件的DOM節點，并存儲各個分層節點數據；基于各節點數據計算各節點坐標并通過canvas繪制節點樹狀圖；調用基礎命名模板對節點樹狀圖中各節點實現一級命名規范；基于各節點對應的可編輯label同步修改各節點的二級命名；通過javascript的replace()操作，基于數據雙向綁定，完成與html相應的css，js文件中對應各節點的命名替換。

技術領域

本發明涉及互聯網技術領域，更具體地涉及一種快速規范前端代碼的方法及裝置。

背景技術

為提高團隊協作效率，便于后臺人員添加功能及前端后期優化維護，輸出高質量的文檔，

公司要求前端人員規范前端代碼，前端人員開發前需要熟悉公司要求的前端開發規范，但是通讀規范并執行需要耗費時間成本，對已開發完成的代碼，需要手動一一修改，工程浩大，耗費時間過長。如何幫助前端人員快速熟悉規范，生成規范代碼，確保線上代碼規范性是當前亟需解決的問題。

發明內容

鑒于現有方案存在的問題，為了克服上述現有技術方案的不足，本發明提出了一種快速規范前端代碼的方法及裝置。

根據本發明的一個方面，提供一種快速規范前端代碼的方法，包括：通過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文件。