最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

 更新時間:2011年10月13日 16:49:30   投稿:mdxy-dxy  
相信大家都在地址欄里用javascript:的形式執(zhí)行過腳本。這種方法簡單實用,測試比較短的腳本時經(jīng)常用到

不過腳本比較長的時候,需要復(fù)制密密麻麻一大段到地址欄里,顯得很不美觀,而且腳本修改起來也很不容易。因此一般先把腳本寫在單獨一個文件里,然后用javascript: 的形式動態(tài)載入腳本到頁面中。不少網(wǎng)頁插件都是用這個方法載入。

  平時,我們用最簡單的代碼實現(xiàn)動態(tài)載入:

復(fù)制代碼 代碼如下:

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

  當(dāng)然,這對于載入插件來說足夠OK了。但是不久前看到一個稍有修改的方法,讓我開始琢磨這段代碼究竟可以壓縮到多短!
  他的代碼大致相同,只是更嚴(yán)謹(jǐn):

復(fù)制代碼 代碼如下:

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

  雖然代碼比先前的還長,但是將變量置于閉包中,避免潛在的沖突。并且將 document.createElement作為閉包的參數(shù),巧妙的節(jié)省了一個var單詞。

  閑來無事,于是考慮起這代碼能否精簡再精簡。順便復(fù)習(xí)下js里面的各種特性。
 當(dāng)然,首先默認(rèn)了幾個地址欄載入腳本要遵循的規(guī)則:

  1. 不引入全局變量
  2. 兼容主流瀏覽器
  3. 載入過程不影響頁面
  > 不影響全局變量,我們需要使用閉包來隱藏我們的私有變量;
  > 兼容主流瀏覽器,就必須使用標(biāo)準(zhǔn)的方法,兼容性判斷只會增加代碼長度;
  > 如果簡單的使用innerHTML添加元素,就有可能導(dǎo)致存在的元素刷新;

  于是我們開始逐步分析。
  顯然,最先想到的就是匿名閉包的調(diào)用。
  通常我們都是用: (function(){})() 的形式調(diào)用一個匿名閉包。注意紅色的優(yōu)先級括號是必不可缺的,否則就是一個錯誤的語法。
  但也可以使用另一種形式:+function(){}() 前面的+號可以換成-!~等等一元操作符。不過這僅僅是1字節(jié)之差。

  另一個顯然的,就是可以把void(0)的參數(shù)替換成閉包調(diào)用的表達(dá)式。void雖然只是個關(guān)鍵字,但有類似函數(shù)的功能,對于任何參數(shù)都返回undefined。如果沒有void,在地址欄執(zhí)行了javascript:后,頁面就變成了腳本表達(dá)式返回值,大家應(yīng)該都見過。
  
  于是經(jīng)過顯而易見的觀察,略微減少了3個字符。

復(fù)制代碼 代碼如下:

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

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

復(fù)制代碼 代碼如下:

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

  這一步,我們精簡了19個字符!

  我們繼續(xù)觀察。上面的代碼里出現(xiàn)了2個document。我們?nèi)绻靡粋€短變量代替的話又可以減少字?jǐn)?shù)。但使用了變量的話又會出現(xiàn)沖突的問題,于是又要用到閉包。。。仔細(xì)的回憶下,js里有個我們平時不推薦使用的東西:with。沒錯,使用他就可以解決這個問題。我是只需with(document){...}即可。因為只有一行代碼,所以那對大括號也可以去掉。于是又減少了4個字符:

復(fù)制代碼 代碼如下:

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

  值得注意的是,void不再套在最外層了,因為with和if, for他們一樣,不再是表達(dá)式,而是語句了。
  
  此時,代碼里的每句都是各司其責(zé),連重復(fù)的單詞都找不到了。我們還能否再精簡?如果硬要找,那也只得從void這家伙身上找了。如果去掉它,那地址欄執(zhí)行后,頁面就變成了腳本元素的src字符了。顯然刪不得。但我們可以嘗試換個,比如alert。在對話框過后,頁面仍保留著。

  先前說了,void的功能僅僅是返回一個undefined,而alert沒有返回值。這里就不得不說javascript與其他語言的不同之處了。在其他的語言里,幾乎都有函數(shù)/過程這么兩概念,過程就是沒有返回值的函數(shù)。不過js可不同,在js里任何函數(shù)都有一個返回值,即使“ 沒有返回值 ”也是一種返回值,他就是undefined。所以alert和void有著相同的返回值:undefined。只要地址欄執(zhí)行后結(jié)果是它,頁面就不會轉(zhuǎn)跳,而其他諸如false,0,null,NaN等等都不行。

  于是我們只需讓表達(dá)式返回的是undefined就可以了,但必須比void()這幾個字符短。要產(chǎn)生一個undefined,除了它字面常量外,另外就是調(diào)用沒有返回值的函數(shù),或者訪問一個對象不存在的屬性。我們要盡可能簡短。如果頁面里使用了jQuery的話,我們用$.X就可以得到一個undefined。但沒用jq的話,就不能保證是否存在變量$了。既然找不到足夠簡短的全局變量,我們可以用json創(chuàng)造個匿名的,比如[]或{},然后訪問他的不存在屬性,比如[].X。于是,我們可以告別void了:

 

