js 創建書籤小工具之理論

07-20

我們一直在尋找增加瀏覽體驗的方法，有的方法眾所周知，有的則鮮為人知。我原本認為書籤小工具屬於後者，非常令人討厭的東西。令我非常懊惱的是我發現在這個問題上我完全是錯誤的。它並不是令人厭煩的，而是以用戶為中心的，能實現很多出色的功能，而且就像人們所預期的一樣，它成為了我與瀏覽者以及網路交互的核心部分。這裡我想向你介紹開發書籤小工具以實現一些精妙的書籤的全過程。是的，書籤，我們將創建不只一個書籤，即使是非常小的書籤。很好奇嗎？我們開始吧！究竟什麼是書籤小工具呢？引用前文的話：書籤小工具是一個非常棒的javascript代碼小片斷偽裝成的小應用，它駐留在你的瀏覽器里並為網頁提供額外的功能，僅僅只需要點擊一下。這個詞是bookmark和applet的合成詞，也叫做收藏小工具（favelets），這個小的javascript片斷讓你可以在瀏覽任何頁面時召喚出額外的功能。因為它們只有javascript構成，所以它們是可移動的，可以支持所有的瀏覽器，甚至是移動設備和平板設備的。安裝它們也相當簡單，只需要將它們拖到收藏夾就行了！那麼，什麼是關鍵呢？關鍵之處在於書籤小工具認你可以做很多原本要以開發人員為中心才能做的事情。任何通過書籤小工具能獲得的功能你都可以使用瀏覽器的控制台花費很少的時間而獲得。書籤小工具簡化了這個過程，將實現一些功能的代碼打包在一個小小的按鈕里。書籤小工具大體上來說可以分為以下幾類：用於傳輸數據。它用於將頁面提交到特定的服務。處理社交媒體，查字典，搜索都屬於這一類。我們將創建一個提交信息到Reddit（一個新聞網站）的書籤小工具。用於獲取信息或修改當前頁面的。我們將創建一個設置網頁背景色的小工具。用於後台運作。清除當前網站cookie的書籤小工具是一個主要的例子，我們將下面創建一個。 1、開始你需要記住的第一點就是在所有javascript代碼前綴上「javascript」URI。瀏覽器實現了特定的前綴因此前綴後面的內容可以被當作javascript代碼正確的處理，解析。例如，點擊「這個鏈接」（代碼如下）將會強出一個對話框。複製代碼代碼如下: <a href="javascript: alert("文字鏈接");">這個鏈接</a> 2、包裝成匿名函數記住你的代碼將運行於當前載入的頁面，它可能會擁有自己的javascript代碼，這意味著可能和書籤小工具的代碼存在衝突。最後你需要做的是讓你的小工具中止當前頁面。將你的代碼包裝在一個匿名函數里可以保證沒有名稱衝突。此外，javascript新手將會被搞混並認為你是上帝，如果你這樣做的話。複製代碼代碼如下: javascript:(function(){// your code here })(); 當你在其它地方使用javascript代碼時這也是適當，時刻注意保持自己的代碼隔離。 3、按需外部化書籤小工具不一定要很小，你可以需要多大就寫多大。在這種些情況下，為了發布方便並在不讓用戶手動干預的情況下保持代碼為最新，最好是創建一個獲取需要的代碼的封裝。複製代碼代碼如下: javascript: (function () { var jsCode = document.createElement("script"); jsCode.setAttribute("src", "http://path/to/external/file.js"); document.body.appendChild(jsCode); }()); 上面的代碼變得美化了許多，它創建了一個script標籤，將src屬性設置成其它地方的一個文件，然後最終將它附加到文檔中。通過這種方法，無論你哪上部分代碼發生變化，你可以部署你修改後的文件並立刻傳播到每一個用戶。注意：這不僅限於javascript。如果你的書籤小工具使用前端，你也可以自由地引入外部HTML和CSS，使得你的小工具真正的自動更新。 4、謹慎地添加類庫如果你要創建一個大型的書籤工具，你可能需要一個javascript類庫。但是在你的頁面里使用它們不僅僅只是將它們包含進來那麼簡單，你需要保證這個庫不是已經存在了的。像jQuery和MooTools這樣佔有很大市場的類庫你得仔細的處理來確保它預先沒有被載入。另一方面網頁可能已經載入了其它類庫，可能會導致「$」符號組件衝突。版本衝突在一些情況下也會出現，所以也要注意。這裡是一段我代碼中使用的腳本。注意，在你的代碼中你需要注意我上面說的幾點。複製代碼代碼如下: 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 } 這段代碼的含義應該很明確了，我們簡單地過一下。首先我們通過判斷jQuery對象是不是存在於名稱空間里來確定jQuery是不是已經被載入了。如果不存在，我們引入它。我們根據最佳實踐能過CDN來載入它。最後我們確保指向包含要執行的代碼的程序主函數。如果已存在，直接運行主函數。如果你覺得解決這個問題很麻煩，我強烈推薦Ben Alman的「書籤小工具生成器」。它用一種很完全的方法解決全稱空間和版本衝突。好東西！ 5、非不得已不要搞亂母頁這一點太重要了。如果不小心破壞了母頁，書籤小工具就是毫無用處的。請注意javascript並不是你唯一需要處理的東西。如果你有一個前端，HTML和CSS也會在頁面中運行。不要給你的容器和類取非常普通的名字，比如你把它叫做「container」，我會永遠討厭你。一種簡單的方法就是給所有名字添加具有工具特色的特別前綴（或者是後綴）字元串。當你寫CSS的時候，需要特別特別的特殊。使用樣式很不錯，但請使用最高的精度。如果有樣式泄漏到主頁面上是不合規範的，且會引發不信任。 6、測試，測試，再測試如果你正創建一個較小的書籤小工具，它引用了脆弱的第三方的類庫，你可能會碰到永遠的噩夢——跨瀏覽器兼容性問題。看起來很明顯但是這是很多人很多時候都會忘記的一點。另一個陷阱是希望能工作在所有網站上的小工具只工作在幾個網站上。網頁可以有不同的層次，使用不同的方法論。有些網站可能包含了HTML5並且使用了相關的容器而其它的可能安全起見使用了通用的div標籤。在收集信息的時候確保考慮了每一種情況。

微信公眾號搜索「腳本之家」，選擇關注

程序猿的那些事、送書等活動等著你