jQuery插件开发

jQuery插件的种类

jQuery插件的机制

jQuery.fn.extend(Object)

jQuery.extend(Object)

jQuery.fn.extend(Object)

jQuery.fn = jQuery.prototype = {
　　　init: function( selector, context ) {.....};
};

jQuery.fn = jQuery.prototype

jQuery.fn.extend()

jQuery.fn.extend(object)

jQuery.extend([deep], target, object1, [objectN])

//合并 settings 和 options，修改并返回 settings。
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);

//结果：
settings == { validate: true, limit: 5, name: "bar" }

//合并 defaults 和 options, 不修改 defaults。
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults, options);

//结果：
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }

自执行的匿名函数/闭包

!function($){

　　//do something;

}(jQuery);

//上面和下面这个是一回事。

(function($){

　　//do something;

})(jQuery);

var a=1;

(function()(){

　　　　var a=100;

　　})();

alert(a);  // 弹出 1

实例分析

1、 类级别的插件开发

jQuery.foo = function() {
alert('This is a test. This is only a test.');
};

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');

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 +'".');
}
});

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、对象级别的插件开发

//形式一
(function($){
$.fn.extend({
pluginName:function(opt,callback){
...
}
})
})(jQuery);
//形式二
(function($) {
$.fn.pluginName = function() {
...
};
})(jQuery);

$

$

$.fn.doSomething()

$.fn.undoSomething()

$.fn.hilight = function() {
// ...
};
//调用：
$('#myDiv').hilight();

// 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'
});

// 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'
};

$.fn.hilight.defaults.foreground = 'blue';

$('#myDiv').hilight();

// 覆盖插件缺省的背景颜色
$.fn.hilight.defaults.foreground = 'blue';
// 使用一个新的缺省设置调用插件
$('.hilightDiv').hilight();
// 通过传递配置参数给插件方法来覆盖缺省设置
$('#green').hilight({
foreground: 'green'
});

// 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>';
};

(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);

$.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;
//...    

<!--  markup  -->
<div class="hilight { background: 'red', foreground: 'white' }">
Have a nice day!
</div>
<div class="hilight { foreground: 'orange' }">
Have a nice day!
</div>
<div class="hilight { background: 'green' }">
Have a nice day!
</div>
现在我们能高亮哪些div仅使用一行脚本：
$('.hilight').hilight();

// 创建一个闭包
(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、选择器插件开发

function (a,i,m){
//...
}

;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
//插件代码
}
});
})(jQuery);

;(function($){
$.extend($.expr[":"],{
between:function(a,i,m){
var temp=m[3].split(",");
return +temp[0]<i&&i<+temp[1];
}
});
})(jQuery);

编写jQuery插件的一些Tips

举个栗子，写个高亮的jQuery插件

//闭包限定命名空间
;(function($){

})(jQuery);

;(function($){
$.fn.extend({
//do something
});
})(jQuery);

;(function($){
$.fn.extend({
"hightLight":function(options) {
var opts = $.extend({}, defaults, options); //使用jQuery.extend()方法覆盖插件默认参数
//当调用highLight()插件的是一个集合的时候，要遍历所有对象dom
this.each(function(){ //这里的this就是jQuery对象
var $this = $(this); //获取当前循环dom的jQuery对象
$this.css({
background:opts.background,
color:opts.foreground
})
})
}
});
//默认参数
var defaults = {
background:"yellow";
foreground:"red";
}
})(jQuery);

//调用代码如下：

$(function(){
$("p").hightLight();
});

$('#id').css({marginTop:'100px'}).addAttr("title","测试");

$("p").highLight().css({marginTop:'100px'});

//闭包限定命名空间
(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);

//调用
//调用者覆盖插件暴露的共公方法
$.fn.highLight.format = function (txt) {
return "<em>" + txt + "</em>"
}
$(function () {
$("p").highLight({ foreground: 'orange', background: '#ccc' }); //调用自定义 高亮插件
});