0

0

有趣的UglifyJS

php中世界最好的语言

php中世界最好的语言

发布时间:2018-03-16 10:53:13

|

2398人浏览过

|

来源于php中文网

原创

这次给大家带来有趣的uglifyjs,使用uglifyjs的注意事项有哪些,下面就是实战案例,一起来看一下。

也不是闲着没事去看压缩代码,但今天调试自己代码的时候发现有点意思。因为是自己写的,虽然压缩了,格式化之后还是很好辨认。当然作为min的首要准则不是可读性,而是精简。那么它会尽量的缩短代码,尽量的保持一行,最大化的减少的空白。我们常用的分号都会被替换成了逗号,短句变成了连贯的长句。

1.立即执行函数

我本是第二种写法,uglify给我替换成了第一种(当然更短一点)。其实括号和!号的作用都是将funtion的部分转成一个表达式,而不再是申明。这样就能立即执行,同理~   +都可以做到。

2.变量名替换

这个是自然的,函数名、参数名、变量名都替换成了单个字母。甚至是‘_’

3.函数置顶

function foo (){} 这种形式的代码都会被放到模块的最顶端。当然这是一种规范,后来发现还有另外一个作用就是方便后面的代码合并。 比如 我们这样定义:

var self=this;function a(){}
self.a=a;function b(){}
self.b=b;return self;

会替换成:

function a(){}function b(){}var s={}return  s.a={},s.b={},s

注意到最后的s 不能漏了,return会以最后一个表达式的结果为准。

  function rt(n) {    return n;
   }  function xx() {      return rt(1), rt(2);
  }

执行xx()得到的是2,如果 rt(2)后面还有个不返回值的函数执行,那么xx()会得到undefined。

4.bool值替换

false-->!1  true-->!0

5.if 

if语句是压缩最多的地方。

1) return 前置:

 function load() {            if (t) {
                x = false;
                log("error");                return;
            }
            console.log("22")
        }

比如我的原函数大概是这样。压缩后成了这样:

  if (t) return x =!1,void log("error")

return提前了,末尾多了一个void。 这是为什么呢。 没有大括号,if的四段代码变成了一句话。void的在这里的作用是抹掉函数的返回值。因为本来的这个if 是没有返回值的 。如果这个时候log方法带有返回值。那么调用load就会拿到这个返回值。这会产生干扰,违背了原函数的本意。所以用void抹掉了。 

2) 短路

     function foo() {            if (!x) {                return;
            }
            console.log("doA");
            console.log("doB");
  }

压缩后:

    function f() {
            x || console.log("doA"), console.log("doB");
      }

这样蛮不错的。同理:

(x&&y){
 doa();
 dob(); 
}
 doc();  
 -->    x&&y&&(doa(),dob()),doc()

原本四行变成了一行代码。

3).为了合并一行,这也行:

    console.log("doA");
    console.log("doB");     if (x>0) {
         console.log("true");
      }

合并成这样:

 if (console.log("doA"), console.log("doB"), x > 0) console.log("true");

平时这么写可能不太友好,重点是在if语句中,最后一句才是判断句。结合之前的return。想必对逗号语句有了深刻的认识。

4)throw也不放过

 if (errMsg) {
       util.triggerCallback(fail, "模型验证错误");       throw Error(errMsg);
  }

压缩后:

 if (a)  throw x.triggerCallback(o, "模型验证错误"), Error(a)

调换了语句的顺序,把throw看成return 就明白了。

5) if else

这个会替换成三元表达式  a?b:c 。

6.数字处理

整百整千的会处理成科学计数 1000 -->1e3 。

7. while

var offset = 0;            while (true) {                if (offset >= bufferLength) {                    break;
                }
}

会替换成这样:

  for (var n = 0; ; ) {                if (n >= K)                    break
 }

确实不错,节省了一行代码。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

Supermeme
Supermeme

Supermeme是一个AI驱动的Meme生成器,可以快速生成有趣的Meme梗图

下载

让JS自动匹配出proto Js的方法

h5做出网页录音功能

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

65

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

43

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

35

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

41

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

204

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

9

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

8

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

3

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.2万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 1.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号