js 創(chuàng)建書簽小工具之理論

更新時間：2011年02月25日 23:42:10 作者：

書簽小工具（Bookmarklets）是一個非常棒的javascript代碼小片斷偽裝成的小應(yīng)用，它駐留在你的瀏覽器里并為網(wǎng)頁提供額外的功能。這里我們將研究如何從頭開始創(chuàng)建一個書簽小工具及一些最佳實踐的建議。

我們一直在尋找增加瀏覽體驗的方法，有的方法眾所周知，有的則鮮為人知。我原本認(rèn)為書簽小工具屬于后者，非常令人討厭的東西。令我非常懊惱的是我發(fā)現(xiàn)在這個問題上我完全是錯誤的。它并不是令人厭煩的，而是以用戶為中心的，能實現(xiàn)很多出色的功能，而且就像人們所預(yù)期的一樣，它成為了我與瀏覽者以及網(wǎng)絡(luò)交互的核心部分。
這里我想向你介紹開發(fā)書簽小工具以實現(xiàn)一些精妙的書簽的全過程。是的，書簽，我們將創(chuàng)建不只一個書簽，即使是非常小的書簽。很好奇嗎？我們開始吧！

究竟什么是書簽小工具呢？
引用前文的話：
書簽小工具是一個非常棒的javascript代碼小片斷偽裝成的小應(yīng)用，它駐留在你的瀏覽器里并為網(wǎng)頁提供額外的功能，僅僅只需要點擊一下。

這個詞是bookmark和applet的合成詞，也叫做收藏小工具（favelets），這個小的javascript片斷讓你可以在瀏覽任何頁面時召喚出額外的功能。因為它們只有javascript構(gòu)成，所以它們是可移動的，可以支持所有的瀏覽器，甚至是移動設(shè)備和平板設(shè)備的。安裝它們也相當(dāng)簡單，只需要將它們拖到收藏夾就行了！

那么，什么是關(guān)鍵呢？
關(guān)鍵之處在于書簽小工具認(rèn)你可以做很多原本要以開發(fā)人員為中心才能做的事情。任何通過書簽小工具能獲得的功能你都可以使用瀏覽器的控制臺花費很少的時間而獲得。書簽小工具簡化了這個過程，將實現(xiàn)一些功能的代碼打包在一個小小的按鈕里。書簽小工具大體上來說可以分為以下幾類：

用于傳輸數(shù)據(jù)。它用于將頁面提交到特定的服務(wù)。處理社交媒體，查字典，搜索都屬于這一類。我們將創(chuàng)建一個提交信息到Reddit（一個新聞網(wǎng)站）的書簽小工具。
用于獲取信息或修改當(dāng)前頁面的。我們將創(chuàng)建一個設(shè)置網(wǎng)頁背景色的小工具。
用于后臺運作。清除當(dāng)前網(wǎng)站cookie的書簽小工具是一個主要的例子，我們將下面創(chuàng)建一個。
1、開始
你需要記住的第一點就是在所有javascript代碼前綴上“javascript”URI。瀏覽器實現(xiàn)了特定的前綴因此前綴后面的內(nèi)容可以被當(dāng)作javascript代碼正確的處理，解析。
例如，點擊“這個鏈接”（代碼如下）將會強(qiáng)出一個對話框。

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

2、包裝成匿名函數(shù)
記住你的代碼將運行于當(dāng)前加載的頁面，它可能會擁有自己的javascript代碼，這意味著可能和書簽小工具的代碼存在沖突。最后你需要做的是讓你的小工具中止當(dāng)前頁面。
將你的代碼包裝在一個匿名函數(shù)里可以保證沒有名稱沖突。此外，javascript新手將會被搞混并認(rèn)為你是上帝，如果你這樣做的話。

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

