【挑戰極限】最短的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添加元素,就有可能導致存在的元素刷新;

 

  

 

  於是我們開始逐步分析。www.aiwalls.com

 

  顯然,最先想到的就是匿名閉包的調用。

 

  通常我們都是用:  (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='…']  這樣又減少瞭1個字節。

  

 

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

 

javascript:with(document)0[body.appendChild(createElement('script')).src='…']  到此,代碼裡除瞭src字符外,縮短到76字節。

 

  

 

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

 

  

 

  配合Google的短域名服務Google URL Shortener,我們可以縮短腳本的URL,例如:

 

javascript:with(document)0[body.appendChild(createElement('script')).src='https://goo.gl/QPp29']

摘自:EtherDream の 原創空間

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *