最短的javascript:地址欄載入腳本代碼_javascript技巧

　　平時，我們用最簡單的代碼實現(xiàn)動態(tài)載入：
代碼如下:
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作為閉包的參數(shù)，巧妙的節(jié)省了一個var單詞。
　　閑來無事，于是考慮起這代碼能否精簡再精簡。順便復習下js里面的各種特性。
　當然，首先默認了幾個地址欄載入腳本要遵循的規(guī)則：
　　1. 不引入全局變量
　　2. 兼容主流瀏覽器
　　3. 載入過程不影響頁面
　　> 不影響全局變量，我們需要使用閉包來隱藏我們的私有變量；
　　> 兼容主流瀏覽器，就必須使用標準的方法，兼容性判斷只會增加代碼長度；
　　> 如果簡單的使用innerHTML添加元素，就有可能導致存在的元素刷新；
　　于是我們開始逐步分析。
　　顯然，最先想到的就是匿名閉包的調用。
　　通常我們都是用： (function(){})() 的形式調用一個匿名閉包。注意紅色的優(yōu)先級括號是必不可缺的，否則就是一個錯誤的語法。
　　但也可以使用另一種形式：+function(){}()　前面的+號可以換成-!~等等一元操作符。不過這僅僅是1字節(jié)之差。

　　另一個顯然的，就是可以把void(0)的參數(shù)替換成閉包調用的表達式。void雖然只是個關鍵字，但有類似函數(shù)的功能，對于任何參數(shù)都返回undefined。如果沒有void，在地址欄執(zhí)行了javascript:后，頁面就變成了腳本表達式返回值，大家應該都見過。
　　
　　于是經(jīng)過顯而易見的觀察，略微減少了3個字符。
代碼如下:
javascript:void(+function(o){o.src='...';document.body.appendChild(o)}(document.createElement('script')))

　　不過上面都是淺層次的觀察。現(xiàn)在我們來仔細的分析。
　　
　　我們?yōu)槭裁匆褂瞄]包，就是為了防止我們的變量和頁面里的沖突。那么可以不使用變量嗎？想要不出現(xiàn)變量，唯一辦法就是使用鏈式的連等操作：利用上個操作的返回值作為下個操作的參數(shù)。這段代碼共有3個操作：創(chuàng)建腳本元素/腳本元素src賦值/添加腳本元素。仔細參考下W3C的手冊，DOM.appendChild不僅可以添加元素，并且返回值也是此元素。而src賦值和元素添加的順序可以互換。因此我們可以用鏈式操作，從而徹底告別閉包和變量：
代碼如下:
javascript:void(document.body.appendChild(document.createElement('script')).src='...')

　　這一步，我們精簡了19個字符！
　　
　　我們繼續(xù)觀察。上面的代碼里出現(xiàn)了2個document。我們如果用一個短變量代替的話又可以減少字數(shù)。但使用了變量的話又會出現(xiàn)沖突的問題，于是又要用到閉包。。仔細的回憶下，js里有個我們平時不推薦使用的東西：with。沒錯，使用他就可以解決這個問題。我是只需with(document){...}即可。因為只有一行代碼，所以那對大括號也可以去掉。于是又減少了4個字符：
代碼如下:
javascript:with(document)void(body.appendChild(createElement('script')).src='...')

　　值得注意的是，void不再套在最外層了，因為with和if, for他們一樣，不再是表達式，而是語句了。
　　
　　此時，代碼里的每句都是各司其責，連重復的單詞都找不到了。我們還能否再精簡？如果硬要找，那也只得從void這家伙身上找了。如果去掉它，那地址欄執(zhí)行后，頁面就變成了腳本元素的src字符了。顯然刪不得。但我們可以嘗試換個，比如alert。在對話框過后，頁面仍保留著。
　　先前說了，void的功能僅僅是返回一個undefined，而alert沒有返回值。這里就不得不說javascript與其他語言的不同之處了。在其他的語言里，幾乎都有函數(shù)/過程這么兩概念，過程就是沒有返回值的函數(shù)。不過js可不同，在js里任何函數(shù)都有一個返回值，即使“ 沒有返回值 ”也是一種返回值，他就是undefined。所以alert和void有著相同的返回值：undefined。只要地址欄執(zhí)行后結果是它，頁面就不會轉跳，而其他諸如false,0,null,NaN等等都不行。
　　
　　于是我們只需讓表達式返回的是undefined就可以了，但必須比void()這幾個字符短。要產生一個undefined，除了它字面常量外，另外就是調用沒有返回值的函數(shù)，或者訪問一個對象不存在的屬性。我們要盡可能簡短。如果頁面里使用了jQuery的話，我們用$.X就可以得到一個undefined。但沒用jq的話，就不能保證是否存在變量$了。既然找不到足夠簡短的全局變量，我們可以用json創(chuàng)造個匿名的，比如[]或{}，然后訪問他的不存在屬性，比如[].X。于是，我們可以告別void了：
代碼如下:
javascript:with(document)body.appendChild(createElement('script')).src='...';[].X

　　這樣就減少了1個字節(jié)。我們還可以合并下代碼，用表達式替換X：
代碼如下:
javascript:with(document)[][body.appendChild(createElement('script')).src='...']

　　這樣又減少了1個字節(jié)。
　　
　　事實上，js里的任何一個變量都是繼承于Object的，即使數(shù)字也不例外。所以，我們完全可以用一個數(shù)字替換[]，這樣更進一步減少1個字符：
代碼如下:
javascript:with(document)0[body.appendChild(createElement('script')).src='...']

　　到此，代碼里除了src字符外，縮短到76字節(jié)。
　　
　　當然，最終的極限仍在探索中。。
　　
　　配合Google的短域名服務Google URL Shortener，我們可以縮短腳本的URL，例如：
代碼如下:
javascript:with(document)0[body.appendChild(createElement('script')).src='http://goo.gl/QPp29']

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com