js 创建书签小工具之理论

2024-05-06 14:25:15

字体：大中小

来源：转载

供稿：网友

我们一直在寻找增加浏览体验的方法，有的方法众所周知，有的则鲜为人知。我原本认为书签小工具属于后者，非常令人讨厌的东西。令我非常懊恼的是我发现在这个问题上我完全是错误的。它并不是令人厌烦的，而是以用户为中心的，能实现很多出色的功能，而且就像人们所预期的一样，它成为了我与浏览者以及网络交互的核心部分。
这里我想向你介绍开发书签小工具以实现一些精妙的书签的全过程。是的，书签，我们将创建不只一个书签，即使是非常小的书签。很好奇吗？我们开始吧！

究竟什么是书签小工具呢？
引用前文的话：
书签小工具是一个非常棒的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中的函数声明与函数表达式(奇技淫巧)

下一篇：浏览器常用高宽的jquery插件