jQuery定義外掛的方法_jquery

有些WEB開發者，會引用一個JQuery類別庫，然後在網頁上寫一寫$("#")，$(".")，寫了幾年就對別人說非常熟悉JQuery。我曾經也是這樣的人，直到有一次公司裡的技術交流，我才改變了自己對自己的看法。

擴充jquery的時候。最核心的方法是以下兩種：

$.extend(object) 可以理解為jquery增加一個靜態方法

$.fn.extend(object) 可以理解為jquery實例加入一個方法

$.extend(object)

 範例：

/* $.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.extend({ fun: function () { alert("执行方法一"); } });//定义
$.fun();//调用
$.fn.extentd(object)
/* $.fn.extend 定义与调用
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
$.fn.extend({ fun: function () { alert("执行方法"); } });
$(this).fun();
//等同于
$.fn.fun = function () { alert("执行方法三"); }
$(this).fun();

定義jquery插件的基本結構

1．  定義作用域：

為外掛定義一個私有作用域。外界程式碼不能直接存取插件內部。插件內部程式碼不受外界幹擾，也不會污染到全域變數。

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

2. 為外掛程式新增擴充方法：

//step01 定义JQuery的作用域
(function ($) {
  //step02 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    
  }
})(jQuery);

3. 設定預設值：

//step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性，默认属性
    var options = $.extend(defaults, options);
  }
})(jQuery);

其中：var options = $.extend(defaults, options)的意思了。表示 options 去覆寫了defaults的值，並把值賦給了options。
在插件環境中，就表示使用者設定的值，覆蓋了插件的預設值；如果使用者沒有設定預設值的屬性，還是保留插件的預設值。

4. 支援jquery選擇器：    

 //step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性，默认属性
    var options = $.extend(defaults, options);
    //step 支持JQuery选择器
    this.each(function () {
    });
  }
})(jQuery);

5 ．支援JQuery的連結呼叫：

為了能達到連結呼叫的效果必須要把循環的每個元素return

//step 定义JQuery的作用域
(function ($) {
  //step-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step-b 合并用户自定义属性，默认属性
    var options = $.extend(defaults, options);
    //step 支持JQuery选择器
    //step 支持链式调用
    return this.each(function () {
    });
  }
})(jQuery);

6. 外掛裡的方法：

在插件裡定義的方法，外界不能直接調用，我在插件裡定義的方法也沒有污染外界環境。

//step01 定义JQuery的作用域
(function ($) {
  //step03-a 插件的默认值属性
  var defaults = {
    prevId: ‘prevBtn‘,
    prevText: ‘Previous‘,
    nextId: ‘nextBtn‘,
    nextText: ‘Next‘
    //……
  };
  //step06-a 在插件里定义方法
  var showLink = function (obj) {
    $(obj).append(function () { return "(" + $(obj).attr("href") + ")" });
  }
  //step02 插件的扩展方法名称
  $.fn.easySlider = function (options) {
    //step03-b 合并用户自定义属性，默认属性
    var options = $.extend(defaults, options);
    //step4 支持JQuery选择器
    //step5 支持链式调用
    return this.each(function () {
      //step06-b 在插件里定义方法
      showLink(this);
    });
  }
})(jQuery);

透過以上內容介紹了jQuery定義插件的方法，希望大家喜歡。