如何修改min.js或者壓縮後的js，以便提高代碼的可讀性。

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

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

可前端開發工作中多多少少，會需要看別人的js代碼。可隨之而來的就是各種噩夢。eval,jsfuck,obfuscator等各種混淆方案就出來了。當然這種也在一定程度上保護了自己的代碼。可是對於閱讀者來說，簡直是天書。關於混淆，以及反混淆等空了再寫博客講解。不過最常見的還是簡化，簡化後的代碼，往往第一步處理起來是進行格式化，然後邊看邊修改。其中非常大的工作量是調整代碼結構。理清文件的結構邏輯。比如下麵的代碼。

1 function _createClass(t, e, a) {
2   return e && _defineProperties(t.prototype, e), a && _defineProperties(t, a), t
3 }

其實閱讀這個代碼有些複雜的，裡面既有邏輯運算，也有序列表達式，也有返回值。這個是否非常想處理為下麵的結構：

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 }

這種代碼結構就清晰多了。可是如何自動化處理那？手動修改一是慢，二是非常容易出錯，在著無法完成功能復用。遇到其他的代碼任然需要重新修改。比如這個時候又來了這樣一段代碼。

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, 不過最後的嵌套多層的三元運算，直接讓人崩潰。忽然就想到多年前同事說過的一句話，程式員何必為難程式員。玩笑歸玩笑，不過還是要積極的心態面對技術挑戰不是。

首先是變數聲明表達式，一次聲明瞭三個變數。這種寫法其實程式員是比較排斥的，非常想一行寫一個。

 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 }

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

寫一個js代碼美化工具，多麼具有挑戰性。起碼要懂編譯原理，程式的語義和語法。於是買了很多關於編譯原理的書。看幾本後就上手了。結果寫的80%以上了後，因為各種事情一直耽擱著。最近終於完成了大部分。感興趣的朋友可以看下。

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

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

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

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

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

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