前端的js上線的時候一般會使用打包工具處理（webpack,gulp，ugly.js 等）。這樣做有幾點作用。

1. 可以壓縮空間，提高頁面響應(yīng)速度
2. 一定程度上可以保護(hù)自己的代碼安全，防止別人清晰看懂邏輯或者拷貝代碼。
3. 提高別人閱讀自己代碼的門檻

可前端開發(fā)工作中多多少少，會需要看別人的js代碼。可隨之而來的就是各種噩夢。eval,jsfuck,obfuscator等各種混淆方案就出來了。當(dāng)然這種也在一定程度上保護(hù)了自己的代碼?？墒菍τ陂喿x者來說，簡直是天書。關(guān)于混淆，以及反混淆等空了再寫博客講解。不過最常見的還是簡化，簡化后的代碼，往往第一步處理起來是進(jìn)行格式化，然后邊看邊修改。其中非常大的工作量是調(diào)整代碼結(jié)構(gòu)。理清文件的結(jié)構(gòu)邏輯。比如下面的代碼。

1 function _createClass(t, e, a) {

2   return e && _defineProperties(t.prototype, e), a && _defineProperties(t, a), t

3 }

其實閱讀這個代碼有些復(fù)雜的，里面既有邏輯運(yùn)算，也有序列表達(dá)式，也有返回值。這個是否非常想處理為下面的結(jié)構(gòu)：

1 function _createClass(t, e, a) {

2     if (e) {

3         _defineProperties(t.prototype, e);

4     }

5     if (a) {

6         _defineProperties(t, a);

7     }

8     return t;

9 }

這種代碼結(jié)構(gòu)就清晰多了?？墒侨绾巫詣踊幚砟?？手動修改一是慢，二是非常容易出錯，在著無法完成功能復(fù)用。遇到其他的代碼任然需要重新修改。比如這個時候又來了這樣一段代碼。

1 function m(t) {

2   var e = this.data.get("items"),

3     a = this.data.get("loop"),

4     n = e.length;

5   t < 0 ? a ? this.data.set("activeIndex", n - 1) : this.data.set("activeIndex", 0) : t >= n ? a ? this.data.set("activeIndex", 0) : this.data.set("activeIndex", n - 1) : this.data.set("activeIndex", t)

6 }

首先一行定義了多個變量，變量的名稱真想重新命名一下，把e重命名為items，a重命名為loop, 不過最后的嵌套多層的三元運(yùn)算，直接讓人崩潰。忽然就想到多年前同事說過的一句話，程序員何必為難程序員。玩笑歸玩笑，不過還是要積極的心態(tài)面對技術(shù)挑戰(zhàn)不是。

首先是變量聲明表達(dá)式，一次聲明了三個變量。這種寫法其實程序員是比較排斥的，非常想一行寫一個。

 1 function m(offset) {

 2     var items = this.data.get("items");

 3     var loop = this.data.get("loop");

 4     var length = items.length;

 5     if (offset < 0) {

 6         if (loop) {

 7             this.data.set("activeIndex", length - 1);

 8         } else {

 9             this.data.set("activeIndex", 0);

10         }

11     } else {

12         if (offset >= length) {

13             if (loop) {

14                 this.data.set("activeIndex", 0);

15             } else {

16                 this.data.set("activeIndex", length - 1);

17             }

18         } else {

19             this.data.set("activeIndex", offset);

20         }

21     };

22 }

上面的代碼就好看多了，基本的邏輯也可以看懂了。當(dāng)時就想有沒有工具可以做這個，或者如何利用現(xiàn)在的gpt工具去美化一下那。后檢索了大量的資料，使用過市面的各種工具，發(fā)現(xiàn)還是自己寫比較合適。gpt美化后，會有明顯的代碼邏輯錯誤。更重要的是有輸入限制。

寫一個js代碼美化工具，多么具有挑戰(zhàn)性。起碼要懂編譯原理，程序的語義和語法。于是買了很多關(guān)于編譯原理的書?？磶妆竞缶蜕鲜至?。結(jié)果寫的80%以上了后，因為各種事情一直耽擱著。最近終于完成了大部分。感興趣的朋友可以看下。

https://www.dejs.vip/javascript/beautify   (目前仍有部分bug并且無法100%還原代碼的)

function justAFunction(){console.info("test");}

上面的代碼簡化后可能變成：

1 function a(){console.info("test");}

如果僅從代碼中是無法推斷出原來函數(shù)的名字的。不過可以根據(jù)文中語義去判定。但是大多時候，你是無法判定的。代碼邏輯分析中加入人工智能或者使用代碼庫比對，有可能可以做到。不過這種復(fù)雜的程度過高了。

這個工具也許是前端，逆向或者爬蟲工作者的一個福音。也或許會給代碼持有者帶來不安或者擔(dān)憂。如何判定工具，留給使用者自行判定吧。

總結(jié)

以上是生活随笔為你收集整理的如何修改min.js或者压缩后的js，以便提高代码的可读性。的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。