js 创建书签小工具之理论
我们一直在寻找增加浏览体验的方法,有的方法众所周知,有的则鲜为人知。我原本认为书签小工具属于后者,非常令人讨厌的东西。令我非常懊恼的是我发现在这个问题上我完全是错误的。它并不是令人厌烦的,而是以用户为中心的,能实现很多出色的功能,而且就像人们所预期的一样,它成为了我与浏览者以及网络交互的核心部分。
这里我想向你介绍开发书签小工具以实现一些精妙的书签的全过程。是的,书签,我们将创建不只一个书签,即使是非常小的书签。很好奇吗?我们开始吧!
究竟什么是书签小工具呢?
引用前文的话:
书签小工具是一个非常棒的javascript代码小片断伪装成的小应用,它驻留在你的浏览器里并为网页提供额外的功能,仅仅只需要点击一下。
这个词是bookmark和applet的合成词,也叫做收藏小工具(favelets),这个小的javascript片断让你可以在浏览任何页面时召唤出额外的功能。因为它们只有javascript构成,所以它们是可移动的,可以支持所有的浏览器,甚至是移动设备和平板设备的。安装它们也相当简单,只需要将它们拖到收藏夹就行了!
那么,什么是关键呢?
关键之处在于书签小工具认你可以做很多原本要以开发人员为中心才能做的事情。任何通过书签小工具能获得的功能你都可以使用浏览器的控制台花费很少的时间而获得。书签小工具简化了这个过程,将实现一些功能的代码打包在一个小小的按钮里。书签小工具大体上来说可以分为以下几类:
用于传输数据。它用于将页面提交到特定的服务。处理社交媒体,查字典,搜索都属于这一类。我们将创建一个提交信息到Reddit(一个新闻网站)的书签小工具。
用于获取信息或修改当前页面的。我们将创建一个设置网页背景色的小工具。
用于后台运作。清除当前网站cookie的书签小工具是一个主要的例子,我们将下面创建一个。
1、开始
你需要记住的第一点就是在所有javascript代码前缀上“javascript”URI。浏览器实现了特定的前缀因此前缀后面的内容可以被当作javascript代码正确的处理,解析。
例如,点击“这个链接”(代码如下)将会强出一个对话框。
2、包装成匿名函数
记住你的代码将运行于当前加载的页面,它可能会拥有自己的javascript代码,这意味着可能和书签小工具的代码存在冲突。最后你需要做的是让你的小工具中止当前页面。
将你的代码包装在一个匿名函数里可以保证没有名称冲突。此外,javascript新手将会被搞混并认为你是上帝,如果你这样做的话。
当你在其它地方使用javascript代码时这也是适当,时刻注意保持自己的代码隔离。
3、按需外部化
书签小工具不一定要很小,你可以需要多大就写多大。在这种些情况下,为了发布方便并在不让用户手动干预的情况下保持代码为最新,最好是创建一个获取需要的代码的封装。
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这样占有很大市场的类库你得仔细的处理来确保它预先没有被载入。
另一方面网页可能已经载入了其它类库,可能会导致“$”符号组件冲突。版本冲突在一些情况下也会出现,所以也要注意。
这里是一段我代码中使用的脚本。注意,在你的代码中你需要注意我上面说的几点。
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标签。在收集信息的时候确保考虑了每一种情况。
js 创建书签小工具之理论的更多相关文章
- JS查错小工具-三生有幸【推荐】
H5和CSS语言在开发者官网上都有在线查错工具,同样的,更加复杂的JavaScript也需要一个查错工具,(别指望DreamWeaver了,debug功能做的太垃圾,还不如Firefox自带的强..) ...
- WordPress小工具开发教程(网站公告)
WordPress小工具开发教程(网站公告) BY TIANQIXIN · 2012 年 12 月 26 日 wordpress主题小工具,可以自由拖动到侧边栏,并在前台实现相应功能!一般自带的小 ...
- Animo.js :一款管理 CSS 动画的强大的小工具
Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...
- 使用uni-app(Vue.js)创建运行微信小程序项目步骤
使用uni-app(Vue.js)开发微信小程序项目步骤 1. 新建一个uni-app项目 创建完成后的目录结构 2. 打开微信小程序开发工具端的端口调试功能 3. 运行创建的项目 效果
- 撸一个JS正则小工具
写完正则在浏览器上检测自己写得对不对实在是不方便,于是就撸了一个JS正则小demo出来. demo demo展示 项目地址 代码部分 首先把布局样式先写好. <!DOCTYPE html> ...
- 实用在线小工具 -- JS代码压缩工具
实用在线小工具 -- JS代码压缩工具 将JS代码进行压缩可以减少内存占用,下面链接是一个在线JS代码压缩工具,它将多余的空格和换行符压缩了. JS代码压缩工具链接:http://jspack ...
- js小工具---本地图片转换为base64编码数据
今天用jmeter对图片对比进行性能测试,post请求为json请求,图片为Base64编码后的图片数据.所以需要将一张本地图片生成base64编码,找到一个js小工具,记录在这儿便于以后复用. 效果 ...
- js实现去文本换行符小工具
js实现去文本换行符小工具 一.总结 一句话总结: 1.vertical属性使用的时候注意看清定义,也注意父元素的基准线问题.vertical-align:top; 2.获取textareaEleme ...
- 经纬坐标(BLH)数据创建.kml文件小工具设计 Java版
技术背景 KML,是标记语言(Keyhole Markup Language)的缩写,最初由Keyhole公司开发,是一种基于XML 语法与格式的.用于描述和保存地理信息(如点.线.图像.多边形和模型 ...
随机推荐
- oracle 10g 学习之基本 SQL SELECT 语句(4)
本篇文章中,对于有的和MSSQL Server相同的语法我就没有再写了,这里我只写Oracle和MSSQL Server有点不同的 定义空值 l 空值是无效的,未指定的,未知的或不可预知的值 l ...
- 几个 Context 上下文的区别
转自:http://www.blogjava.net/fancydeepin/archive/2013/03/31/java-ee-context.html 在 java 中, 常见的 Context ...
- 继承ActionSupport,返回INPUT的原因
http://developer.51cto.com/art/200907/134757.htm 表面现象: 在WebWork中,当一个Action中既没有重写ActionSupport中的valid ...
- 电赛菜鸟营培训(五)——OLED屏幕的使用
一.取模软件的使用 首先进行设置 然后可以生成显示这个字母的代码,列优先,先按列画8行,然后再继续画下一列.汉字为16*16,字母为8*8,对应生成相应个数的ox代码. 二.STM32烤写OLED # ...
- C++primer学习笔记(三)——Chapter 5
5.1 Simple Statements 1.记得每个语句后面加上”;”不过现在编译器都有实时编译,一般都不会忘记的, 2.空语句 (1)就是啥都没有.只有一个“:” (2)还是有很多用处的,例 ...
- JVM的回收实现
通过一系列的称为"GC Roots"的对象作为起始点,从这些节点开始向下搜索,搜索所走过的路径称为引用链(Reference Chain),当一个对象到GC Roots没有任何引用 ...
- 水题 Codeforces Round #296 (Div. 2) A. Playing with Paper
题目传送门 /* 水题 a或b成倍的减 */ #include <cstdio> #include <iostream> #include <algorithm> ...
- HTML列表-框架
<frameset frameborder="边框大小" 列cols="各窗口百分比,隔开" 行rows=“各窗口百分比”> <frame n ...
- Cyclic Nacklace[HDU3746]
Cyclic Nacklace Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- gprof参数说明及常见错误
参数说明 l -b 不再输出统计图表中每个字段的详细描述. l -p 只输出函数的调用图(Call graph的那部分信息). l -q 只输出函数的时间消耗列表. l -e Name 不再输出函数N ...