鋒利的Jquery解惑系列（二）------插件開發大總結

申明：插件開發是實際項目就常常用到的，不過也是挺吃力的。筆者本身作項目時，看着咱們老大寫的jQuery一頭槳糊，那叫個痛苦。後面果斷買了本參考書以及瀏覽別人的博客，如今也算慢慢入門了。如今總結本身的一點理解，但願對你們有幫助。若是有錯，但願你們一塊兒交流，共同提升！

　　1、jQuery插件能夠分爲3種類型

1. 封裝對象方法的插件
2. 封裝全局函數的插件
3. 選擇器插件　　

　　2、封裝對象方法的插件的書寫形式

　　　　形式一:

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

　　3、封裝全局函數的插件

　　　　全局函數的插件能夠理解爲就是給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");