UglifyJS-- 對你的js做了什麼

來源:互聯網
上載者:User

標籤:row   for   cal   結合   變數   函數名   ons   void   fine   

也不是閑著沒事去看壓縮代碼,但今天調試自己代碼的時候發現有點意思。因為是自己寫的,雖然壓縮了,格式化之後還是很好辨認。當然作為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 }

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

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

UglifyJS-- 對你的js做了什麼

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.