快捷導(dǎo)航

jQuery定義插件的方法

更新時(shí)間：2015年12月18日 10:01:12 投稿：mrr

有些WEB開發(fā)者，會(huì)引用一個(gè)JQuery類庫(kù)，然后在網(wǎng)頁(yè)上寫一寫$("#")，$(".")，寫了幾年就對(duì)別人說(shuō)非常熟悉JQuery。其實(shí)你只是了解一點(diǎn)皮毛，并不知道其中的道理，下面通過(guò)本篇文章給大家介紹jquery定義插件的相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧

有些WEB開發(fā)者，會(huì)引用一個(gè)JQuery類庫(kù)，然后在網(wǎng)頁(yè)上寫一寫$("#")，$(".")，寫了幾年就對(duì)別人說(shuō)非常熟悉JQuery。我曾經(jīng)也是這樣的人，直到有一次公司里的技術(shù)交流，我才改變了自己對(duì)自己的看法。

擴(kuò)展jquery的時(shí)候。最核心的方法是以下兩種：

$.extend(object) 可以理解為jquery添加一個(gè)靜態(tài)方法

$.fn.extend(object) 可以理解為jquery實(shí)例添加一個(gè)方法

$.extend(object)

例子：

/* $.extend 定義與調(diào)用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun: function () { alert("執(zhí)行方法一"); } });//定義
$.fun();//調(diào)用
$.fn.extentd(object)
/* $.fn.extend 定義與調(diào)用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun: function () { alert("執(zhí)行方法"); } });
$(this).fun();
//等同于
$.fn.fun = function () { alert("執(zhí)行方法三"); }
$(this).fun();

定義jquery插件的基本結(jié)構(gòu)

1．定義作用域：

為插件定義一個(gè)私有作用域。外界代碼不能直接訪問插件內(nèi)部。插件內(nèi)部代碼不受外界干擾，也不會(huì)污染到全局變量。

  //step 定義JQuery的作用域
(function ($) {
})(jQuery);

2. 為插件添加擴(kuò)展方法：

//step01 定義JQuery的作用域
(function ($) {
  //step02 插件的擴(kuò)展方法名稱
  $.fn.easySlider = function (options) {
    
  }
})(jQuery);

3. 設(shè)置默認(rèn)值：

//step 定義JQuery的作用域
(function ($) {
  //step-a 插件的默認(rèn)值屬性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的擴(kuò)展方法名稱
  $.fn.easySlider = function (options) {
    //step-b 合并用戶自定義屬性，默認(rèn)屬性
    var options = $.extend(defaults, options);
  }
})(jQuery);

其中：var options = $.extend(defaults, options)的含義了。表示 options 去覆蓋了defaults的值，并把值賦給了options。
在插件環(huán)境中，就表示用戶設(shè)置的值，覆蓋了插件的默認(rèn)值；如果用戶沒有設(shè)置默認(rèn)值的屬性，還是保留插件的默認(rèn)值。

4. 支持jquery選擇器：

 //step 定義JQuery的作用域
(function ($) {
  //step-a 插件的默認(rèn)值屬性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的擴(kuò)展方法名稱
  $.fn.easySlider = function (options) {
    //step-b 合并用戶自定義屬性，默認(rèn)屬性
    var options = $.extend(defaults, options);
    //step 支持JQuery選擇器
    this.each(function () {
    });
  }
})(jQuery);

5 ．支持JQuery的鏈接調(diào)用：

為了能達(dá)到鏈接調(diào)用的效果必須要把循環(huán)的每個(gè)元素return

//step 定義JQuery的作用域
(function ($) {
  //step-a 插件的默認(rèn)值屬性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的擴(kuò)展方法名稱
  $.fn.easySlider = function (options) {
    //step-b 合并用戶自定義屬性，默認(rèn)屬性
    var options = $.extend(defaults, options);
    //step 支持JQuery選擇器
    //step 支持鏈?zhǔn)秸{(diào)用
    return this.each(function () {
    });
  }
})(jQuery);

6. 插件里的方法：

在插件里定義的方法，外界不能直接調(diào)用，我在插件里定義的方法也沒有污染外界環(huán)境。

//step01 定義JQuery的作用域
(function ($) {
  //step03-a 插件的默認(rèn)值屬性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step06-a 在插件里定義方法
  var showLink = function (obj) {
    $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
  }
  //step02 插件的擴(kuò)展方法名稱
  $.fn.easySlider = function (options) {
    //step03-b 合并用戶自定義屬性，默認(rèn)屬性
    var options = $.extend(defaults, options);
    //step4 支持JQuery選擇器
    //step5 支持鏈?zhǔn)秸{(diào)用
    return this.each(function () {
      //step06-b 在插件里定義方法
      showLink(this);
    });
  }
})(jQuery);

通過(guò)以上內(nèi)容給大家介紹了jQuery定義插件的方法，希望大家喜歡。

您可能感興趣的文章: