詳解jQuery插件開發方式

Query插件開發 

通常來講，jQuery插件的開發分爲兩種：一種是掛在jQuery命名空間下的全局函數，也可稱爲靜態方法；另外一種是jQuery對象級別的方法，即掛在jQuery原型下的方法，這樣經過選擇器獲取的jQuery對象實例也能共享該方法。

1、jQuery擴展

　　一、$.extend(object)

　　相似於.Net的擴展方法，用於擴展jQuery。而後就能夠用$.的方式調用。

?

1 2 3 4

$(function(){ $.extend({ fun1: function () { alert("爲jQuery擴展一個fun1函數!"); } }); $.fun1(); })

　　二、$.fn.extend(object)

　　擴展jQuery的對象。

?

1 2	$.fn.extend({ fun2: function () { alert("執行方法2"); } }); $("#id1").fun2();

　　能夠用google來看看：

　　上面的寫法等同於:

?

1 2	$.fn.fun2 = function () { alert("執行方法2"); } $(this).fun2();

2、私有域

　　其定義方式以下：

?

1 2 3 4

(function ($) { })(jQuery); //至關於 var fn = function (xxoo) { }; fn(jQuery);

　　如下代碼彈出123。

?

1 2 3 4

$(function(){ var fn = function (xxoo) { }; fn(alert(123)); })

3、定義插件的基本步驟

　　一、定義做用域

　　開發一個jQuery插件，首先要把插件的代碼與外界隔離開來，外部的代碼不容許直接訪問插件內部的代碼，插件內部的代碼也不影響外部。

    //步驟1 定義插件私有做用域

?

1 2 3

(function ($) {   })(jQuery);

　這樣就能保證插件內部的代碼與外界隔離了。

　　二、擴展jQuery

　　定義了做用域以後，爲了可以讓外部調用，就須要將插件擴展到jQuery。

?

1 2 3 4 5 6 7

//步驟1 定義私有做用域  (function ($) {  //步驟2 插件的擴展方法名稱  $.fn.MyFrame = function (options) {      }  })(jQuery);

    三、默認值

　　定義了jQuery插件以後，若是但願某些參數具備默認值，那麼能夠以這種方式來指定。

?

1 2 3 4 5 6 7 8 9 10 11 12

//步驟1 定義私有做用域  (function ($) {  //步驟3 插件的默認值屬性  var defaults = {   Id: '#id1',  };  //步驟2 插件的擴展方法名稱  $.fn.MyFrame = function (options) {   //步驟3 合併用戶自定義屬性，默認屬性(若是options爲空，則使用defaults)   var options = $.extend(defaults, options);  }  })(jQuery);

    　四、支持jQuery選擇器

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

//步驟1 定義私有做用域 (function ($) { //步驟3 插件的默認值屬性 var defaults = {  Id: '#id1', }; //步驟2 插件的擴展方法名稱 $.fn.MyFrame = function (options) {  //步驟3 合併用戶自定義屬性，默認屬性(若是options爲空，則使用defaults)  var options = $.extend(defaults, options); } //步驟4 支持jQuery選擇器 this.each(function () {   }); })(jQuery);

    五、支持jQuery的鏈式調用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

//步驟1 定義私有做用域  (function ($) {  //步驟3 插件的默認值屬性  var defaults = {   Id: '#id1',  };  //步驟2 插件的擴展方法名稱  $.fn.MyFrame = function (options) {   //步驟3 合併用戶自定義屬性，默認屬性(若是options爲空，則使用defaults)   var options = $.extend(defaults, options);  }  //步驟4 支持jQuery選擇器  //步驟5 支持鏈式調用(將步驟4返回)  return this.each(function () {    });  })(jQuery);

    　六、插件內部方法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

//步驟1 定義私有做用域 (function ($) { //步驟3 插件的默認值屬性 var defaults = {  Id: '#id1', };   //步驟6 在插件裏定義函數 var MyFun = function (obj) {  alert(obj); }   //步驟2 插件的擴展方法名稱 $.fn.MyFrame = function (options) {  //步驟3 合併用戶自定義屬性，默認屬性(若是options爲空，則使用defaults)  var options = $.extend(defaults, options); } //步驟4 支持jQuery選擇器 //步驟5 支持鏈式調用(將步驟4返回) return this.each(function () {  //步驟6 在插件裏定義函數  MyFun(this); }); })(jQuery);

    因爲做用域關係，步驟6的私有函數目前容許的插件內部使用。

 以上就是本文的所有內容，但願對你們有所幫助，謝謝對腳本之家的支持！

您可能感興趣的文章:

• jQuery中Nicescroll滾動條插件的用法
• jquery插件bootstrapValidator數據驗證詳解
• jQuery插件實現可輸入和自動匹配的下拉框
• jQuery插件ajaxFileUpload異步上傳文件
• jQuery旋轉插件jqueryrotate用法詳解
• jQuery自適應輪播圖插件Swiper用法示例
• jquery彈出框插件jquery.ui.dialog用法分析
• jQuery Validate插件實現表單驗證
• jquery插件uploadify多圖上傳功能實現代碼
• jQuery插件Easyui設置datagrid的pageNumber致使兩次請求問題的解決方法
• jQuery插件EasyUI獲取當前Tab中iframe窗體對象的方法