UglifyJS——對你的js做了什麼

也不是閑著沒事去看壓縮代碼，但今天調試自己代碼的時候發現有點意思。因為是自己寫的，雖然壓縮了，格式化之後還是很好辨認。當然作為min的首要準則不是可讀性，而是精簡。那麼它會盡量的縮短代碼，盡量的保持一行，最大化的減少的空白。我們常用的分號都會被替換成了逗號，短句變成了連貫的長句。

我本是第二種寫法，uglify給我替換成了第一種(當然更短一點)。其實括弧和!號的作用都是將funtion的部分轉成一個表達式，而不再是申明。這樣就能立即執行，同理~ +都可以做到。

2.變數名替換

這個是自然的，函數名、參數名、變數名都替換成了單個字母。甚至是『_』

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。

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 。

整百整千的會處理成科學計數 1000 -->1e3 。

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

會替換成這樣：

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

確實不錯，節省了一行代碼。

以上只是獨自對比自己的代碼發現的一些東西，有的可以在平時的編碼中用起來，當然不是追求所有代碼都寫成一行，這樣可讀性比較差，另外可能你下次看壓縮代碼就不那麼費勁了。歡迎補充。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！