扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识，最佳做法和常见的陷阱。
一、入门
编写一个jQuery插件开始于给jQuery.fn加入新的功能属性，此处添加的对象属性的名称就是你插件的名称：
jQuery.fn.myPlugin = function(){//你自己的插件代码
};
用户非常喜欢的$符号哪里去了？ 它仍然存在，但是，为了避免和其他JavaScript库冲突，我们最好将jQuery传递给一个自我执行的封闭程序，jQuery在此程序中映射为$符号，这样可以避免$号被其他库覆写。
$.fn.myPlugin = function () {
//你自己的插件代码
};
})(jQuery);
在这个封闭程序中，我们可以无限制的使用$符号来表示jQuery函数。
二、环境
现在，我们可以开始编写实际的插件代码。 但是，在这之前，我们必须得对插件所处的环境有个概念。 在插件的范围里， this关键字代表了这个插件将要执行的jQuery对象， 这里容易产生一个普遍的误区，因为在其他包含callback的jQuery函数中，this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中，如下所示。
$.fn.myPlugin = function () {//此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。
//$(this)等同于 $($('#element'));this.fadeIn('normal', function () {//此处callback函数中this关键字代表一个DOM元素});
};
})(jQuery);
$('#element').myPlugin();
三、基础知识
现在，我们理解了jQuery插件的基础知识，让我们写一个插件，做一些事情。
(function ($) {$.fn.maxHeight = function () {
var max = 0;
this.each(function () {
max = Math.max(max, $(this).height());
});
return max;
};
})(jQuery);
var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度
这是一个简单的插件，利用.height()返回页面中高度最大的div元素的高度。
四、维护Chainability
很多时候，一个插件的意图仅仅是以某种方式修改收集的元素，并把它们传递给链中的下一个方法。 这是jQuery的设计之美，是jQuery如此受欢迎的原因之一。 因此，要保持一个插件的chainability，你必须确保你的插件返回this关键字。
(function ($) {$.fn.lockDimensions = function (type) {
return this.each(function () {
var $this = $(this);
if (!type || type == 'width') {
$this.width($this.width());
}
if (!type || type == 'height') {
$this.height($this.height());
}
});
};
})(jQuery);
$('div').lockDimensions('width').CSS('color', 'red');
由于插件返回this关键字，它保持了chainability，这样jQuery收集的元素可以继续被jQuery方法如.css控制。 因此，如果你的插件不返回固有的价值，你应该总是在其作用范围内返回this关键字。 此外，你可能会推断出，传递给插件的参数将会在插件的作用范围内被传递。 因此，在前面的例子，字符串'width'变成了插件的类型参数。
五、默认值和选项
对于比较复杂的和提供了许多选项可定制的的插件，最好有一个当插件被调用的时候可以被拓展的默认设置(通过使用$.extend)。 因此，相对于调用一个有大量参数的插件，你可以调用一个对象参数，包含你了你想覆写的设置。
(function ($) {$.fn.tooltip = function (options) {
//创建一些默认值，拓展任何被提供的选项
var settings = $.extend({
'location': 'top',
'background-color': 'blue'
}, options);
return this.each(function () {
// Tooltip插件代码
});
};
})(jQuery);
$('div').tooltip({
'location': 'left'
});
在这个例子中，调用tooltip插件时覆写了默认设置中的location选项，background-color选项保持默认值，所以最终被调用的设定值为：
'location': 'left',
'background-color': 'blue'
}
这是一个很灵活的方式，提供一个高度可配置的插件，而无需开发人员定义所有可用的选项。
六、命名空间
正确命名空间你的插件是插件开发的一个非常重要的一部分。 正确的命名空间，可以保证你的插件将有一个非常低的机会被其他插件或同一页上的其他代码覆盖。 命名空间也使得你的生活作为一个插件开发人员更容易，因为它可以帮助你更好地跟踪你的方法，事件和数据。
七、插件方法
在任何情况下，一个单独的插件不应该在jQuery.fnjQuery.fn对象里有多个命名空间。
// this
};
$.fn.tooltipShow = function () {
// is
};
$.fn.tooltipHide = function () {
// bad
};
$.fn.tooltipUpdate = function (content) {
// !!!
};})(jQuery);
这是不被鼓励的，因为它$.fn使$.fn命名空间混乱。 为了解决这个问题，你应该收集对象文本中的所有插件的方法，通过传递该方法的字符串名称给插件以调用它们。
init: function (options) {
// this
},
show: function () {
// is
},
hide: function () {
// good
},
update: function (content) {
// !!!
}
};$.fn.tooltip = function (method) {// 方法调用
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method' + method + 'does not exist on jQuery.tooltip');
}};
})(jQuery);
//调用init方法
$('div').tooltip();
//调用init方法
$('div').tooltip({
foo: 'bar'
});
// 调用hide方法
$('div').tooltip('hide');
//调用Update方法
$('div').tooltip('update', 'This is the new tooltip content!');
这种类型的插件架构允许您封装所有的方法在父包中，通过传递该方法的字符串名称和额外的此方法需要的参数来调用它们。 这种方法的封装和架构类型是jQuery插件社区的标准，它被无数的插件在使用，包括jQueryUI中的插件和widgets。
八、事件
一个鲜为人知bind方法的功能即允许绑定事件命名空间。 如果你的插件绑定一个事件，一个很好的做法是赋予此事件命名空间。 通过这种方式，当你在解除绑定的时候不会干扰其他可能已经绑定的同一类型事件。 你可以通过追加命名空间到你需要绑定的的事件通过 ‘.<namespace>'。
init: function (options) {return this.each(function () {
$(window).bind('resize.tooltip', methods.reposition);
});},
destroy: function () {return this.each(function () {
$(window).unbind('.tooltip');
})
},
reposition: function () {
//...
},
show: function () {
//...
},
hide: function () {
//...
},
update: function (content) {
//...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};
})(jQuery);
$('#fun').tooltip();
//一段时间之后... ...
$('#fun').tooltip('destroy');
在这个例子中，当tooltip通过init方法初始化时，它将reposition方法绑定到resize事件并给reposition非那方法赋予命名空间通过追加.tooltip。 稍后， 当开发人员需要销毁tooltip的时候，我们可以同时解除其中reposition方法和resize事件的绑定，通过传递reposition的命名空间给插件。 这使我们能够安全地解除事件的绑定并不会影响到此插件之外的绑定。
九、数据
通常在插件开发的时候，你可能需要记录或者检查你的插件是否已经被初始化给了一个元素。 使用jQuery的data方法是一个很好的基于元素的记录变量的途径。尽管如此，相对于记录大量的不同名字的分离的data, 使用一个单独的对象保存所有变量，并通过一个单独的命名空间读取这个对象不失为一个更好的方法。
init: function (options) {return this.each(function () {var $this = $(this),
data = $this.data('tooltip'),
tooltip = $('<div />', {
text: $this.attr('title')
});// If the plugin hasn't been initialized yet
if (!data) {
/*
Do more setup stuff here
*/
$(this).data('tooltip', {
target: $this,
tooltip: tooltip
});
}
});
},
destroy: function () {
return this.each(function () {
var $this = $(this),
data = $this.data('tooltip');
// Namespacing FTW
$(window).unbind('.tooltip');
data.tooltip.remove();
$this.removeData('tooltip');
})
},
reposition: function () {
// ...
},
show: function () {
// ...
},
hide: function () {
// ...
},
update: function (content) {
// ...
}
};
$.fn.tooltip = function (method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.tooltip');
}
};
})(jQuery);
将数据通过命名空间封装在一个对象中，可以更容易的从一个集中的位置读取所有插件的属性。
十、总结和最佳做法
编写jQuery插件允许你做出库，将最有用的功能集成到可重用的代码，可以节省开发者的时间，使开发更高效。 开发jQuery插件时，要牢记：
1.始终包裹在一个封闭的插件：
/* plugin goes here */
})(jQuery);
2.不要冗余包裹this关键字在插件的功能范围内
3.除非插件返回特定值，否则总是返回this关键字来维持chainability 。
4.传递一个可拓展的默认对象参数而不是大量的参数给插件。
5.不要在一个插件中多次命名不同方法。
3.始终命名空间的方法，事件和数据。
一、jquery的插件机制
为了方便用户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
1. jQuery.extend() 方法有一个重载。
jQuery.extend(object) ,一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像 "类名.方法名" 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
//sample:扩展jquery对象的方法，bold()用于加粗字体。 (function ($) { $.fn.extend({ "bold": function () { ///<summary> /// 加粗字体 ///</summary> return this.css({ fontWeight: "bold" }); } }); })(jQuery); //扩展jQuery对象本身 jQuery.extend({ "minValue": function (a, b) { ///<summary> /// 比较两个值，返回最小值 ///</summary> return a < b ? a : b; }, "maxValue": function (a, b) { ///<summary> /// 比较两个值，返回最大值 ///</summary> return a > b ? a : b; } }); //调用 var i = 100; j = 101; var min_v = $.minValue(i, j); // min_v 等于 100 var max_v = $.maxValue(i, j); // max_v 等于 101 |
重载版本：
jQuery.extend([deep], target, object1, [objectN])
用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。
如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。
未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。
参数：
deep: 可选。如果设为true，则递归合并。
target: 待修改对象。
object1: 待合并到第一个对象的对象。
objectN: 可选。待合并到第一个对象的对象。
示例1：
合并 settings 和 options，修改并返回 settings。
示例1：
合并 settings 和 options，修改并返回 settings。
|
1 2 3 |
var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); |
结果：
|
1 |
settings == { validate: true, limit: 5, name: "bar" } |
示例2：
合并 defaults 和 options, 不修改 defaults。
|
1 2 3 4 |
var empty = {}; var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; var settings = jQuery.extend(empty, defaults, options); |
结果：
|
1 2 |
settings == { validate: true, limit: 5, name: "bar" } empty == { validate: true, limit: 5, name: "bar" } |
这个重载的方法，我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。
jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
首先我们来看fn 是什么东西呢。查看jQuery代码，就不难发现。
|
1 2 3 |
jQuery.fn = jQuery.prototype = { init: function( selector, context ) {.....}; }; |
原来 jQuery.fn = jQuery.prototype，也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我 们知道扩展原型上的方法，就相当于为对象添加"成员方法"，类的"成员方法"要类的对象才能调用，所以使用 jQuery.fn.extend(object)扩展的方法， jQuery类的实例可以使用这个"成员函数"。jQuery.fn.extend(object)和jQuery.extend(object)方法一 定要区分开来。
二、自执行的匿名函数/闭包
1. 什么是自执行的匿名函数?
它是指形如这样的函数:
|
1 |
(function {// code})(); |
2. 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错?
3. 分析
(1). 首先, 要清楚两者的区别:
(function {// code})是表达式, function {// code}是函数声明.
(2). 其次, js"预编译"的特点:
js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.
(3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;
当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.
另外， 函数转换为表达式的方法并不一定要靠分组操作符()，我们还可以用void操作符，~操作符，!操作符……
例如：
bootstrap 框架中的插件写法：
|
1 2 3 |
!function($){ //do something; }(jQuery); |
和
|
1 2 3 |
(function($){ //do something; })(jQuery); |
是一回事。
匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。
例如：
|
1 2 3 4 5 |
var a=1; (function()(){ var a=100; })(); alert(a); //弹出 1 |
三、一步一步封装JQuery插件
接下来我们一起来写个高亮的jqury插件
1.定一个闭包区域，防止插件"污染"
|
1 2 3 |
//闭包限定命名空间 (function ($) { })(window.jQuery); |
2.jQuery.fn.extend(object)扩展jquery 方法，制作插件
|
1 2 3 4 5 6 7 8 |
//闭包限定命名空间 (function ($) { $.fn.extend({ "highLight":function(options){ //do something } }); })(window.jQuery); |
3.给插件默认参数，实现 插件的功能
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//闭包限定命名空间 (function ($) { $.fn.extend({ "highLight": function (options) { var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数 this.each(function () { //这里的this 就是 jQuery对象 //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。 var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom //根据参数来设置 dom的样式 $this.css({ backgroundColor: opts.background, color: opts.foreground }); }); } }); //默认参数 var defaluts = { foreground: 'red', background: 'yellow' }; })(window.jQuery); |
到这一步，高亮插件基本功能已经具备了。调用代码如下：
|
1 2 3 |
$(function () { $("p").highLight(); //调用自定义 高亮插件 }); |
这里只能 直接调用，不能链式调用。我们知道jQuey是可以链式调用的，就是可以在一个jQuery对象上调用多个方法，如：
|
1
|
$('#id').css({marginTop:'100px'}).addAttr("title","测试"); |
但是我们上面的插件，就不能这样链式调用了。比如：
|
1
|
$("p").highLight().css({marginTop:'100px'}); |
将会报找不到css方法，原因在与我的自定义插件在完成功能后，没有将 jQuery对象给返回出来。接下来，return jQuery对象，让我们的插件也支持链式调用。（其实很简单，就是执行完我们插件代码的时候将jQuery对像return 出来，和上面的代码没啥区别）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//闭包限定命名空间 (function ($) { $.fn.extend({ "highLight": function (options) { var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数 return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用 //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。 var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom //根据参数来设置 dom的样式 $this.css({ backgroundColor: opts.background, color: opts.foreground }); }); } }); //默认参数 var defaluts = { foreground: 'red', background: 'yellow' }; })(window.jQuery); |
4.暴露公共方法 给别人来扩展你的插件（如果有需求的话）
比如的高亮插件有一个format方法来格式话高亮文本，则我们可将它写成公共的，暴露给插件使用者，不同的使用着根据自己的需求来重写该format方法，从而是高亮文本可以呈现不同的格式。
|
1 2 3 4 |
//公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。 $.fn.highLight.format = function (str) { return "<strong>" + str + "</strong>"; } |
5.插件私有方法
有些时候，我们的插件需要一些私有方法，不能被外界访问。例如 我们插件里面需要有个方法 来检测用户调用插件时传入的参数是否符合规范。
6.其他的一些设置，如：为你的插件加入元数据插件的支持将使其变得更强大。
完整的高亮插件代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
//闭包限定命名空间 (function ($) { $.fn.extend({ "highLight": function (options) { //检测用户传进来的参数是否合法 if (!isValid(options)) return this; var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数 return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用 //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。 var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom //根据参数来设置 dom的样式 $this.css({ backgroundColor: opts.background, color: opts.foreground }); //格式化高亮文本 var markup = $this.html(); markup = $.fn.highLight.format(markup); $this.html(markup); }); } }); //默认参数 var defaluts = { foreground: 'red', background: 'yellow' }; //公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。 $.fn.highLight.format = function (str) { return "<strong>" + str + "</strong>"; } //私有方法，检测参数是否合法 function isValid(options) { return !options || (options && typeof options === "object") ? true : false; } })(window.jQuery); |
|
1 2 3 4 5 6 7 8 |
//调用 //调用者覆盖 插件暴露的共公方法 $.fn.highLight.format = function (txt) { return "<em>" + txt + "</em>" } $(function () { $("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件 }); |
jQuery插件开发全解析
jQuery插件的开发包括两种：
一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。
1、类级别的插件开发
类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：
1.1 添加一个新的全局函数
添加一个全局函数，我们只需如下定义：
JavaScript代码
|
1 2 3 |
jQuery.foo = function() { alert('This is a test. This is only a test.'); }; |
1.2 增加多个全局函数
添加多个全局函数，可采用如下定义：
JavaScript代码
|
1 2 3 4 5 6 |
jQuery.foo = function() { alert('This is a test. This is only a test.'); }; jQuery.bar = function(param) { alert('This function takes a parameter, which is "' + param + '".'); }; |
调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');
1.3 使用jQuery.extend(object);
|
1 2 3 4 5 6 7 8 |
jQuery.extend({ foo: function() { alert('This is a test. This is only a test.'); }, bar: function(param) { alert('This function takes a parameter, which is "' + param +'".'); } }); |
1.4 使用命名空间
虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。
|
1 2 3 4 5 6 7 8 9 10 11 |
jQuery.myPlugin = { foo:function() { alert('This is a test. This is only a test.'); }, bar:function(param) { alert('This function takes a parameter, which is "' + param + '".'); } }; //采用命名空间的函数仍然是全局函数，调用时采用的方法： $.myPlugin.foo(); $.myPlugin.bar('baz'); |
通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。
2、对象级别的插件开发
对象级别的插件开发需要如下的两种形式：
形式1：
|
1 2 3 4 5 6 7 |
(function($){ $.fn.extend({ pluginName:function(opt,callback){ // Our plugin implementation code goes here. } }) })(jQuery); |
形式2：
JavaScript代码
|
1 2 3 4 5 |
(function($) { $.fn.pluginName = function() { // Our plugin implementation code goes here. }; })(jQuery); |
上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.
这是一个单一插件的脚本。如果你的脚本中包含多个插件，或者互逆的插件（例如： $.fn.doSomething() 和$.fn.undoSomething()），那么你需要声明多个函数名字。但是，通常当我们编写一个插件时，力求仅使用一个名字来包含它的所有内容。我们的示例插件命名为“highlight“
|
1 2 3 4 5 |
$.fn.<span class="hljs-property">hilight</span> = <span class="hljs-keyword">function</span>() { <span class="hljs-comment">// Our plugin implementation code goes here. </span> }; //我们的插件通过这样被调用： $(<span class="hljs-string">'#myDiv'</span>).<span class="hljs-title function_">hilight</span>(); |
但是如果我们需要分解我们的实现代码为多个函数该怎么办？有很多原因：设计上的需要；这样做更容易或更易读的实现；而且这样更符合面向对象。 这真是一个麻烦事，把功能实现分解成多个函数而不增加多余的命名空间。出于认识到和利用函数是javascript中最基本的类对象，我们可以这样做。就像其他对象一样，函数可以被指定为属性。因此我们已经声明“hilight”为jQuery的属性对象，任何其他的属性或者函数我们需要暴露出来的，都可以在"hilight" 函数中被声明属性。稍后继续。
2.2 接受options参数以控制插件的行为
让我们为我们的插件添加功能指定前景色和背景色的功能。我们也许会让选项像一个options对象传递给插件函数。例如：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// plugin definition $.fn.hilight = function(options) { var defaults = { foreground: 'red', background: 'yellow' }; // Extend our default options with those provided. var opts = $.extend(defaults, options); // Our plugin implementation code goes here. }; //我们的插件可以这样被调用： $('#myDiv').hilight({ foreground: 'blue' }); |
2.3 暴露插件的默认设置
我们应该对上面代码的一种改进是暴露插件的默认设置。这对于让插件的使用者更容易用较少的代码覆盖和修改插件。接下来我们开始利用函数对象。
JavaScript代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// plugin definition $.fn.hilight = function(options) { // Extend our default options with those provided. // Note that the first arg to extend is an empty object - // this is to keep from overriding our "defaults" object. var opts = $.extend({}, $.fn.hilight.defaults, options); // Our plugin implementation code goes here. }; // plugin defaults - added as a property on our plugin function $.fn.hilight.defaults = { foreground: 'red', background: 'yellow' }; //现在使用者可以包含像这样的一行在他们的脚本里： //这个只需要调用一次，且不一定要在ready块中调用 $.fn.hilight.defaults.foreground = 'blue'; //接下来我们可以像这样使用插件的方法，结果它设置蓝色的前景色： $('#myDiv').hilight(); |
如你所见，我们允许使用者写一行代码在插件的默认前景色。而且使用者仍然在需要的时候可以有选择的覆盖这些新的默认值：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 覆盖插件缺省的背景颜色 $.fn.hilight.defaults.foreground = 'blue'; // ... // 使用一个新的缺省设置调用插件 $('.hilightDiv').hilight(); // ... // 通过传递配置参数给插件方法来覆盖缺省设置 $('#green').hilight({ foreground: 'green' }); |
2.4 适当的暴露一些函数
这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件（同时让其他人扩展你的插件）。例如，我们插件的实现里面可以定义一个名叫"format"的函数来格式化高亮文本。我们的插件现在看起来像这样，默认的format方法的实现部分在hiligth函数下面。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// plugin definition $.fn.hilight = function(options) { // iterate and reformat each matched element return this.each(function() { var $this = $(this); // ... var markup = $this.html(); // call our format function markup = $.fn.hilight.format(markup); $this.html(markup); }); }; // define our format function $.fn.hilight.format = function(txt) { return '<strong>' + txt + '</strong>'; }; |
我们很容易的支持options对象中的其他的属性通过允许一个回调函数来覆盖默认的设置。这是另外一个出色的方法来修改你的插件。这里展示的技巧是进一步有效的暴露format函数进而让他能被重新定义。通过这技巧，是其他人能够传递他们自己设置来覆盖你的插件，换句话说，这样其他人也能够为你的插件写插件。
|
1 2 3 4 5 |
$.fn.cycle.transitions = { // ... }; |
这个技巧使其他人能定义和传递变换设置到Cycle插件。
2.5 保持私有函数的私有性
这种技巧暴露你插件一部分来被覆盖是非常强大的。但是你需要仔细思考你实现中暴露的部分。一但被暴露，你需要在头脑中保持任何对于参数或者语义的改动也许会破坏向后的兼容性。一个通理是，如果你不能肯定是否暴露特定的函数，那么你也许不需要那样做。
那么我们怎么定义更多的函数而不搅乱命名空间也不暴露实现呢？这就是闭包的功能。为了演示，我们将会添加另外一个“debug”函数到我们的插件中。这个 debug函数将为输出被选中的元素格式到firebug控制台。为了创建一个闭包，我们将包装整个插件定义在一个函数中。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
(function($) { // plugin definition $.fn.hilight = function(options) { debug(this); // ... }; // private function for debugging function debug($obj) { if (window.console && window.console.log) window.console.log('hilight selection count: ' + $obj.size()); }; // ... })(jQuery); |
我们的“debug”方法不能从外部闭包进入,因此对于我们的实现是私有的。
2.6 支持Metadata插件
在你正在写的插件的基础上，添加对Metadata插件的支持能使他更强大。个人来说，我喜欢这个Metadata插件，因为它让你使用不多的"markup”覆盖插件的选项（这非常有用当创建例子时）。而且支持它非常简单。更新：注释中有一点优化建议。
|
1 2 3 4 5 6 7 8 9 |
$.fn.hilight = function(options) { // ... // build main options before element iteration var opts = $.extend({}, $.fn.hilight.defaults, options); return this.each(function() { var $this = $(this); //build element specific options var o = $.meta ? $.extend({}, opts, $this.data()) : opts //... |
这些变动行做了一些事情：它是测试Metadata插件是否被安装如果它被安装了，它能扩展我们的options对象通过抽取元数据这行作为最后一个参数添加到JQuery.extend，那么它将会覆盖任何其它选项设置。现在我们能从"markup”处驱动行为,如果我们选择了“markup”：
调用的时候可以这样写： jQuery.foo(); 或 $.foo();
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- markup --> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hilight { background: 'red', foreground: 'white' } Have a nice day! </div></span></span></span> <span class="language-xml"><span class="hljs-tag"><span class="hljs-string"><div class="</span><span class="hljs-attr">hilight</span> { <span class="hljs-attr">foreground:</span> '<span class="hljs-attr">orange</span>' }"></span> Have a nice day! <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span> <span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"hilight { background: 'green' }"</span>></span> Have a nice day! <span class="hljs-tag"></<span class="hljs-name">div</span>></span></span> 现在我们能高亮哪些div仅使用一行脚本： $(<span class="hljs-string">'.hilight'</span>).<span class="hljs-title function_">hilight</span>(); </code>2.7 整合 下面使我们的例子完成后的代码： |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
// 创建一个闭包 (function($) { // 插件的定义 $.fn.hilight = function(options) { debug(this); // build main options before element iteration var opts = $.extend({}, $.fn.hilight.defaults, options) // iterate and reformat each matched element return this.each(function() { $this = $(this); // build element specific options var o = $.meta ? $.extend({}, opts, $this.data()) : opts; // update element styles $this.css({ backgroundColor: o.background, color: o.foreground }); var markup = $this.html(); // call our format function markup = $.fn.hilight.format(markup); $this.html(markup); }); }; // 私有函数：debugging function debug($obj) { if (window.console && window.console.log) window.console.log('hilight selection count: ' + $obj.size()); }; // 定义暴露format函数 $.fn.hilight.format = function(txt) { return '<strong>' + txt + '</strong>'; }; // 插件的defaults $.fn.hilight.defaults = { foreground: 'red', background: 'yellow' }; // 闭包结束 })(jQuery); |
这段设计已经让我创建了强大符合规范的插件。我希望它能让你也能做到。
3、总结
jQuery为开发插件提拱了两个方法，分别是：
|
1 2 |
jQuery.fn.extend(object); //给jQuery对象添加方法。$("div").foo()或jQuery("div").foo() jQuery.extend(object); //为扩展jQuery类本身.为类添加新的方法。$.foo()或jQuery.foo() |
给jQuery对象添加方法。$("div").foo()或jQuery("div").foo()
为扩展jQuery类本身.为类添加新的方法。$.foo()或jQuery.foo()
3.1 jQuery.fn.extend(object);
fn 是什么东西呢。查看jQuery代码，就不难发现。
|
1 2 3 4 5 6 7 |
jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//.... //...... }; |
原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。虽然 javascript 没有明确的类的概念，但是用类来理解它，会更方便。jQuery便是一个封装得非常好的类，比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。
jQuery.fn.extend(object); 对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：
|
1 2 3 4 5 6 7 |
$.fn.extend({ alertWhileClick:function(){ $(this).click(function(){ alert($(this).val()); }); } }); |
$("#input1").alertWhileClick(); //页面上为：<input id="input1" type="text"/>
$("#input1") 为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。
3.2 jQuery.extend(object);
为jQuery类添加添加类方法，可以理解为添加静态方法。如：
|
1 2 3 |
$.extend({ add:function(a,b){return a+b;} }); |
便为jQuery添加一个为add的“静态方法”，之后便可以在引入jQuery的地方，使用这个方法了，$.add(3,4); //return 7
jQuery插件开发模式
软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能更好地组织我们的代码，并且从这些前人总结出来的模式中学到很多好的实践。
根据《jQuery高级编程》的描述，jQuery插件开发方式主要有三种：
- 通过$.extend()来扩展jQuery
- 通过$.fn 向jQuery添加新的方法
- 通过$.widget()应用jQuery UI的部件工厂方式创建
通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的，该模式开发出来的部件带有很多jQuery内建的特性，比如插件的状态信息自动保存，各种关于插件的常用方法等，非常贴心，这里不细说。
而第一种方式又太简单，仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的函数时直接通过$符号调用（$.myfunction()）而不需要选中DOM元素($('#example').myfunction())。请看下面的例子。
|
1 2 3 4 5 6 7 |
$.extend({ sayHello: function(name) { console.log('Hello,' + (name ? name : 'Dude') + '!'); } }) $.sayHello(); //调用 $.sayHello('Wayou'); //带参调用 |
但这种方式无法利用jQuery强大的选择器带来的便利，要处理DOM元素以及将插件更好地运用于所选择的元素身上，还是需要使用第二种开发方式。你所见到或使用的插件也大多是通过此种方式开发。
插件开发
下面我们就来看第二种方式的jQuery插件开发。
基本方法
先看一下它的基本格式：
|
1 2 3 |
$.fn.pluginName = function() { //your code goes here } |
基本上就是往$.fn上面添加一个方法，名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。
比如我们将页面上所有链接颜色转成红色，则可以这样写这个插件：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$.fn.myPlugin = function() { //在这里面,this指的是用jQuery选中的元素 //example :$('a'),则this=$('a') this.css('color', 'red'); } //或者用下面的方法，两者都可以 $.fn.extend({ myPlugin:function(){ //在这里面,this指的是用jQuery选中的元素 //example :$('a'),则this=$('a') this.css('color', 'red'); } }) |
在插件名字定义的这个函数内部，this指代的是我们在调用该插件时，用jQuery选择器选中的元素，一般是一个jQuery类型的集合。比如$('a')返回的是页面上所有a标签的集合，且这个集合已经是jQuery包装类型了，也就是说，在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用美元符号来包装一下。
所以在上面插件代码中，我们在this身上调用jQuery的css()方法，也就相当于在调用 $('a').css()。
理解this在这个地方的含义很重要。这样你才知道为什么可以直接商用jQuery方法同时在其他地方this指代不同时我们又需要用jQuery重新包装才能调用，下面会讲到。初学容易被this的值整晕，但理解了就不难。
现在就可以去页面试试我们的代码了，在页面上放几个链接，调用插件后链接字体变成红色。
下面进一步，在插件代码里处理每个具体的元素，而不是对一个集合进行处理，这样我们就可以针对每个元素进行相应操作。
我们已经知道this指代jQuery选择器返回的集合，那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了，但此刻要注意的是，在each方法内部，this指带的是普通的DOM元素了，如果需要调用jQuery的方法那就需要用$来重新包装一下。
比如现在我们要在每个链接显示链接的真实地址，首先通过each遍历所有a标签，然后获取href属性的值再加到链接文本后面。
更改后我们的插件代码为：
|
1 2 3 4 5 6 7 8 |
$.fn.myPlugin = function() { //在这里面,this指的是用jQuery选中的元素 this.css('color', 'red'); this.each(function() { //对每个元素进行操作 $(this).append(' ' + $(this).attr('href')); })) } |
|
1 2 3 4 5 6 7 8 9 10 11 |
$.fn.myPlugin = function(options) { var defaults = { 'color': 'red', 'fontSize': '12px' }; var settings = $.extend(defaults, options); return this.css({ 'color': settings.color, 'fontSize': settings.fontSize }); } |
|
1 2 3 |
$('a').myPlugin({ 'color': '#2C9929' }); |
一个好的做法是将一个新的空对象做为$.extend的第一个参数，defaults和用户传递的参数对象紧随其后，这样做的好处是所有值被合并到这个空对象上，保护了插件里面的默认值。
|
1 2 3 4 5 6 7 8 9 10 11 |
$.fn.myPlugin = function(options) { var defaults = { 'color': 'red', 'fontSize': '12px' }; var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数 return this.css({ 'color': settings.color, 'fontSize': settings.fontSize }); } |
到此，插件可以接收和处理参数后，就可以编写出更健壮而灵活的插件了。若要编写一个复杂的插件，代码量会很大，如何组织代码就成了一个需要面临的问题，没有一个好的方式来组织这些代码，整体感觉会杂乱无章，同时也不好维护，所以将插件的所有方法属性包装到一个对象上，用面向对象的思维来进行开发，无疑会使工作轻松很多。
面向对象的插件开发
为什么要有面向对象的思维，因为如果不这样，你可能需要一个方法的时候就去定义一个function，当需要另外一个方法的时候，再去随便定义一个function，同样，需要一个变量的时候，毫无规则地定义一些散落在代码各处的变量。
还是老问题，不方便维护，也不够清晰。当然，这些问题在代码规模较小时是体现不出来的。
如果将需要的重要变量定义到对象的属性上，函数变成对象的方法，当我们需要的时候通过对象来获取，一来方便管理，二来不会影响外部命名空间，因为所有这些变量名还有方法名都是在对象内部。
接着上面的例子，我们可以把这个插件抽象成一个美化页面的对象，因为他的功能是设置颜色啊字体啊什么的，当然我们还可以加入其他功能比如设置下划线啊什么的。当然对于这个例子抽象成对象有点小题大做，这里仅作演示用。以后我可能会介绍我编写的一个jQuery插件SlipHover,其中代码就比较多，这样的模式就用得上了。
所以我们新建一个对象命名为Beautifier，然后我们在插件里使用这个对象来编码。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
//定义Beautifier的构造函数 var Beautifier = function(ele, opt) { this.$element = ele, this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration':'none' }, this.options = $.extend({}, this.defaults, opt) } //定义Beautifier的方法 Beautifier.prototype = { beautify: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize, 'textDecoration': this.options.textDecoration }); } } //在插件中使用Beautifier对象 $.fn.myPlugin = function(options) { //创建Beautifier的实体 var beautifier = new Beautifier(this, options); //调用其方法 return beautifier.beautify(); } |
通过上面这样一改造，我们的代码变得更面向对象了，也更好维护和理解，以后要加新功能新方法，只需向对象添加新变量及方法即可，然后在插件里实例化后即可调用新添加的东西。
插件的调用还是一样的，我们对代码的改动并不影响插件其他地方，只是将代码的组织结构改动了而以。
|
1 2 3 4 5 6 |
$(function() { $('a').myPlugin({ 'color': '#2C9929', 'fontSize': '20px' }); }) |
指定文字带下划线（我们在Beautifier对象中新加的功能，默认不带下划线，如上面的例子）的调用：
|
1 2 3 4 5 6 7 |
$(function() { $('a').myPlugin({ 'color': '#2C9929', 'fontSize': '20px', 'textDecoration': 'underline' }); }) |
到这里，你可以更好地编写复杂的插件同时很好地组织代码了。当我们回头去看上面的代码时，其实也还是有改进空间的。也就是下面介绍的关于命名空间及变量各什么的，一些杂项。
关于命名空间
不仅仅是jQuery插件的开发，我们在写任何JS代码时都应该注意的一点是不要污染全局命名空间。因为随着你代码的增多，如果有意无意在全局范围内定义一些变量的话，最后很难维护，也容易跟别人写的代码有冲突。
比如你在代码中向全局window对象添加了一个变量status用于存放状态，同时页面中引用了另一个别人写的库，也向全局添加了这样一个同名变量，最后的结果肯定不是你想要的。所以不到万不得已，一般我们不会将变量定义成全局的。
一个好的做法是始终用自调用匿名函数包裹你的代码，这样就可以完全放心，安全地将它用于任何地方了，绝对没有冲突。
用自调用匿名函数包裹你的代码
我们知道JavaScript中无法用花括号方便地创建作用域，但函数却可以形成一个作用域，域内的代码是无法被外界访问的。如果我们将自己的代码放入一个函数中，那么就不会污染全局命名空间，同时不会和别的代码冲突。
如上面我们定义了一个Beautifier全局变量，它会被附到全局的window对象上，为了防止这种事情发生，你或许会说，把所有代码放到jQuery的插件定义代码里面去啊，也就是放到$.fn.myPlugin里面。这样做倒也是种选择。但会让我们实际跟插件定义有关的代码变得臃肿，而在$.fn.myPlugin里面我们其实应该更专注于插件的调用，以及如何与jQuery互动。
所以保持原来的代码不变，我们将所有代码用自调用匿名函数包裹。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
(function() { //定义Beautifier的构造函数 var Beautifier = function(ele, opt) { this.$element = ele, this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration': 'none' }, this.options = $.extend({}, this.defaults, opt) } //定义Beautifier的方法 Beautifier.prototype = { beautify: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize, 'textDecoration': this.options.textDecoration }); } } //在插件中使用Beautifier对象 $.fn.myPlugin = function(options) { //创建Beautifier的实体 var beautifier = new Beautifier(this, options); //调用其方法 return beautifier.beautify(); } })(); |
这样做的好处，也就是上面所阐述的那样。另外还有一个好处就是，自调用匿名函数里面的代码会在第一时间执行，页面准备好过后，上面的代码就将插件准备好了，以方便在后面的代码中使用插件。
目前为止似乎接近完美了。如果再考虑到其他一些因素，比如我们将这段代码放到页面后，前面别人写的代码没有用分号结尾，或者前面的代码将window, undefined等这些系统变量或者关键字修改掉了，正好我们又在自己的代码里面进行了使用，那结果也是不可预测的，这不是 我们想要的。我知道其实你还没太明白，下面详细介绍。
将系统变量以变量形式传递到插件内部
来看下面的代码，你猜他会出现什么结果？
|
1 2 3 4 5 6 7 8 9 |
var foo=function(){ //别人的代码 }//注意这里没有用分号结尾 //开始我们的代码。。。 (function(){ //我们的代码。。 alert('Hello!'); })(); |
本来别人的代码也正常工作，只是最后定义的那个函数没有用分号结尾而以，然后当页面中引入我们的插件时，报错了，我们的代码无法正常执行。
原因是我们用来充当自调用匿名函数的第一对括号与上面别人定义的函数相连，因为中间没有分号嘛，总之我们的代码无法正常解析了，所以报错。
所以好的做法是我们在代码开头加一个分号，这在任何时候都是一个好的习惯。
|
1 2 3 4 5 6 7 8 9 |
var foo=function(){ //别人的代码 }//注意这里没有用分号结尾 //开始我们的代码。。。 ;(function(){ //我们的代码。。 alert('Hello!'); })(); |
同时，将系统变量以参数形式传递到插件内部也是个不错的实践。
当我们这样做之后，window等系统变量在插件内部就有了一个局部的引用，可以提高访问速度，会有些许性能的提升
最后我们得到一个非常安全结构良好的代码：
|
1 2 3 4 |
;(function($,window,document,undefined){ //我们的代码。。 //blah blah blah... })(jQuery,window,document); |
而至于这个undefined，稍微有意思一点，为了得到没有被修改的undefined，我们并没有传递这个参数，但却在接收时接收了它，因为实际并没有传，所以‘undefined’那个位置接收到的就是真实的'undefined'了。是不是有点hack的味道，值得细细体会的技术，当然不是我发明的，都是从前人的经验中学习。
所以最后我们的插件成了这样：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
;(function($, window, document,undefined) { //定义Beautifier的构造函数 var Beautifier = function(ele, opt) { this.$element = ele, this.defaults = { 'color': 'red', 'fontSize': '12px', 'textDecoration': 'none' }, this.options = $.extend({}, this.defaults, opt) } //定义Beautifier的方法 Beautifier.prototype = { beautify: function() { return this.$element.css({ 'color': this.options.color, 'fontSize': this.options.fontSize, 'textDecoration': this.options.textDecoration }); } } //在插件中使用Beautifier对象 $.fn.myPlugin = function(options) { //创建Beautifier的实体 var beautifier = new Beautifier(this, options); //调用其方法 return beautifier.beautify(); } })(jQuery, window, document); |
一个安全，结构良好，组织有序的插件编写完成。
关于变量定义及命名
现在谈谈关于变量及方法等的命名，没有硬性规定，但为了规范，遵循一些约定还是很有必要的。
变量定义：好的做法是把将要使用的变量名用一个var关键字一并定义在代码开头，变量名间用逗号隔开。原因有二：
- 一是便于理解，知道下面的代码会用到哪些变量，同时代码显得整洁且有规律，也方便管理，变量定义与逻辑代码分开；
- 二是因为JavaScript中所有变量及函数名会自动提升，也称之为JavaScript的Hoist特性，即使你将变量的定义穿插在逻辑代码中，在代码解析运行期间，这些变量的声明还是被提升到了当前作用域最顶端的，所以我们将变量定义在一个作用域的开头是更符合逻辑的一种做法。当然，再次说明这只是一种约定，不是必需的。
变量及函数命名 一般使用驼峰命名法（CamelCase），即首个单词的首字母小写，后面单词首字母大写，比如resultArray，requestAnimationFrame。对于常量，所有字母采用大写，多个单词用下划线隔开，比如WIDTH=100，BRUSH_COLOR='#00ff00'。当变量是jQuery类型时，建议以$开头，开始会不习惯，但经常用了之后会感觉很方便，因为可以很方便地将它与普通变量区别开来，一看到以$开头我们就知道它是jQuery类型可以直接在其身上调用jQuery相关的方法，比如var $element=$('a'); 之后就可以在后面的代码中很方便地使用它，并且与其他变量容易区分开来。
引号的使用：既然都扯了这些与插件主题无关的了，这里再多说一句，一般HTML代码里面使用双引号，而在JavaScript中多用单引号，比如下面代码所示：
|
1 2 |
var name = 'Wayou'; document.getElementById(‘example’).innerHTML = '< a href="http: //wayouliu.duapp.com/">'+name+'</a>'; //href=".." HTML中保持双引号，JavaScript中保持单引号 |
一方面，HTML代码中本来就使用的是双引号，另一方面，在JavaScript中引号中还需要引号的时候，要求我们单双引号间隔着写才是合法的语句，除非你使用转意符那也是可以的。再者，坚持这样的统一可以保持代码风格的一致，不会出现这里字符串用双引号包着，另外的地方就在用单引号。
代码混淆与压缩
进行完上面的步骤，已经小有所成了。或许你很早就注意到了，你下载的插件里面，一般都会提供一个压缩的版本一般在文件名里带个'min'字样。也就是minified的意思，压缩浓缩后的版本。并且平时我们使用的jQuery也是官网提供的压缩版本，jquery.min.js。
这里的压缩不是指代码进行功能上的压缩，而是通过将代码里面的变量名，方法函数名等等用更短的名称来替换，并且删除注释（如果有的话）删除代码间的空白及换行所得到的浓缩版本。同时由于代码里面的各种名称都已经被替代，别人无法阅读和分清其逻辑，也起到了混淆代码的作用。
压缩的好处
- 源码经过混淆压缩后，体积大大减小，使代码变得轻量级，同时加快了下载速度，两面加载变快。比如正常jQuery v1.11.0的源码是276kb，而压缩后的版本仅94.1kb！体积减小一半还多。这个体积的减小对于文件下载速度的提升不可小觑。
- 经过压缩混淆后，代码还能阅读嘛？当然不能，所以顺带还起到了代码保护的作用。当然只是针对你编写了一些比较酷的代码又不想别人抄袭的情况。对于jQuery社区，这里本身就是开源的世界，同时JavaScript这东西其实也没什么实质性方法可以防止别人查看阅读你的代码，毕竟有混淆就有反混淆工具，这里代码压缩更多的还是上面提到的压缩文件的作用，同时一定程度上防止别人抄袭。
工具
所使用的工具推崇的是Google开发的Closure Compiler。该工具需要Java环境的支持，所以使用前你可能需要先在机子上装JRE, 然后再获取Closure进行使用。
同时也有很朋在线的代码混淆压缩工具，用起来也很方便。这些工具都是一搜一大把的。
插件发布
这一步不是必需的，但本着把事情做完整的态度，同时你也许也希望有更多人看到或使用你的插件吧。
- 首先你需要将插件代码放到GitHub上创建一个Service Hook，这样做的目的是你以后更新的插件后，jQuery可以自动去获取新版本的信息然后展示在插件中心的页面上。关于如何传代码到GitHub，你去下载GitHub 提供的客户端工具，就会知道如何操作了，非常方便。关于在GitHub创建Service Hook，也只是点几下而以的事情。下面会截图介绍。
- 然后需要制作一个JSON格式的清单文件，其中包括关于插件的基本信息，具体格式及参数可以在jQuery官网插件发布指南页面了解到，这里提供一个示例文件，是我之前写的一个jQuery插件SlipHover：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
{ "name": "sliphover", "title": "SlipHover", "description": "Apply direction aware 2D/3D hover effect to images", "keywords": [ "direction-aware", "animation", "effect", "hover", "image", "overlay", "gallery" ], "version": "1.1.1", "author": { "name": "Wayou", "email": "liuwayong@gmail.com", "url": "https://github.com/Wayou" }, "maintainers": [ { "name": "Wayou", "email": "liuwayong@gmail.com", "url": "https://github.com/Wayou" } ], "licenses": [ { "type": "MIT", "url": "https://github.com/jquery/jquery-color/blob/2.1.2/MIT-LICENSE.txt" } ], "bugs": "https://github.com/Wayou/sliphover/issues", "homepage": "http://wayou.github.io/SlipHover/", "docs": "http://wayou.github.io/SlipHover/", "demo":"http://wayou.github.io/SlipHover/", "download": "https://github.com/Wayou/SlipHover/zipball/master", "dependencies": { "jquery": ">=1.5" } } |
- 然后就可以在插件的根目录执行现行git代码来发布插件了。其中0.1.0是版本号，以后每次你的插件有新版本发布只需更新上面命令中的版本，创建新的tag，这样jQuery插件中心就会自动获取到新版本信息了
|
1 2 |
$ git tag 0.1.0 $ git push origin --tags |
Reference:
- jQuery官网学习中心关于插件开发的文章： http://learn.jquery.com/plugins/
- jQuery官网插件中心：http://plugins.jquery.com/
- jQuery官网插件发布指南：http://plugins.jquery.com/docs/publish/
- JavaScript Hoist ：http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html
- Google Web Developer Tool : https://developers.google.com/closure/
发表评论