所谓“插件”,就是用户自己新增的jQuery实例对象的方法。由于该方法要被所有实例共享,所以只能定义在jQuery构造函数的原型对象(prototype)之上。对于用户来说,把一些常用的操作封装成插件(plugin),使用起来会非常方便。
[TOC]
## 插件的编写
### 原理
本质上,jQuery插件是定义在jQuery构造函数的prototype对象上面的一个方法,这样做就能使得所有jQuery对象的实例都能共享这个方法。因为jQuery构造函数的prototype对象被简写成jQuery.fn对象,所以插件采用下面的方法定义。
~~~
jQuery.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
~~~
更好的做法是采用下面的写法,这样就能在函数体内自由使用美元符号($)。
~~~
;(function ($){
$.fn.myPlugin = function (){
// Do your awesome plugin stuff here
};
})(jQuery);
~~~
上面代码的最前面有一个分号,这是为了防止多个脚本文件合并时,其他脚本的结尾语句没有添加分号,造成运行时错误。
有时,还可以把顶层对象(window)作为参数输入,这样可以加快代码的执行速度和执行更有效的最小化操作。
~~~
;(function ($, window) {
$.fn.myPlugin = function() {
// Do your awesome plugin stuff here
};
}(jQuery, window));
~~~
需要注意的是,在插件内部,this关键字指的是jQuery对象的实例。而在一般的jQuery回调函数之中,this关键字指的是DOM对象。
~~~
(function ($){
$.fn.maxHeight = function (){
var max = 0;
// 下面这个this,指的是jQuery对象实例
this.each(function() {
// 回调函数内部,this指的是DOM对象
max = Math.max(max, $(this).height());
});
return max;
};
})(jQuery);
~~~
上面这个maxHeight插件的作用是,返回一系列DOM对象中高度最高的那个对象的高度。
大多数情况下,插件应该返回jQuery对象,这样可以保持链式操作。
~~~
(function ($){
$.fn.greenify = function (){
this.css("color", "green");
return this;
};
})(jQuery);
$("a").greenify().addClass("greenified");
~~~
上面代码返回this对象,即jQuery对象实例,所以接下来可以采用链式操作。
对于包含多个jQuery对象的结果集,可以采用each方法,进行处理。
~~~
$.fn.myNewPlugin = function() {
return this.each(function() {
// 处理每个对象
});
};
~~~
插件可以接受一个属性对象参数。
~~~
(function ($){
$.fn.tooltip = function (options){
var settings = $.extend( {
'location' : 'top',
'background-color' : 'blue'
}, options);
return this.each(function (){
// 填入插件代码
});
};
})(jQuery);
~~~
上面代码使用extend方法,为参数对象设置属性的默认值。
### 侦测环境
jQuery逐渐从浏览器环境,变为也可以用于服务器环境。所以,定义插件的时候,最好首先侦测一下运行环境。
~~~
if (typeof module === "object" && typeof module.exports === "object") {
// CommonJS版本
} else {
// 浏览器版本
}
~~~
## 实例
下面是一个将a元素的href属性添加到网页的插件。
~~~
(function($){
$.fn.showLinkLocation = function() {
return this.filter('a').append(function(){
return ' (' + this.href + ')';
});
};
}(jQuery));
// 用法
$('a').showLinkLocation();
~~~
从上面的代码可以看到,插件的开发和使用都非常简单。
## 插件的发布
编写插件以后,可以将它发布到[jQuery官方网站](http://plugins.jquery.com/)上。
首先,编写一个插件的信息文件yourPluginName.jquery.json。文件名中的yourPluginName表示你的插件名。
~~~
{
"name": "plugin_name",
"title": "plugin_long_title",
"description": "...",
"keywords": ["jquery", "plugins"],
"version": "0.0.1",
"author": {
"name": "...",
"url": "..."
},
"maintainers": [
{
"name": "...",
"url": "..."
}
],
"licenses": [
{
"type": "MIT",
"url": "http://www.opensource.org/licenses/mit-license.php"
}
],
"bugs": "...", // bugs url
"homepage": "...", // homepage url
"docs": "...", // docs url
"download": "...", // download url
"dependencies": {
"jquery": ">=1.4"
}
}
~~~
上面是一个插件信息文件的实例。
然后,将代码文件发布到Github,在设置页面点击“Service Hooks/WebHook URLs”选项,填入网址[http://plugins.jquery.com/postreceive-hook,再点击“Update](http://plugins.jquery.com/postreceive-hook%EF%BC%8C%E5%86%8D%E7%82%B9%E5%87%BB%E2%80%9CUpdate) Settings”进行保存。
最后,为代码加上版本,push到github,你的插件就会加入jQuery官方插件库。
~~~
git tag 0.1.0
git push origin --tags
~~~
以后,你要发布新版本,就做一个新的tag。
## 参考链接
* jquery-boilerplate, [How did we get here?](https://github.com/jquery-boilerplate/jquery-boilerplate/wiki/How-did-we-get-here%3F)
* jquery-boilerplate, [How to publish a plugin in jQuery Plugin Registry](https://github.com/jquery-boilerplate/jquery-boilerplate/wiki/How-to-publish-a-plugin-in-jQuery-Plugin-Registry)
- 第一章 导论
- 1.1 前言
- 1.2 为什么学习JavaScript?
- 1.3 JavaScript的历史
- 第二章 基本语法
- 2.1 语法概述
- 2.2 数值
- 2.3 字符串
- 2.4 对象
- 2.5 数组
- 2.6 函数
- 2.7 运算符
- 2.8 数据类型转换
- 2.9 错误处理机制
- 2.10 JavaScript 编程风格
- 第三章 标准库
- 3.1 Object对象
- 3.2 Array 对象
- 3.3 包装对象和Boolean对象
- 3.4 Number对象
- 3.5 String对象
- 3.6 Math对象
- 3.7 Date对象
- 3.8 RegExp对象
- 3.9 JSON对象
- 3.10 ArrayBuffer:类型化数组
- 第四章 面向对象编程
- 4.1 概述
- 4.2 封装
- 4.3 继承
- 4.4 模块化编程
- 第五章 DOM
- 5.1 Node节点
- 5.2 document节点
- 5.3 Element对象
- 5.4 Text节点和DocumentFragment节点
- 5.5 Event对象
- 5.6 CSS操作
- 5.7 Mutation Observer
- 第六章 浏览器对象
- 6.1 浏览器的JavaScript引擎
- 6.2 定时器
- 6.3 window对象
- 6.4 history对象
- 6.5 Ajax
- 6.6 同域限制和window.postMessage方法
- 6.7 Web Storage:浏览器端数据储存机制
- 6.8 IndexedDB:浏览器端数据库
- 6.9 Web Notifications API
- 6.10 Performance API
- 6.11 移动设备API
- 第七章 HTML网页的API
- 7.1 HTML网页元素
- 7.2 Canvas API
- 7.3 SVG 图像
- 7.4 表单
- 7.5 文件和二进制数据的操作
- 7.6 Web Worker
- 7.7 SSE:服务器发送事件
- 7.8 Page Visibility API
- 7.9 Fullscreen API:全屏操作
- 7.10 Web Speech
- 7.11 requestAnimationFrame
- 7.12 WebSocket
- 7.13 WebRTC
- 7.14 Web Components
- 第八章 开发工具
- 8.1 console对象
- 8.2 PhantomJS
- 8.3 Bower:客户端库管理工具
- 8.4 Grunt:任务自动管理工具
- 8.5 Gulp:任务自动管理工具
- 8.6 Browserify:浏览器加载Node.js模块
- 8.7 RequireJS和AMD规范
- 8.8 Source Map
- 8.9 JavaScript 程序测试
- 第九章 JavaScript高级语法
- 9.1 Promise对象
- 9.2 有限状态机
- 9.3 MVC框架与Backbone.js
- 9.4 严格模式
- 9.5 ECMAScript 6 介绍
- 附录
- 10.1 JavaScript API列表
- 草稿一:函数库
- 11.1 Underscore.js
- 11.2 Modernizr
- 11.3 Datejs
- 11.4 D3.js
- 11.5 设计模式
- 11.6 排序算法
- 草稿二:jQuery
- 12.1 jQuery概述
- 12.2 jQuery工具方法
- 12.3 jQuery插件开发
- 12.4 jQuery.Deferred对象
- 12.5 如何做到 jQuery-free?
- 草稿三:Node.js
- 13.1 Node.js 概述
- 13.2 CommonJS规范
- 13.3 package.json文件
- 13.4 npm模块管理器
- 13.5 fs 模块
- 13.6 Path模块
- 13.7 process对象
- 13.8 Buffer对象
- 13.9 Events模块
- 13.10 stream接口
- 13.11 Child Process模块
- 13.12 Http模块
- 13.13 assert 模块
- 13.14 Cluster模块
- 13.15 os模块
- 13.16 Net模块和DNS模块
- 13.17 Express框架
- 13.18 Koa 框架