要怎么写一个jQuery插件
1.jQuery插件的开发分为两种
1.类级别插件开发：针对的是jQuery对象本身添加方法（全局的如$.ajax()），静态方法
1.类级别开发的扩展形式如下：
1.1.1 添加一个新的全局函数
代码：
jQuery.hello = function() {
alert('This is only a test.');
};
1.1.2 增加多个全局函数
代码：
jQuery.hello= function() {
alert('This is a test.');
};
jQuery.world = function(param) {
alert('This function');
};
调用时和一个函数的一样的:jQuery.hello();jQuery.world();或者$.hello();$.world();
1.1.3 使用jQuery.extend(object);
代码：
jQuery.extend({
jQuery.hello= function() {
alert('This is a test.');
};
jQuery.world = function(param) {
alert('This function');
};
});
1.1.4 使用命名空间
虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。
但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。
代码：
jQuery.myPlugin = {
jQuery.hello= function() {
alert('This is a test.');
};
jQuery.world = function(param) {
alert('This function');
};
};
采用命名空间的函数仍然是全局函数，调用时采用的方法：
$.myPlugin.hello();
$.myPlugin.world();
2.对象级别插件开发：是对jQuery对象添加方法（动态方法的如addclass（））。
1.开发也有两种形式：
形式1：
(function($){
$.fn.extend({
pluginName:function(opt,callback){
// Our plugin implementation code goes here.
}
})
})(jQuery);
形式2：
(function($) {
$.fn.pluginName = function() {
// Our plugin implementation code goes here.
};
})(jQuery);
2. 需要注意的问题
2.1 在JQuery名称空间下申明一个名字
通常当我们编写一个插件时，力求仅使用一个名字来包含它的所有内容。
任何其他的属性或者函数我们需要暴露出来的，都可以在"插件名" 函数中被声明属性
2.2 接受options参数以控制插件的行为
当我们想为插件添加功能（如指定背景色的功能）会通过像一个options对象传递给插件函数。
例如：
$.fn.hilight = function(options) {
var defaults = {
background: 'yellow'
};
var opts = $.extend(defaults, options);
// Our plugin implementation code goes here.
};
我们的插件可以这样被调用：
$('#my').hilight({
background: 'blue'
});
2.3 暴露插件的默认设置
我们应该对上面代码的一种改进是暴露插件的默认设置。
这对于让插件的使用者更容易用较少的代码覆盖和修改插件。
代码如下
$.fn.hilight = function(options) {
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'
};
2.4 适当的暴露一些函数
将会一步一步扩展插件
代码如下：
$.fn.hilight = function(options) {
// 有了return this.each（）可以实现链式调用
return this.each(function() {
var $this = $(this);
// ...
var markup = $this.html();
// 调用暴露的行为format
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
// 定义你要暴露的行为
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
2.5 保持私有函数的私有性
为了不搅乱命名空间也不暴露实现，这就用到闭包的功能（避免全局污染，避免第三方破坏，兼容jQuery的$和jquery）。
为了演示，我们将会添加另外一个函数到我们的插件中。
(function($) {
// plugin definition
$.fn.hilight = function(options) {
say(this);
// ...
};
// 定义的私有函数
function say($obj) {
alert($obj)
};
// ...
})(jQuery);
2.6最后整合插件代码如下
// 创建一个闭包
(function($) {
// 插件的定义
$.fn.hilight = function(options) {
say(this);
var opts = $.extend({}, $.fn.hilight.defaults, options);
return this.each(function() {
$this = $(this);
// 设置样式
$this.css({
backgroundColor: opts.background,
});
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
// 私有函数
function say($obj) {
alter($obj)
};
// 定义暴露format函数
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
// 插件的defaults
$.fn.hilight.defaults = {
background: 'yellow'
};
// 闭包结束
})(jQuery);