javascript:(function(){// your code here })();

當(dāng)你在其它地方使用javascript代碼時這也是適當(dāng)，時刻注意保持自己的代碼隔離。
3、按需外部化
書簽小工具不一定要很小，你可以需要多大就寫多大。在這種些情況下，為了發(fā)布方便并在不讓用戶手動干預(yù)的情況下保持代碼為最新，最好是創(chuàng)建一個獲取需要的代碼的封裝。

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

 
javascript: (function () { 
var jsCode = document.createElement('script'); 
jsCode.setAttribute('src', 'http://path/to/external/file.js'); 
document.body.appendChild(jsCode); 
}()); 

上面的代碼變得美化了許多，它創(chuàng)建了一個script標(biāo)簽，將src屬性設(shè)置成其它地方的一個文件，然后最終將它附加到文檔中。通過這種方法，無論你哪上部分代碼發(fā)生變化，你可以部署你修改后的文件并立刻傳播到每一個用戶。

注意：這不僅限于javascript。如果你的書簽小工具使用前端，你也可以自由地引入外部HTML和CSS，使得你的小工具真正的自動更新。

4、謹(jǐn)慎地添加類庫
如果你要創(chuàng)建一個大型的書簽工具，你可能需要一個javascript類庫。但是在你的頁面里使用它們不僅僅只是將它們包含進(jìn)來那么簡單，你需要保證這個庫不是已經(jīng)存在了的。像jQuery和MooTools這樣占有很大市場的類庫你得仔細(xì)的處理來確保它預(yù)先沒有被載入。
另一方面網(wǎng)頁可能已經(jīng)載入了其它類庫，可能會導(dǎo)致“$”符號組件沖突。版本沖突在一些情況下也會出現(xiàn)，所以也要注意。

這里是一段我代碼中使用的腳本。注意，在你的代碼中你需要注意我上面說的幾點。

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

 
if (!($ = window.jQuery)) { // typeof jQuery=='undefined' works too 
script = document.createElement( 'script' ); 
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'; 
script.onload=releasetheKraken; 
document.body.appendChild(script); 
} 
else { 
releasetheKraken(); 
} 

function releasetheKraken() { 
// The Kraken has been released, master! 
// Yes, I'm being childish. Place your code here 
} 

這段代碼的含義應(yīng)該很明確了，我們簡單地過一下。

首先我們通過判斷jQuery對象是不是存在于名稱空間里來確定jQuery是不是已經(jīng)被加載了。
如果不存在，我們引入它。我們根據(jù)最佳實踐能過CDN來載入它。最后我們確保指向包含要執(zhí)行的代碼的程序主函數(shù)。
如果已存在，直接運行主函數(shù)。
如果你覺得解決這個問題很麻煩，我強(qiáng)烈推薦Ben Alman的“書簽小工具生成器”。它用一種很完全的方法解決全稱空間和版本沖突。好東西！

5、非不得已不要搞亂母頁
這一點太重要了。如果不小心破壞了母頁，書簽小工具就是毫無用處的。請注意javascript并不是你唯一需要處理的東西。如果你有一個前端，HTML和CSS也會在頁面中運行。不要給你的容器和類取非常普通的名字，比如你把它叫做“container”，我會永遠(yuǎn)討厭你。一種簡單的方法就是給所有名字添加具有工具特色的特別前綴（或者是后綴）字符串。當(dāng)你寫CSS的時候，需要特別特別的特殊。使用樣式很不錯，但請使用最高的精度。如果有樣式泄漏到主頁面上是不合規(guī)范的，且會引發(fā)不信任。

6、測試，測試，再測試
如果你正創(chuàng)建一個較小的書簽小工具，它引用了脆弱的第三方的類庫，你可能會碰到永遠(yuǎn)的噩夢——跨瀏覽器兼容性問題?？雌饋砗苊黠@但是這是很多人很多時候都會忘記的一點。
另一個陷阱是希望能工作在所有網(wǎng)站上的小工具只工作在幾個網(wǎng)站上。網(wǎng)頁可以有不同的層次，使用不同的方法論。有些網(wǎng)站可能包含了HTML5并且使用了相關(guān)的容器而其它的可能安全起見使用了通用的div標(biāo)簽。在收集信息的時候確?？紤]了每一種情況。

您可能感興趣的文章: