jQuery外掛的二種型別

Sunny Girl發表於2017-11-29
jQuery型別

jquery外掛的開發包括兩種：一種是類級別的外掛開發，給jquery新增新的全域性函式(jquery名稱空間的函式)，相當於給jquery類本身新增方法。另一種是物件級別的外掛開發，即給jquery物件新增方法。

類級別的外掛開發

//新增全域性函式
jQuery.foo = function() {};//使用方式jQuery.foo();

//使用jQuery.extend(object)新增全域性函式
jQuery.extend({
    foo:function(){},
    bar:function(){}
});

//使用名稱空間
jQuery.myPlugin = {
    foo:function(){},
    bar:function("bar"){}
}//使用方式jQuery.myPlugin.foo();複製程式碼

物件級別的外掛開發

jQuery外掛就是用來擴充套件jQuery原型物件的一個方法，jQuery外掛的使用方式就是jQuery物件方法的呼叫。
例子：$("a").css("color","red")。
      每個jQuery物件都包含jQuery中定義的DOM操作方法,用$選擇a元素，返回a元素的jQuery物件，這個物件
就可以使用jQuery中定義的DOM操作方法。那麼jQuery物件是如何獲取這些方法的呢？其實jQuery內部定義了一
個jQuery.fn物件，檢視jQuery原始碼可以發現jQuery.fn=jQuery.prototype，也就是說jQuery.fn物件是jQuery的
原型物件,jQuery的DOM操作方法都在jQuery.fn物件上定義的，然後jQuery物件就可以通過原型繼承這些方法。複製程式碼

基礎版jQuery外掛

//改變標籤內容顏色
$.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);//this就是當前呼叫外掛的jQuery物件
}

//使用方式
$("p").changeStyle("red");
複製程式碼

滿足鏈式呼叫的jQuery外掛

$.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);
         return this;//把當前的jQuery物件返回
}

//可以鏈式呼叫其他方法
$("p").changeStyle("red").addClass("red-color");

//實現鏈式呼叫的關鍵點就一行程式碼return this

複製程式碼

防止$符號汙染的jQuery外掛

//可以使用jQuery.noConflict()方法交出$符號的使用權，但是如果定義外掛的時候，使用$.fn物件來定義的，
//那麼這些外掛使用的時候就會受到其它使用$變數的js庫的影響。對於這種情況，我們可以使用立即執行
//函式通過傳參的方式封裝外掛

//此時的$只屬於這個立即執行函式的函式作用域
(function($){
     $.fn.changeStyle = function(colorStr){
         this.css("color",colorStr);        
         return this;
     }
}(jQuery));
複製程式碼

可以接受引數的jQuery外掛

//定義一個引數物件，然後把需要傳給外掛的引數放在引數物件中
(function($){
     $.fn.changeStyle = function(option){
         this.css("color",option.colorStr).css("fontSize",option.fontSize+"px");        
         return this;
     }
}(jQuery));

//使用方式：$("p").changeStyle({colorStr:"red",fontSize:14});複製程式碼

//把引數放到一個物件中傳給外掛還有一個好處就是我們可以在外掛內部為一些引數定義一些預設值
(function($){
     $.fn.changeStyle = function(option){
          var defaultSetting = { colorStr:"green",fontSize:12};
          var setting = $.extend(defaultSetting,option);//合併兩個物件，即把後面一個物件
的存在的屬性值賦值給第一個物件
          this.css("color",setting.colorStr)
              .css("fontSize",setting.fontSize+"px");        
         return this;
     }
}(jQuery));

//使用方式：$("p").changeStyle({colorStr:"red"});
//$.extend方法還有一種作用是用來擴充套件jQuery物件本身。複製程式碼

暴露外掛的預設設定

 $.fn.changeStyle = function(options){
     var opts = $.extend({}, $.fn.changeStyle.defaults, options);
          this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
          return this;
}; 

 $.fn.changeStyle.default = {
    backgroundColor: "red", 
    color:"yellow"
};

//$.fn.changeStyle.defaults.color = '#fff';
//$.fn.changeStyle.defaults.backgroundColor = '#000';
複製程式碼

//定義外掛的方式除了上面說的用$.fn來定義，還有另外一種方式來定義外掛，那就是使用$.fn.extend方法
(function($){
     $.fn.extend({         
         changeStyle:function(option){             
         var defaultSetting = { colorStr:"green",fontSize:12};
         var setting = $.extend(defaultSetting,option);
         this.css("color",setting.colorStr).css("fontSize",setting.fontSize+"px");        
         return this; 
          }
     });
}(jQuery));
複製程式碼
$.extend方法和$.fn.extend方法都可以用來擴充套件jQuery功能，本質區別，$.extend方法是在
jQuery全域性物件上擴充套件方法，$.fn.extend方法是在$選擇符選擇的jQuery物件上擴充套件方法。所以擴
展jQuery的公共方法一般用$.extend方法，定義外掛一般用$.fn.extend方法。
複製程式碼

原文參考簡書


相關文章