JavaScript 书签小工具开发指南：原理与实践

书签小工具概述

我们持续探索提升浏览器体验的途径，其中一些方法广为人知，另一些则相对冷门。起初，我认为书签小工具属于后者，甚至觉得它们令人反感。然而事实证明我的观点完全错误。书签小工具并非令人厌烦，而是以用户为中心，能够实现诸多出色功能，正如人们所期待的那样，它已成为我与浏览者及网络交互的核心部分。

本文将详细介绍开发书签小工具以实现各种精妙功能的完整流程。是的，我们将创建书签，哪怕是非常简单的书签。如果你对此感到好奇，让我们开始吧！

那么，究竟什么是书签小工具呢？

引用前文的定义：

书签小工具是一段伪装成应用的 JavaScript 代码片段，它驻留在浏览器中，仅需点击一次即可为网页提供额外功能。

该词由 bookmark（书签）和 applet（小程序）组合而成，也被称为收藏小工具（favelets）。这种小型 JavaScript 片段允许你在浏览任何页面时调用额外功能。由于仅由 JavaScript 构成，它们具有可移植性，支持所有浏览器，包括移动设备和平板电脑。安装过程也非常简单，只需将其拖拽到收藏夹即可！

那么，其核心关键点是什么？

关键在于书签小工具让你能够执行许多原本需要开发者介入才能完成的操作。任何通过书签小工具实现的功能，你都可以通过浏览器控制台在短时间内完成。书签小工具简化了这一过程，将实现特定功能的代码打包在一个小小的按钮中。总体而言，书签小工具可分为以下几类：

用于数据传输。这类小工具将页面提交到特定服务，处理社交媒体、字典查询和搜索等功能均属于此类。我们将创建一个将信息提交到 Reddit（一个新闻网站）的书签小工具。

用于获取信息或修改当前页面。我们将创建一个设置网页背景色的小工具。

用于后台运行。清除当前网站 Cookie 的书签小工具是一个主要示例，我们将在下文进行创建。

核心机制：javascript: URI

你需要记住的第一点是，所有 JavaScript 代码前必须加上“javascript” URI 前缀。浏览器实现了特定的前缀处理机制，因此前缀后的内容会被正确解析并作为 JavaScript 代码执行。

例如，点击“这个链接”（代码如下）将会弹出一个对话框。

 
<a href="javascript: alert('文字链接');">这个链接</a>

代码封装：匿名函数

请记住，你的代码将在当前加载的页面中运行，该页面可能拥有自己的 JavaScript 代码，这意味着可能与书签小工具的代码发生冲突。最后，你需要确保你的小工具不会中止当前页面的正常加载。

将你的代码包装在一个匿名函数中可以保证没有名称冲突。此外，JavaScript 新手可能会对此感到困惑，但如果你这样做，他们会认为你是上帝。

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

当你在其他地方使用 JavaScript 代码时，这也是合适的做法。时刻注意保持自己的代码隔离。

代码外部化与自动更新

书签小工具不一定非要很小，你可以按需编写任意大小的代码。在这种情况下，为了发布方便并在不让用户手动干预的情况下保持代码为最新，最好是创建一个获取所需代码的封装。

 
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，使得你的小工具真正具备自动更新能力。

第三方库的安全加载

如果你要创建一个大型的书签工具，你可能需要一个 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 的“书签小工具生成器”。它用一种很完全的方法解决全称空间和版本冲突。好东西！

样式隔离与测试

这一点太重要了。如果不小心破坏了母页，书签小工具就是毫无用处的。请注意 JavaScript 并不是你唯一需要处理的东西。如果你有一个前端，HTML 和 CSS 也会在页面中运行。不要给你的容器和类取非常普通的名字，比如你把它叫做“container”，我会永远讨厌你。一种简单的方法就是给所有名字添加具有工具特色的特别前缀（或者是后缀）字符串。当你写 CSS 的时候，需要特别特别的特殊。使用样式很不错，但请使用最高的精度。如果有样式泄漏到主页面是不合规范的，且会引发不信任。

6、测试，测试，再测试

如果你正创建一个较小的书签小工具，它引用了脆弱的第三方的类库，你可能会碰到永远的噩梦——跨浏览器兼容性问题。看起来很明显，但是这是很多人很多时候都会忘记的一点。

另一个陷阱是希望能工作在所有网站上的小工具只工作在几个网站上。网页可以有不同的层次，使用不同的方法论。有些网站可能包含了 HTML5 并且使用了相关的容器，而其它的可能安全起见使用了通用的 div 标签。在收集信息的时候确保考虑了每一种情况。