开发者社区> thinkyoung> 正文

js 创建书签小工具之理论

简介: 我们一直在寻找增加浏览体验的方法,有的方法众所周知,有的则鲜为人知。我原本认为书签小工具属于后者,非常令人讨厌的东西。令我非常懊恼的是我发现在这个问题上我完全是错误的。它并不是令人厌烦的,而是以用户为中心的,能实现很多出色的功能,而且就像人们所预期的一样,它成为了我与浏览者以及网络交互的核心部分。
+关注继续查看

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

究竟什么是书签小工具呢? 
引用前文的话: 
书签小工具是一个非常棒的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标签。在收集信息的时候确保考虑了每一种情况。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用swiper.js创建嵌套的swiper
相信在项目中使用过swiper.js的同学会跟我一样,觉得这个软件真的很好用。首先API调用简单,其次就是他的官方文档写得非常之详细,非常容易上手。 自己在项目中使用swiper.js很长时间了,这里根据自己的一些经验和心得对swiper.js进行总结。
1666 0
three.js 创建文字的几种方法
three.js 创建文字的几种方法
4100 0
使用 iosOverlay.js 创建 iOS 风格的提示和通知
  iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果。为了防止图标加载的时候闪烁,你需要预加载的图像资源。不兼容 CSS 动画的浏览器需要 jQuery 支持。浏览器兼容:IE7+, Google Chrome, Firefox, Opera, Desktop Safari, Mobile Safari — iPhone & iPad。
782 0
掘金收割机的年终总结,我用 Three.js 创建了一个"掘金城市" | 2021年终总结征文
我叫大帅,一个老程序猿。本文会在评论中抽一个幸运鹅获得掘金周边鼠标垫1份
33 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
19981 0
Node.js创建第一个应用
在我们创建 Node.js 第一个 "Hello, World!" 应用前,让我们先了解下 Node.js 应用是由哪几部分组成的: 引入 required 模块:我们可以使用 require 指令来载入 Node.js 模块。
877 0
创建响应式布局的优秀网格工具集锦《系列五》
  在这篇文章中,我们为您呈现了一组优秀的网格工具清单。如果网页设计和开人员采用了正确的工具集,并基于一个灵活的网格架构,以及能够把响应图像应用到到设计之中,那么创建一个具备响应式的网站并不一定是一项艰巨的任务。
948 0
好程序员技术文档HTML5开发中js的创建和继承
  好程序员技术文档HTML5开发中js的创建和继承,JavaScript对每个创建的对象都会设置一个原型,指向它的原型对象。  当我们用obj.xxx访问一个对象的属性时,JavaScript引擎先在当前对象上查找该属性,如果没有找到,就到其原型对象上找,如果还没有找到,就一直上溯到Object.prototype对象,最后,如果还没有找到,就只能返回undefined。
807 0
js利用数组创建图片对象
个人学习,练习代码。欢迎批评指正。 在本地操作,轮播图片时,有时需要两张以上图片轮播,即一组一组的切换,一张一张的取太麻烦,于是想到是否可以存储在数组中去调用呢。 于是找打了一个方法: 1.定义一个数组(存放图片地址) imgArr = [['img/01.jpg','img/02.jpg','img/03.jpg','img/04.jpg'],['img/05.jpg','
2012 0
+关注
723
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载