UglifyJS-- 对你的js做了什么

也不是闲着没事去看压缩代码,但今天调试自己代码的时候发现有点意思。因为是自己写的,虽然压缩了,格式化之后还是很好辨认。当然作为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");
      }

这样蛮不错的。同理:

if(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
 }

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

以上只是独自对比自己的代码发现的一些东西,有的可以在平时的编码中用起来,当然不是追求所有代码都写成一行,这样可读性比较差,另外可能你下次看压缩代码就不那么费劲了。欢迎补充。

时间: 2024-10-08 22:14:26

UglifyJS-- 对你的js做了什么的相关文章

用js做登录的用户名判定

<script type="text/javascript" language="javascript" src="JS/jquery.js"></script>    <script language="javascript" type="text/javascript">      $(document).ready(function() {            

[3] 用D3.js做一个简单的图表吧!

本人的个人博客为: www.ourd3js.com csdn博客为: blog.csdn.net/lzhlzz 转载请注明出处,谢谢. 前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为可缩放矢量图形(Scalable Vector Graphics),SVG 使用 XML 格式定义图像,不清楚什么是SVG的朋友请先在 w3cschools 学习下

socket.io+angular.js+express.js做个聊天应用(三)

接着前面博客文章socket.io+angular.js+express.js做个聊天应用(二) 首先开发之前先介绍下bower.它是用来管理前端类库的(详细介绍,安装可看http://blog.csdn.net/edagarli/article/details/26359535) [email protected]:~/projects/nodejs/chattingnode$ bower Usage: bower <command> [<args>] [<options&

django Forgienkey字段 在前台用js做处理

在我做的项目中有个选择省城市的选项,这两个字段的关系是一对多的关系class Province(models.Model): # 省会      name = models.CharField(max_length=30) class City(models.Model): #城市      name = models.CharField(max_length=30)       province = models.ForeignKey(Province) 前台代码:<html><hea

java--css+js做的树形菜单(完整版)

jsp页面: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":"

socket.io+angular.js+express.js做个聊天应用(一)

node,express开发环境等安装假设已经搞好了. [email protected]:~/projects/nodejs$ express -e chattingnode create : chattingnode create : chattingnode/package.json create : chattingnode/app.js create : chattingnode/public create : chattingnode/public/javascripts creat

socket.io+angular.js+express.js做个聊天应用(二)

接着上一篇 我用的开发工具是sublime 打开之前创建的工程. 打开www 修改并添加代码 #!/usr/bin/env node var debug = require('debug')('my-application'); var app = require('../app'); var io=require("socket.io").listen(app.listen(app.get('port'))); app.set('port', process.env.PORT ||

使用Netty4和socket.js做IM客服坐席平台系统架构

本人最近想做一个 使用Netty4和socket.js做IM客服坐席平台,以前没这方面的实际经验.这里自己实现了一套架构,这里记录下,希望有大师看到帮指点指点: 一张图说出我的心生: IM消息数据持久化准备使用mongdb,其他业务数据用mysql

Json数据如果作为配置文件比较难读懂,XML文件作为配置文件有先天的优势,容易读懂和配置,因此不考虑效率时,在页面中宁可用XML文件作为配置文件再用JS做一次转化把XML转成JSON使用

比如如下相对比较复杂的XML <myobjects> <!--object 1--> <myobject> <id>yourID_1</id> <name>your name</name> <description> <![CDATA[Merck Biologics Pilot Plant ]]> </description> <locations> <location

JS做一个四则运算计算器

用JS做一个简单的网页计算器如上图所示,只进行简单的加减乘除运算 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>计数器</title></head><body>    <input type="text" name="text"