js 创建书签小工具之理论
更新时间：2011年02月25日 23:42:10 作者：
书签小工具（Bookmarklets）是一个非常棒的javascript代码小片断伪装成的小应用，它驻留在你的浏览器里并为网页提供额外的功能。这里我们将研究如何从头开始创建一个书签小工具及一些最佳实践的建议。
我们一直在寻找增加浏览体验的方法，有的方法众所周知，有的则鲜为人知。我原本认为书签小工具属于后者，非常令人讨厌的东西。令我非常懊恼的是我发现在这个问题上我完全是错误的。它并不是令人厌烦的，而是以用户为中心的，能实现很多出色的功能，而且就像人们所预期的一样，它成为了我与浏览者以及网络交互的核心部分。
这里我想向你介绍开发书签小工具以实现一些精妙的书签的全过程。是的，书签，我们将创建不只一个书签，即使是非常小的书签。很好奇吗？我们开始吧！
究竟什么是书签小工具呢？
引用前文的话：
书签小工具是一个非常棒的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标签。在收集信息的时候确保考虑了每一种情况。
这里我想向你介绍开发书签小工具以实现一些精妙的书签的全过程。是的，书签，我们将创建不只一个书签，即使是非常小的书签。很好奇吗？我们开始吧！
究竟什么是书签小工具呢？
引用前文的话：
书签小工具是一个非常棒的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标签。在收集信息的时候确保考虑了每一种情况。
您可能感兴趣的文章:
- java和javascript获取word文档的书签位置对比
- javascript下用ActiveXObject控件替换word书签，将内容导出到word后打印
- js前端加密库Crypto-js进行MD5/SHA256/BASE64/AES加解密的方法与示例
- JavaScript中常见加密解密方法总结
- js将URL网址转为16进制加密与解密函数
- Js通过AES加密后PHP用Openssl解密的方法
- JavaScript实现的前端AES加密解密功能【基于CryptoJS】
- JavaScript实现的简单加密解密操作示例
- 两种JavaScript的AES加密方式（可与Java相互加解密）
- JS加密解密之保存到桌面书签
相关文章
这篇文章主要介绍了Bootstrap v4 sass设计的相关资料,需要的朋友可以参考下2016-05-05
打断点操作很简单,核心的问题在于,断点怎么打才能够排查出代码的问题所在呢?下面这篇文章主要给大家总结介绍了关于JavaScript必备的断点调试技巧,需要的朋友可以参考下2021-09-09
这篇文章给大家介绍了在echarts中如何在柱状图上方显示文字,文中给出了完整的示例代码,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了JS实现Ajax跨域请求flask响应内容，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
当一个项目经过持续迭代,不断增加功能,逐渐变成一个复杂的产品时,新功能的开发变得相对困难,其中一个很大的原因是代码复杂度高,导致可维护性和可读性都很差,本文将从前端JavaScript的角度出发,介绍一些有效的方法和技巧来优化前端代码的圈复杂度2023-10-10
这篇文章主要为大家详细介绍了JavaScript实现三级联动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
PHP的数组函数in_array()非常方便，下面就为大家介绍下自定义类似php的js数组的in_array函数，具体实现方法如下，感兴趣的朋友可以参考下2013-12-12
setTimeout与setInterval在不同浏览器下的差异
setTimeout与setInterval是window对象的两个非常神奇方法，用于实现定时或延时调用一个函数或一段代码2010-01-01
这篇文章主要介绍了js中for in的缺陷，有需要的朋友可以参考一下2013-12-12
这篇文章主要给大家介绍了关于利用JavaScript差集实现一个对比小工具的相关资料,虽然实现的界面不是太好看,但好在功能实用即可,需要的朋友可以参考下2021-07-07
最新评论