如何修改min.js或者压缩后的js，以便提高代码的可读性。

抛开一切努力去做

前端的js上线的时候一般会使用打包工具处理（webpack,gulp，ugly.js 等）。这样做有几点作用。

• 可以压缩空间，提高页面响应速度
  
• 一定程度上可以保护自己的代码安全，防止别人清晰看懂逻辑或者拷贝代码。
  
• 提高别人阅读自己代码的门槛
  

可前端开发工作中多多少少，会需要看别人的js代码。可随之而来的就是各种噩梦。eval,jsfuck,obfuscator等各种混淆方案就出来了。当然这种也在一定程度上保护了自己的代码。可是对于阅读者来说，简直是天书。关于混淆，以及反混淆等空了再写博客讲解。不过最常见的还是简化，简化后的代码，往往第一步处理起来是进行格式化，然后边看边修改。其中非常大的工作量是调整代码结构。理清文件的结构逻辑。比如下面的代码。

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

复制代码

其实阅读这个代码有些复杂的，里面既有逻辑运算，也有序列表达式，也有返回值。这个是否非常想处理为下面的结构：

1. 1 function _createClass(t, e, a) {
2. 2     if (e) {
3. 3         _defineProperties(t.prototype, e);
4. 4     }
5. 5     if (a) {
6. 6         _defineProperties(t, a);
7. 7     }
8. 8     return t;
9. 9 }

复制代码

这种代码结构就清晰多了。可是如何自动化处理那？手动修改一是慢，二是非常容易出错，在着无法完成功能复用。遇到其他的代码任然需要重新修改。比如这个时候又来了这样一段代码。

1. 1 function m(t) {
2. 2   var e = this.data.get("items"),
3. 3     a = this.data.get("loop"),
4. 4     n = e.length;
5. 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. 6 }

复制代码

首先一行定义了多个变量，变量的名称真想重新命名一下，把e重命名为items，a重命名为loop, 不过最后的嵌套多层的三元运算，直接让人崩溃。忽然就想到多年前同事说过的一句话，程序员何必为难程序员。玩笑归玩笑，不过还是要积极的心态面对技术挑战不是。
首先是变量声明表达式，一次声明了三个变量。这种写法其实程序员是比较排斥的，非常想一行写一个。

1. 1 function m(offset) {
2. 2     var items = this.data.get("items");
3. 3     var loop = this.data.get("loop");
4. 4     var length = items.length;
5. 5     if (offset < 0) {
6. 6         if (loop) {
7. 7             this.data.set("activeIndex", length - 1);
8. 8         } else {
9. 9             this.data.set("activeIndex", 0);
10. 10         }
11. 11     } else {
12. 12         if (offset >= length) {
13. 13             if (loop) {
14. 14                 this.data.set("activeIndex", 0);
15. 15             } else {
16. 16                 this.data.set("activeIndex", length - 1);
17. 17             }
18. 18         } else {
19. 19             this.data.set("activeIndex", offset);
20. 20         }
21. 21     };
22. 22 }

复制代码

上面的代码就好看多了，基本的逻辑也可以看懂了。当时就想有没有工具可以做这个，或者如何利用现在的gpt工具去美化一下那。后检索了大量的资料，使用过市面的各种工具，发现还是自己写比较合适。gpt美化后，会有明显的代码逻辑错误。更重要的是有输入限制。
 
写一个js代码美化工具，多么具有挑战性。起码要懂编译原理，程序的语义和语法。于是买了很多关于编译原理的书。看几本后就上手了。结果写的80%以上了后，因为各种事情一直耽搁着。最近终于完成了大部分。感兴趣的朋友可以看下。
https://www.dejs.vip/javascript/beautify   (目前仍有部分bug并且无法100%还原代码的)

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

复制代码

上面的代码简化后可能变成：

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

复制代码

如果仅从代码中是无法推断出原来函数的名字的。不过可以根据文中语义去判定。但是大多时候，你是无法判定的。代码逻辑分析中加入人工智能或者使用代码库比对，有可能可以做到。不过这种复杂的程度过高了。
 
这个工具也许是前端，逆向或者爬虫工作者的一个福音。也或许会给代码持有者带来不安或者担忧。如何判定工具，留给使用者自行判定吧。
 

来源:https://www.cnblogs.com/kali2021/p/17660889.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！