锋利的Jquery解惑系列（二）------插件开发大总结

申明：插件开发是实际项目就经常用到的，不过也是挺吃力的。笔者自己做项目时，看着我们老大写的jQuery一头桨糊，那叫个痛苦。后面果断买了本参考书以及浏览别人的博客，现在也算慢慢入门了。现在总结自己的一点理解，希望对大家有帮助。如果有错，希望大家一起交流，共同提高！

　　一、jQuery插件可以分为3种类型

1. 封装对象方法的插件
2. 封装全局函数的插件
3. 选择器插件　　

　　二、封装对象方法的插件的书写形式

　　　　形式一:

(function($){
    $.fn.extend({
        pluginName:function(opt,callback){
            //our plugin implementsation code goes here.
        }
    })
})(jQuery)

　　　　形式二：

(function($){
    $.fn.pluginName=function(){http://i.cnblogs.com/?postid=3957061&update=1
        //our plugin implementsation code goes here.
    };
})

　　　　示例一：有jQuery名称空间下申明一个名字

$.fn.hilight=function(){
    //our plugin implementation coode goes here
}
我们的插做的是通过这样可以调用
$('myDiv').hilight();

　　　　示例 二：接受options参数以控制插件的行为

　　　　　　　让我们为我们的插件添加功能指定前景色和背景色的功能。我们也许会让选项像一个options对象传递给插件，如：

//plugin definition
$.fn.hilight=function(options){
    var defaults={
        frontGround:"red",
        backGround: "yellow"
    };
    //extend our default options with those provided
    var opts=$.extends(defaults,options);
    //our plugin implementsation code goes here.
};
我们的插件可以这样被调用：
$("myDiv").hilight({
    frontGround:"blue"
});

　　　　示例 三：暴露插件的默认设置

　　　　　　我们应当对上面代码的一种改进是暴露插件的默认设置。这对于让插件的使用者更容易用较少的代码覆盖和修改插件接下来我们开始利用函数对象。

//plugin definition
$.fn.hilight=function(options){
    //extend our default options with those provided
    //Note that the first arg to extnd is an empty object-
    //this is to keep from overriding our "defaults" object.
    var opts=$.extend({},$.fn.hilight.defaults,options);
    //our plugin implementsation code goes here.
};
// plugin defaluts - added as a property on our plugin function
$.fn.hilights.defaluts={
    frontGround:"red",
    backGround:"yellow"
};
现在使用者可以包含像这样的一行在他们的脚本里：
//这个只需要调用一次，且不一定要在ready块中调用
$.fn.hilight.defaults.frontGround="blue";
接下来我们可以像这样使用插件的方法，结果它设置蓝色为前景色；
$("#myDiv").hilight();

　　　　如上，我们允许使用者写一行代码在修改的默认前景色。而且使用者仍然在需要的时候可以有选择的覆盖这些新的默认值：

　　　　//覆盖插件缺省的背景色

　　　　$.fn.hilight.defaults.frontGround="blue";

　　　　//使用一个新的缺省设置调用插件

　　　　$('.hilightDiv').hilight();

　　三、封装全局函数的插件

　　　　全局函数的插件可以理解为就是给jQuery类添加类方法，并且是静态的方法。就像$.ajax()和$.trim(),将函数定义于jQuery的命名空间中。他有如下几种形式：

　　　　形式一：添加单个全局函数

jQuery.myFoo=functin(){
    alert("this is myFoo function")
};

　　　　形式二：添加多个全局函数

jQuery.myFoo=functin(){
    alert("this is myFoo function")
};
jQuery.myFoo1=functin(param){
    alert("this is myFoo1 function with a param " + param)
};

　　　　形式三：使用jQuery.extend(Object);

jQuery.myFoo1=functin(param){
    alert("this is myFoo1 function with a param " + param)
};
jQuery.extend({
    myFoo:function(){
        alert("this is myFoo function")
    },
    myFoo1:function(param){
        alert("this is myFoo1 function with a param " + param
    }
});

　　　　形式四：使用命名空间

　　　　　　虽然在jQuery命名空间中，我们禁止使用了大量的javascript函数名和变量名，但是仍然不可避免某些函数或变量名将于其它的jQuery插件冲突，所以我们选择将一些方法封装到另一个命名空间下。

jQuery.myPlugin={
    myFoo:function(){
        alert("this is myFoo function")
    }
    myFoo1:function(param){
        alert("this is myFoo1 function with a param " + param)
    }
}
采用命名空间的函数仍然是全局函数，调用时采用的方法：
$.myPlugin.myFoo();
$.myPlagin.myFoo1("rah");