日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷(xiāo)解決方案
前端的自動(dòng)化重構(gòu)

過(guò)去，我一直想著抽時(shí)間寫(xiě)一個(gè)小的前端工具，以對(duì)代碼進(jìn)行自動(dòng)化的重構(gòu)。但是呢，經(jīng)過(guò)我再三的考慮，我暫時(shí)取消了這個(gè)打算 —— 主要是沒(méi)時(shí)間。(PS：人生長(zhǎng)樂(lè)，寫(xiě)個(gè) Charj) 但是呢，我打算寫(xiě)一篇文章記錄一下相關(guān)的思路。

創(chuàng)新互聯(lián)是一家專業(yè)提供炎陵企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、H5建站、小程序制作等業(yè)務(wù)。10年已為炎陵眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站制作公司優(yōu)惠進(jìn)行中。

原因依據(jù)很多：

  1. 大部分國(guó)內(nèi)的公司使用的都是 Vue，template、script、style 都耦合在一起;
  2. 大量的前端項(xiàng)目都是輕邏輯，不具有復(fù)雜的業(yè)務(wù)場(chǎng)景
  3. 前端系統(tǒng)被重寫(xiě)的頻率太快了
  4. JavaSript 語(yǔ)法太靈活，而 TypeScript 還未普及
  5. ……

簡(jiǎn)單來(lái)說(shuō)，在缺乏復(fù)雜場(chǎng)景的情況下，我不太想去寫(xiě)這樣的工具。

如何構(gòu)建前端自動(dòng)化重構(gòu)工具?

在我之前寫(xiě)的那篇『重構(gòu)的自動(dòng)化』中，介紹了如何去做這樣的工具：

  1. 構(gòu)建特定語(yǔ)言的語(yǔ)法解析器。
  2. 設(shè)定代碼壞味道的內(nèi)容及標(biāo)準(zhǔn)。
  3. 針對(duì)于每一項(xiàng)壞味道，編寫(xiě)識(shí)別代碼。
  4. 編寫(xiě)代碼壞味道的建議改進(jìn)和實(shí)施代碼。
  5. 實(shí)現(xiàn)壞味道的自動(dòng)化重構(gòu)。

以 Vue 為例，這個(gè)過(guò)程便是：

  1. 尋找適用于 Vue 的 AST 生成工具。如 eslint-vue-parser
  2. 尋找和編寫(xiě)適用于 Vue 編碼的相關(guān)規(guī)范。
  3. 對(duì)應(yīng)規(guī)范尋找代碼中的問(wèn)題。
  4. 針對(duì)該問(wèn)題尋找改進(jìn)點(diǎn)
  5. 實(shí)現(xiàn)自動(dòng)化重構(gòu)

讓我們來(lái)看個(gè)簡(jiǎn)單的示例，如我們的代碼規(guī)范中，針對(duì)于組件庫(kù)強(qiáng)制規(guī)范了一定要寫(xiě) scoped。而我們有大量的組件都沒(méi)有相應(yīng)的實(shí)踐。這個(gè)時(shí)候，就可以通過(guò)這種方式來(lái)處理。分析中代碼中不帶 scoped 的 style，然后自動(dòng)添加：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.  
    3.

添加的模式其實(shí)也比較簡(jiǎn)單：

  1. 解析后，AST 將帶有標(biāo)簽等等的位置信息。
  2. 針對(duì)所有相關(guān)類型的文件進(jìn)行識(shí)別，記錄所需要重構(gòu)的相關(guān)信息。file、 location、 changed、 length。
  3. 反向遍歷所有的待修改處，讀取對(duì)應(yīng)的文件，對(duì)應(yīng)的位置，進(jìn)行修改。
  4. 保存文件。
  5. 再次運(yùn)行。

嗯，就是這么簡(jiǎn)單。

配套工具

根據(jù)我先前的一些調(diào)研，我整理了一些相關(guān)的資料，歡迎大家去玩。

JavaScript

如果只是針對(duì)于簡(jiǎn)單的 JavaScript 重構(gòu)來(lái)說(shuō)，我們可以考慮使用 jscodeshift 這一類的工具。jscodeshift 是一個(gè)工具包，用于在多個(gè) JavaScript 或TypeScript 文件上運(yùn)行 codemods(自動(dòng)代碼修改)。

當(dāng)然了，如果你不嫌麻煩的話，還可以使用類似的工具：

Source Esprima 4.0.1 UglifyJS2 Traceur Acorn 8.0.4 Shift Shift (no early errors)
jQuery.Mobile 1.4.2149.6 ±1.8%170.7 ±1.2%178.2 ±6.0%214.4 ±13.0%429.5 ±13.5%203.9 ±9.6%
Angular 1.2.5125.0 ±2.8%138.2 ±2.9%134.5 ±2.3%113.8 ±2.8%251.5 ±1.3%147.1 ±1.5%
React 0.13.3127.2 ±1.0%158.2 ±1.4%160.0 ±0.8%128.5 ±2.8%310.8 ±2.7%182.6 ±2.7%
Total401.8 ms467.0 ms472.7 ms456.7 ms991.9 ms533.5 ms

嗯，原理都是相似的。

TypeScript

官方提供了 AST 解析。

從我的之前寫(xiě)的前端架構(gòu)守護(hù)工具：https://github.com/phodal/dilay，你就可以看到相似的代碼。

CSS

針對(duì)于 CSS 重構(gòu)來(lái)說(shuō)，相似的工具有：https://github.com/csstree/csstree

不過(guò)，我們建議你們使用 Lemonj(使用 Antlr 進(jìn)行語(yǔ)法樹(shù)解析)：https://github.com/twfe/lemonj

框架特定

針對(duì)于 Angular，官方提供了 Angular Schematics，除了自動(dòng)代碼修改，還可以做各種自動(dòng)化升級(jí)工作。

針對(duì)于 Vue，官方也有類似的工具：https://github.com/vuejs/vue-codemod

針對(duì)于 React，官方也有工具：https://github.com/reactjs/react-codemod

結(jié)合 CLI 工具

當(dāng)我們修改完代碼之后，下一步要做的事情就是修改文件，這里推薦一下： schematics-utilities，雖然是 Angular 上下游的工具，但是它不限于框架。

有了這個(gè)工具，我們就可以快速修改代碼，如：

 
 
 
 
    
  
  
  
  
  1. recorder = tree.beginUpdate(path); 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. recorder 
    4. 
  
  
  
  
  4. .remove(start, length) 
    5. 
  
  
  
  
  5. .insertLeft(start, value); 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. tree.commitUpdate(recorder); 
    8.

這些都大同小異，沒(méi)有什么特別之處。

總結(jié)

嗯，人生苦短，一定要花 1 小時(shí)寫(xiě)個(gè)工具，解決 10 分鐘能完成的事情。

本文轉(zhuǎn)載自微信公眾號(hào)「phodal」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系phodal公眾號(hào)。


文章名稱：前端的自動(dòng)化重構(gòu)
文章路徑：http://m.5511xx.com/article/djegeeh.html