為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??

作者：?阮一峰

日期：?2011年6月11日

前一段日子，我寫了兩個(gè)Bookmarklet----"短網(wǎng)址生成"和"短網(wǎng)址還原"。

它們用起來很方便，除了我本人之外，其他朋友也在用。第一次發(fā)布Bookmarklet，就能有用戶，我挺滿意的。

下面就是我整理的《Bookmarklet編寫指南》，供自己和需要的朋友參考。

====================================================

Bookmarklet編寫指南

阮一峰 編寫

一、什么是Bookmarklet？

Bookmarklet是一個(gè)復(fù)合詞，由Bookmark（書簽）和-let（小的）構(gòu)成，中文可以譯成"書簽工具"。

它在形式上與"書簽"一樣，都保存在瀏覽器收藏夾里。但是，它不是一個(gè)以"http://"開頭的網(wǎng)址，而是一段Javascript代碼，以"javascript:"開頭。點(diǎn)擊之后，會(huì)對(duì)當(dāng)前頁面執(zhí)行某種操作。

它通常在網(wǎng)頁中以鏈接的形式出現(xiàn)，就像下面這樣：

　　<a href="javascript:alert('hi');">xxx</a>

用戶直接把這個(gè)鏈接拖到地址欄或收藏夾就可以用了。

二、Bookmarklet的優(yōu)點(diǎn)

它有幾個(gè)很顯著的優(yōu)點(diǎn)，其他技術(shù)難以取代：

1. 安裝快速

　　Bookmarklet的安裝，就是在收藏夾中保存一段代碼，一步就能完成。所有瀏覽器都原生支持。

2. 使用方便

　　用的時(shí)候，點(diǎn)一下這個(gè)鏈接就行了。

3. 開發(fā)容易

　　一段Javascript代碼就是Bookmarklet的所有內(nèi)容，不需要用到其他技術(shù)，比開發(fā)一個(gè)瀏覽器插件簡(jiǎn)單多了。

4. 跨瀏覽器

　　所有瀏覽器都支持Bookmarklet。如果寫的正確，同樣一個(gè)Bookmarklet在各種瀏覽器上都能正常使用。

三、Bookmarklet的編寫規(guī)則

1. 必須以"javascript:"開頭

瀏覽器把"javascript:"當(dāng)做協(xié)議看待。有了它，瀏覽器才知道要用javascript解釋后面的代碼。它的作用等同于將代碼放在<script></script>之間運(yùn)行。

2. 所有代碼必須在同一行

因?yàn)闉g覽器把Bookmarklet當(dāng)做網(wǎng)址保存，而網(wǎng)址是不能分行的，所以Bookmarklet也不能分行。

另一方面，網(wǎng)址是有長(zhǎng)度限制的。IE的最長(zhǎng)網(wǎng)址不能超過2083個(gè)字符（IE6不能超過508個(gè)字符），這也就是Bookmarklet的最長(zhǎng)長(zhǎng)度。壓縮工具可以幫忙減少長(zhǎng)度，但是使用下面提到的連接外部代碼的方法，可以避開這個(gè)限制。

3. 使用單引號(hào)

根據(jù)Javascript的語法，單引號(hào)（'xxx'）和雙引號(hào)（"xxx"）都能使用。但是由于html語言主要使用雙引號(hào)，所以Bookmarklet優(yōu)先使用單引號(hào)。萬一遇到必須使用雙引號(hào)的情況，就采用它的URL編碼形式"%22"。

4. 不要污染全局變量

Bookmarklet最好不要生成新的全局變量，可以采用直接運(yùn)行匿名函數(shù)的方式：

　　javascript: (function(){...})();

上面式子的第一個(gè)括號(hào)，定義了一個(gè)匿名函數(shù)；最后一個(gè)括號(hào)表示立即執(zhí)行這個(gè)匿名函數(shù)。所有的變量都是匿名函數(shù)的內(nèi)部變量，不會(huì)生成任何新的全局變量。

