信鸽网

jQuery定义插件的方法

  作者：bea

有些WEB开发者，会引用一个JQuery类库，然后在网页上写一写$("#")，$(".")，写了几年就对别人说非常熟悉JQuery。我曾经也是这样的人，直到有一次公司里的技术交流，我才改变了自己对自己的看法。 扩展jquery的时候。最核心的方法是以下两种： $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方法 $.extend(object) 例子： /* $.ext

有些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定义插件的方法，希望大家喜欢。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: