最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

毫无排版和缩进的 JavaScript 代码,怎么阅读?-H5教程

来源:http://erdangjiade.com/topic/133603.html H5程序员 2017-10-27 12:55浏览(53)

比如这个页面(static.zhihu.com/static),还有很多都跟这个一样,找到源代码页面想看看页面是怎么实现的,无奈毫无排版和缩进,看起来一头雾水啊,这种页面的js代码要怎样阅读?还是我获取源代码的方法本来就是错的?望解答。

回复内容:

打开chrome,打开一个页面,比如目前这个页面吧 zhihu.com/question/2019
按Ctrl+shift+I 打开开发者工具,点Scripts选项卡。
下面有一个图标为两个花括号的按钮{},鼠标放上去提示是pretty print,点一下,js代码就有换行了。

其他浏览器都有类似的开发者工具。试试吧。~ jsbeautifier.org/ 至于阅读,淘宝之前可以看到源代码的,现在也只有生产环境能看到了。

你可以找作者索取。或者看一些开源的代码 uglifyjs -b 赞同@天祁,可以用jsbeautifier.org/在线格式化代码。不过作用不是很大,因为很多线上产品即使格式化了也没法看,比如你说的这个链接,是经过goog closure compiler压缩过的, advance模式。
只是偶尔用来格式化下压缩的代码方便调试,或者看一些很短的代码片段才会用这个方法。 这是压缩后的产品代码。

开发环境的代码绝不会是这个样子的。

不然也太搞笑了。 这个显然是发布代码,会去掉注释,变量名都是用abcd之类的代替而非有意义的词,提高效率,减少网络传输。最好能找到开发代码,这个就算有缩进和换行,所有的变量都是不知道干嘛的魔法变量,只能猜,读起来很空难哎 Sublime Text里有个插件JsFormat,可以格式化Js代码。
比如开始时这样:
JsFormat后JsFormat后
先排版和缩进再阅读.
编辑器比如 Sublime Text 2 可以用包管理直接安装插件调用进行排版
github.com/jdc0589/JsFo
当然在线版本更好
不济的话找个模块找 REPL 里面加载模块把文件办了 Online JavaScript beautifier DW或VS都有格式化功能
1 2