復(fù)制代碼 代碼如下:

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

  這樣就減少了1個字節(jié)。我們還可以合并下代碼,用表達(dá)式替換X:

復(fù)制代碼 代碼如下:

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

  這樣又減少了1個字節(jié)。

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

復(fù)制代碼 代碼如下:

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

  到此,代碼里除了src字符外,縮短到76字節(jié)。
  
  當(dāng)然,最終的極限仍在探索中。。。
  
  配合Google的短域名服務(wù)Google URL Shortener,我們可以縮短腳本的URL,例如:

復(fù)制代碼 代碼如下:

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

相關(guān)文章

  • JavaScript使用performance實現(xiàn)查看內(nèi)存

    JavaScript使用performance實現(xiàn)查看內(nèi)存

    這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用performance實現(xiàn)查看內(nèi)存,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-03-03
  • JavaScript中的值是按值傳遞還是按引用傳遞問題探討

    JavaScript中的值是按值傳遞還是按引用傳遞問題探討

    這篇文章主要介紹了JavaScript中的值是按值傳遞還是按引用傳遞問題探討,本文講解了按值傳遞、按引用傳遞、按共享傳遞、基本類型的不可變(immutable)性質(zhì)等內(nèi)容,需要的朋友可以參考下
    2015-01-01
  • JS+DIV+CSS實現(xiàn)的經(jīng)典標(biāo)簽切換效果代碼

    JS+DIV+CSS實現(xiàn)的經(jīng)典標(biāo)簽切換效果代碼

    這篇文章主要介紹了JS+DIV+CSS實現(xiàn)的經(jīng)典標(biāo)簽切換效果代碼,涉及JavaScript基于鼠標(biāo)事件針對頁面元素動態(tài)變換的實現(xiàn)技巧,頁面美觀實用,需要的朋友可以參考下
    2015-09-09
  • Bootstrap每天必學(xué)之滾動監(jiān)聽

    Bootstrap每天必學(xué)之滾動監(jiān)聽

    Bootstrap每天必學(xué)之滾動監(jiān)聽,對Bootstrap滾動監(jiān)聽感興趣的小伙伴們可以參考一下
    2016-03-03
  • 微信小程序?qū)崿F(xiàn)彈出菜單功能

    微信小程序?qū)崿F(xiàn)彈出菜單功能

    最近做項目需要這樣的需求,當(dāng)用戶點擊標(biāo)簽欄按鈕,向下彈出菜單,再次點擊,收回菜單。接下來通過本文給大家介紹微信小程序?qū)崿F(xiàn)彈出菜單功能,感興趣的朋友一起看看吧
    2018-06-06
  • js和canvas繪制圓形金屬質(zhì)感特效

    js和canvas繪制圓形金屬質(zhì)感特效

    在JavaScript中,可以使用HTML5提供的Canvas元素來進(jìn)行繪圖操作,要使用canvas元素,瀏覽器必須支持html5,Canvas是一個HTML元素,可以通過JavaScript來操作和繪制圖形,本文示例實現(xiàn)js和canvas繪制圓形金屬質(zhì)感的詩詞高級排版特效
    2024-09-09
  • JavaScript實現(xiàn)自動生成帶水印的圖片

    JavaScript實現(xiàn)自動生成帶水印的圖片

    這篇文章主要來和大家一起討論如何利用JavaScript實現(xiàn)一個復(fù)雜功能,該功能可以自動為圖片添加水印,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-01-01
  • js高精度計算decimal.js庫用法demo

    js高精度計算decimal.js庫用法demo

    這篇文章主要給大家介紹了關(guān)于js高精度計算decimal.js庫用法的相關(guān)資料,decimal.js是使用的二進(jìn)制來計算的,所以能解決js的精度問題,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2023-11-11
  • js帶鬧鈴功能的倒計時代碼

    js帶鬧鈴功能的倒計時代碼

    這篇文章主要為大家詳細(xì)介紹了js帶鬧鈴功能的倒計時代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-09-09
  • js 替換

    js 替換

    2008-02-02

最新評論

尼木县| 东乌珠穆沁旗| 满洲里市| 南陵县| 桂平市| 保山市| 长汀县| 宝山区| 修文县| 温泉县| 望谟县| 泽州县| 绥芬河市| 乌鲁木齐县| 黔南| 陈巴尔虎旗| 瑞昌市| 三江| 新蔡县| 高平市| 大邑县| 鹤山市| 汉中市| 台中县| 峨山| 上饶县| 遂昌县| 湖州市| 勃利县| 和平县| 余姚市| 郸城县| 龙游县| 册亨县| 安吉县| 潮州市| 当涂县| 蒙阴县| 栾城县| 崇阳县| 建水县|