用最短的javascript實現位址列載入指令碼

　　相信大家都在位址列裡用javascript:的形式執行過指令碼。這種方法簡單實用，測試比較短的指令碼時經常用到。並且可以新增到收藏夾裡，隨時點選呼叫。

 

　　不過指令碼比較長的時候，需要複製密密麻麻一大段到位址列裡，顯得很不美觀，而且指令碼修改起來也很不容易。因此一般先把指令碼寫在單獨一個檔案裡，然後用javascript: 的形式動態載入指令碼到頁面中。不少網頁外掛都是用這個方法載入。

 

　　平時，我們用最簡單的程式碼實現動態載入：

javascript:var o=document.createElement('script');o.src='...';document.body.appendChild(o);void(0)

　　當然，這對於載入外掛來說足夠OK了。但是不久前看到一個稍有修改的方法，讓我開始琢磨這段程式碼究竟可以壓縮到多短！

 

　　他的程式碼大致相同，只是更嚴謹： 

javascript:(function(o){o.src='...';document.body.appendChild(o)})(document.createElement('script'));void(0)

　　雖然程式碼比先前的還長，但是將變數置於函式內部，避免潛在的衝突。並且將  document.createElement作為函式的引數，巧妙的節省了一個var單詞。

　　閒來無事，於是考慮起這程式碼能否精簡再精簡。順便複習下js裡面的各種特性。

　　

　　當然，首先預設了幾個位址列載入指令碼要遵循的規則：

　　1. 不引入全域性變數

　　2. 相容主流瀏覽器

　　3. 載入過程不影響頁面 

　　

　　> 不影響全域性變數，我們需要使用匿名函式來隱藏我們的私有變數；

　　> 相容主流瀏覽器，就必須使用標準的方法，相容性判斷只會增加程式碼長度；

　　> 如果簡單的使用innerHTML新增元素，就有可能導致存在的元素重新整理；

　　

　　於是我們開始逐步分析。

　　顯然，最先想到的就是匿名函式的呼叫。

　　通常我們都是用：  (function(){})()  的形式呼叫一個匿名函式。注意紅色的優先順序括號是必不可缺的，否則就是一個錯誤的語法。

　　但也可以使用另一種形式：+function(){}()　前面的+號可以換成-!~等等一元運算子。不過這僅僅是1位元組之差。

 

　　另一個顯然的，就是可以把void(0)的引數替換成函式呼叫的表示式。void雖然只是個關鍵字，但有類似函式的功能，對於任何引數都返回undefined。如果沒有void，在位址列執行了javascript:後，頁面就變成了指令碼表示式返回值，大家應該都見過。

　　 

　　於是經過顯而易見的觀察，略微減少了3個字元。

javascript:void(+function(o){o.src='...';document.body.appendChild(o)}(document.createElement('script')))

　　

　　不過上面都是淺層次的觀察。現在我們來仔細的分析。

　　 

　　我們為什麼要使用函式，就是為了防止我們的變數和頁面裡的衝突。那麼可以不使用變數嗎？想要不出現變數，唯一辦法就是使用鏈式的連等操作：利用上個操作的返回值作為下個操作的引數。這段程式碼共有3個操作：建立指令碼元素/指令碼元素src賦值/新增指令碼元素。仔細參考下W3C的手冊，DOM.appendChild不僅可以新增元素，並且返回值也是此元素。而src賦值和元素新增的順序可以互換。因此我們可以用鏈式操作，從而徹底告別函式和變數：

javascript:void(document.body.appendChild(document.createElement('script')).src='...')

　　這一步，我們精簡了19個字元！
　　

　　我們繼續觀察。上面的程式碼裡出現了2個document。我們如果用一個短變數代替的話又可以減少字數。但使用了變數的話又會出現衝突的問題，於是又要用到匿名函式。。。仔細的回憶下，js裡有個我們平時不推薦使用的東西：with。沒錯，使用他就可以解決這個問題。我是隻需with(document){...}即可。因為只有一行程式碼，所以那對大括號也可以去掉。於是又減少了4個字元：

javascript:with(document)void(body.appendChild(createElement('script')).src='...')

　　值得注意的是，void不再套在最外層了，因為with和if, for他們一樣，不再是表示式，而是語句了。

　　

　　此時，程式碼裡的每句都是各司其責，連重複的單詞都找不到了。我們還能否再精簡？如果硬要找，那也只得從void這傢伙身上找。如果去掉它，那位址列執行後，頁面就變成了指令碼元素的src字元了。顯然刪不得。但我們可以嘗試換個，比如alert。在對話方塊過後，頁面仍保留著。

　　先前說了，void的功能僅僅是返回一個undefined，而alert沒有返回值。這裡就不得不說javascript與其他語言的不同之處。在其他的語言裡，幾乎都有函式/過程這麼兩概念，過程就是沒有返回值的函式。不過js可不同，在js裡任何函式都有一個返回值，即使“ 沒有返回值 ”也是一種返回值，他就是undefined。所以alert和void有著相同的返回值：undefined。只要位址列執行後結果是它，頁面就不會轉跳，而其他諸如 false, 0, null, NaN 等等都不行。

　　

　　於是我們只需讓表示式返回的是undefined就可以，但必須比void()這幾個字元短。要產生一個 undefined，除了它字面常量外，另外就是呼叫沒有返回值的函式，或者訪問一個物件不存在的屬性。我們要儘可能簡短。如果頁面裡使用了 jQuery 的話，我們用$.X就可以得到一個 undefined。但沒用jq的話，就不能保證是否存在變數$了。既然找不到足夠簡短的全域性變數，我們可以用json創造個匿名的，比如[]或{}，然後訪問他的不存在屬性，比如[].X。於是，我們可以告別 void：

javascript:with(document)body.appendChild(createElement('script')).src='...';[].X

　　
　　這樣就減少了1個字元。我們還可以合併下程式碼，用表示式替換X：

javascript:with(document)[][body.appendChild(createElement('script')).src='...']

　　這樣又減少了3個字元。
　　

　　事實上，js裡的任何一個變數都是繼承於Object的，即使數字也不例外。所以，我們完全可以用一個數字替換[]，這樣更進一步減少1個字元：

javascript:with(document)0[body.appendChild(createElement('script')).src='...']

　　到此，程式碼裡除了src字元外，縮短到76位元組。

　　

　　當然，最終的極限仍在探索中。。。

　　 

　　配合新浪微博的短域名服務，我們可以縮短指令碼的URL，例如：

javascript:with(document)0[body.appendChild(createElement('script')).src='']