挑戰(zhàn)極限之最短的JavaScript: 地址欄載入腳本
相信大家都在地址欄里用javascript:的形式執(zhí)行過(guò)腳本。這種方法簡(jiǎn)單實(shí)用，測(cè)試比較短的腳本時(shí)經(jīng)常用到。
不過(guò)腳本比較長(zhǎng)的時(shí)候，需要復(fù)制密密麻麻一大段到地址欄里，顯得很不美觀，而且腳本修改起來(lái)也很不容易。因此一般先把腳本寫(xiě)在單獨(dú)一個(gè)文件里，然后用javascript: 的形式動(dòng)態(tài)載入腳本到頁(yè)面中。不少網(wǎng)頁(yè)插件都是用這個(gè)方法載入。
平時(shí)，我們用最簡(jiǎn)單的代碼實(shí)現(xiàn)動(dòng)態(tài)載入：
- javascript:var o=document.createElement('script');o.src='...';document.body.appendChild(o);void(0)
當(dāng)然，這對(duì)于載入插件來(lái)說(shuō)足夠OK了。但是不久前看到一個(gè)稍有修改的方法，讓我開(kāi)始琢磨這段代碼究竟可以壓縮到多短!
他的代碼大致相同，只是更嚴(yán)謹(jǐn)：
- javascript:(function(o){o.src='...';document.body.appendChild(o)})(document.createElement('script'));void(0)
雖然代碼比先前的還長(zhǎng)，但是將變量置于閉包中，避免潛在的沖突。并且將 document.createElement作為閉包的參數(shù)，巧妙的節(jié)省了一個(gè)var單詞。
閑來(lái)無(wú)事，于是考慮起這代碼能否精簡(jiǎn)再精簡(jiǎn)。順便復(fù)習(xí)下js里面的各種特性。
當(dāng)然，首先默認(rèn)了幾個(gè)地址欄載入腳本要遵循的規(guī)則：
1. 不引入全局變量
2. 兼容主流瀏覽器
3. 載入過(guò)程不影響頁(yè)面
> 不影響全局變量，我們需要使用閉包來(lái)隱藏我們的私有變量;
> 兼容主流瀏覽器，就必須使用標(biāo)準(zhǔn)的方法，兼容性判斷只會(huì)增加代碼長(zhǎng)度;
> 如果簡(jiǎn)單的使用innerHTML添加元素，就有可能導(dǎo)致存在的元素刷新;
于是我們開(kāi)始逐步分析。
顯然，最先想到的就是匿名閉包的調(diào)用。
通常我們都是用： (function(){})() 的形式調(diào)用一個(gè)匿名閉包。注意紅色的優(yōu)先級(jí)括號(hào)是必不可缺的，否則就是一個(gè)錯(cuò)誤的語(yǔ)法。
但也可以使用另一種形式：+function(){}() 前面的+號(hào)可以換成-!~等等一元操作符。不過(guò)這僅僅是1字節(jié)之差。
另一個(gè)顯然的，就是可以把void(0)的參數(shù)替換成閉包調(diào)用的表達(dá)式。void雖然只是個(gè)關(guān)鍵字，但有類(lèi)似函數(shù)的功能，對(duì)于任何參數(shù)都返回undefined。如果沒(méi)有void，在地址欄執(zhí)行了javascript:后，頁(yè)面就變成了腳本表達(dá)式返回值，大家應(yīng)該都見(jiàn)過(guò)。
于是經(jīng)過(guò)顯而易見(jiàn)的觀察，略微減少了3個(gè)字符。
- javascript:void(+function(o){o.src='...';document.body.appendChild(o)}(document.createElement('script')))
不過(guò)上面都是淺層次的觀察?，F(xiàn)在我們來(lái)仔細(xì)的分析。
我們?yōu)槭裁匆褂瞄]包，就是為了防止我們的變量和頁(yè)面里的沖突。那么可以不使用變量嗎?想要不出現(xiàn)變量，唯一辦法就是使用鏈?zhǔn)降倪B等操作：利用上個(gè)操作的返回值作為下個(gè)操作的參數(shù)。這段代碼共有3個(gè)操作：創(chuàng)建腳本元素/腳本元素src賦值/添加腳本元素。仔細(xì)參考下W3C的手冊(cè)，DOM.appendChild不僅可以添加元素，并且返回值也是此元素。而src賦值和元素添加的順序可以互換。因此我們可以用鏈?zhǔn)讲僮?，從而徹底告別閉包和變量：
- javascript:void(document.body.appendChild(document.createElement('script')).src='...')
這一步，我們精簡(jiǎn)了19個(gè)字符!
我們繼續(xù)觀察。上面的代碼里出現(xiàn)了2個(gè)document。我們?nèi)绻靡粋€(gè)短變量代替的話(huà)又可以減少字?jǐn)?shù)。但使用了變量的話(huà)又會(huì)出現(xiàn)沖突的問(wèn)題，于是又要用到閉包。。。仔細(xì)的回憶下，js里有個(gè)我們平時(shí)不推薦使用的東西：with。沒(méi)錯(cuò)，使用他就可以解決這個(gè)問(wèn)題。我是只需with(document){...}即可。因?yàn)橹挥幸恍写a，所以那對(duì)大括號(hào)也可以去掉。于是又減少了4個(gè)字符：
- javascript:with(document)void(body.appendChild(createElement('script')).src='...')
值得注意的是，void不再套在最外層了，因?yàn)閣ith和if, for他們一樣，不再是表達(dá)式，而是語(yǔ)句了。
此時(shí)，代碼里的每句都是各司其責(zé)，連重復(fù)的單詞都找不到了。我們還能否再精簡(jiǎn)?如果硬要找，那也只得從void這家伙身上找了。如果去掉它，那地址欄執(zhí)行后，頁(yè)面就變成了腳本元素的src字符了。顯然刪不得。但我們可以嘗試換個(gè)，比如alert。在對(duì)話(huà)框過(guò)后，頁(yè)面仍保留著。
先前說(shuō)了，void的功能僅僅是返回一個(gè)undefined，而alert沒(méi)有返回值。這里就不得不說(shuō)javascript與其他語(yǔ)言的不同之處了。在其他的語(yǔ)言里，幾乎都有函數(shù)/過(guò)程這么兩概念，過(guò)程就是沒(méi)有返回值的函數(shù)。不過(guò)js可不同，在js里任何函數(shù)都有一個(gè)返回值，即使“ 沒(méi)有返回值 ”也是一種返回值，他就是undefined。所以alert和void有著相同的返回值：undefined。只要地址欄執(zhí)行后結(jié)果是它，頁(yè)面就不會(huì)轉(zhuǎn)跳，而其他諸如false,0,null,NaN等等都不行。
于是我們只需讓表達(dá)式返回的是undefined就可以了，但必須比void()這幾個(gè)字符短。要產(chǎn)生一個(gè)undefined，除了它字面常量外，另外就是調(diào)用沒(méi)有返回值的函數(shù)，或者訪(fǎng)問(wèn)一個(gè)對(duì)象不存在的屬性。我們要盡可能簡(jiǎn)短。如果頁(yè)面里使用了jQuery的話(huà)，我們用$.X就可以得到一個(gè)undefined。但沒(méi)用jq的話(huà)，就不能保證是否存在變量$了。既然找不到足夠簡(jiǎn)短的全局變量，我們可以用json創(chuàng)造個(gè)匿名的，比如[]或{}，然后訪(fǎng)問(wèn)他的不存在屬性，比如[].X。于是，我們可以告別void了：
- javascript:with(document)body.appendChild(createElement('script')).src='...';[].X
這樣就減少了1個(gè)字節(jié)。我們還可以合并下代碼，用表達(dá)式替換X：
- javascript:with(document)[][body.appendChild(createElement('script')).src='...']
這樣又減少了1個(gè)字節(jié)。
事實(shí)上，js里的任何一個(gè)變量都是繼承于Object的，即使數(shù)字也不例外。所以，我們完全可以用一個(gè)數(shù)字替換[]，這樣更進(jìn)一步減少1個(gè)字符：
- javascript:with(document)0[body.appendChild(createElement('script')).src='...']
到此，代碼里除了src字符外，縮短到76字節(jié)。
當(dāng)然，最終的極限仍在探索中。。。
配合Google的短域名服務(wù)Google URL Shortener，我們可以縮短腳本的URL，例如：
- javascript:with(document)0[body.appendChild(createElement('script')).src='http://goo.gl/QPp29']
原文：http://www.cnblogs.com/index-html/archive/2011/10/08/fav_load_js_min.html
【編輯推薦】