如果必須設(shè)置全局變量，就取罕見的變量名（比如hd8ki2），防止與已經(jīng)存在的全局變量同名。

5. 對(duì)文本和URL進(jìn)行編碼

為了防止出現(xiàn)非法字符，代碼以外的文本都應(yīng)該使用encodeURIComponent()函數(shù)進(jìn)行編碼，比如把空格變成%20。

四、Bookmarklet的編寫技巧

1. 獲取網(wǎng)頁信息

獲取當(dāng)前頁面的標(biāo)題：document.title。

獲取當(dāng)前頁面的URL： location.href。

獲取當(dāng)前選中的文本：

　　var t;

　　t = (function(){

　　　　if (window.getSelection){

　　　　　　return window.getSelection().toString();

　　　　}else if(document.getSelection){

　　　　　　return document.getSelection();

　　　　}else if (document.selection){

　　　　　　return document.selection.createRange().text;

　　　　}

　　　　return '';

　　})();

2. 防止刷新頁面

如果代碼對(duì)頁面有改動(dòng)（比如使用了document.write），瀏覽器就會(huì)用一個(gè)新頁面替換原有頁面。所以最好用void()命令，把語句放在里面。

舉例來說，下面這個(gè)Bookmarklet會(huì)導(dǎo)致原頁面被一個(gè)新頁面替代：

　　javascript:document.links[0].href='http://www.ibm.com/';

加上void以后，頁面就不會(huì)跳轉(zhuǎn)了：

　　javascript:void(document.links[0].href='http://www.ibm.com/');

3. 框架（frameset）

對(duì)于使用"框架"（frameset）的網(wǎng)頁，那些需要操作頁面的Bookmarklet一般不起作用。所以，如果發(fā)現(xiàn)網(wǎng)頁使用了框架，就告訴用戶Bookmarklet無法使用。

　　if(frames.length > 0)

　　　　alert('對(duì)不起，不適用于框架。');

　　else{

　　　　/* 正常情況的代碼 */

　　}

但是，上面的代碼有一個(gè)問題，那就是行內(nèi)框架iframe也包含在frames.length之中，所以必須排除iframe的影響。

　　if(frames.length >?
　　　document.getElementsByTagName('iframe').length)

　　　　alert('對(duì)不起，不適用于框架。');

　　else{

　　　　/* 正常情況的代碼 */

　　}

4. 連接外部javascript代碼

有時(shí)，Bookmarklet必須再引入外部的Javascript代碼，這就需要為當(dāng)前頁面添加一個(gè)script標(biāo)簽。

　　javascript:(function(){

　　　　var script=document.createElement('script');

　　　　script.setAttribute('src',
　　　　　　　　　　　　'http://path/to/external/file.js');

　　　　document.getElementsByTagName('head')[0]
　　　　　　　　.appendChild(script);

　　})();

5. 添加外部函數(shù)庫

如果Bookmarklet需要用到外部函數(shù)庫，就必須把它也加進(jìn)來。但是，前提是必須先檢查一下，看看原頁面是否已經(jīng)加載了這個(gè)函數(shù)庫。

下面以加載jQuery為例：

　　if (!window.jQuery) {

　　　　script=document.createElement( 'script' );

　　　　script.src='http://ajax.googleapis.com/
　　　　　　　　　ajax/libs/jquery/1/jquery.min.js';

　　　　script.οnlοad=foo;

　　　　document.body.appendChild(script);

　　} else {

　　　　foo();

　　}?

　　function foo() {

　　　　/* ... */

　　}

五、延伸閱讀

　　* Kalid Azad,?How To Make a Bookmarklet For Your Web Application

　　* Troels Jakobsen,?Rules for Bookmarklets

　　* Troels Jakobsen,?Tips for Writing Bookmarklets

　　* Siddharth,?Create Bookmarklets - The Right Way

　　* 2ality,?Implementing bookmarklets in JavaScript

（完）

轉(zhuǎn)載于:https://my.oschina.net/pandao/blog/107685

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的[转] Bookmarklet（书签工具）编写指南的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。