JQuery封装插件

一、类级别（$.extend）

类级别可以理解为扩展jquery类，最明显的例子是$.ajax(...),相当于静态方法。

开发扩展其方法时使用$.extend()方法，即jQuery.extend(object);

$.extend({
add:function(a,b){return a+b;},
minus:function(a,b){return a-b;}
});
//页面调用
var i = $.add(3,2);
var j = $.minus(3,2);

二、对象级别
对象级别可以理解为基于对象的拓展，如$('#..').changeColor(...);这里的changeColor就是基于对象的扩展。

开发扩展方法时使用$.fn.extend()方法，即jQuery.fn.extend(object);

$.fn.extend({
check:function(){
return this.each({this.checked=true;});
},
uncheck:function(){
return this.each({
this.checked=false;
});
}
});
//页面调用
$('input[type=checkbox]').check();
$('input[type=checkbox]').uncheck();

三、jQuery插件开发过程
1.定义作用域：为插件定义私有作用域，外部代码不能直接访问插件内部的代码，插件内部的代码不污染全局变量

(function($){
//内部插件代码实现
})(jQuery)

2.为jQuery扩展一个插件：为jQuery的实例添加一个扩展方法，该扩展方法可以接收一些参数

(function($){
$.fn.myTable=function(options){
//具体实现代码
}
})(jQuery)

3.设置默认值：为扩展方法设置默认值，一般会将默认属性对象定义为defaults。使用$.extend(defaults.options)将默认值和传入的参数进行合并

(function($){
var defaults={
name:'插件',
versions:'1.0'
}
$.fn.myTable=function(options){
var options=$.extend(defaults,options);
}
})(jQuery)

4.支持jQuery的连接调用：循环把每个元素返回

(function($){
var defaults={
name:'我的插件',
version:'1.0'
}
$.fn.myTable=function(options){
var options=$.extend(defaults,options||{});
return this.each(function(){
//对每个元素操作
})；
}
})(jQuery)

5.插件里的方法：为了使代码结构化可视化，需要用到function。在插件里的方法不能被外界调用

(function($){
var defaults={
name:'插件'
version:'1.0'
}
var showName = function(obj){
$(obj).append(function(){
return 'name';
});
}
$.fn.myTable=function(options){
var options=$.extend(defaults,options);
return this.each(function(){
showName(this);
});
}
})(jQuery)

6.自定义回调函数：使用call和apply方法执行回调函数

(function($){
$.fn.outAndInFade=function(customOptions){
var options = $.extend{},$.fn.outAndInFade.defaultOptions,customOptions||{});
return this.each(function(){
$(this).on('click',function(){
if($.isFunction(options.complete)){
options.complete.apply(this);
}
});
});
};
$.fn.outAndInFade.defaultOptions={
complete:null
};
})(jQuery);

jQuery('div').outAndInFade({
complete:function(){
$(this).css('background','#ff9');
}
});

 高亮插件

//闭包限定命名空间
(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' }); //调用自定义 高亮插件
        });