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

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

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

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

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

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

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

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

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

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

這里是一段我代碼中使用的腳本。注意，在你的代碼中你需要注意我上面說(shuō)的幾點(diǎn)。

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

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

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

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

最新評(píng)論