实现jQuery扩展总结

开发自己需要的jQuery插件,看个示例说明

jQuery插件的开发包括两种:

 

  1. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,
  2. 另一种是对象级别的插件开发,即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。


1、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:

 

//1.1定义一个全局函数
jQuery.foo = function() {
  alert('添加一个新的全局函数');
}
//定义多个全局函数
jQuery.bar = function() {
  alert('再增加一个全局函数');
}
//1.2使用extend定义全局函数
jQuery.extend({
  foo1:function() {
    alert('extend 定义全局函数1');
  },
  bar1:function() {
    alert('extend 定义全局函数2');
  }
});
//1.3 使用命名空间定义函数
jQuery.plugin = {
  foo2:function() {
    alert('使用namespace定义函数');
  }
}

$(function(){
$.foo();
$.bar();
$.foo1();
$.bar1();
$.plugin.foo2();
});

 


2、对象级别的插件开发

对象级别的插件开发需要如下的两种形式:

 

//形式一
(function($){
  $.fn.extend({
    foo3:function() {
      alert('对象级别插件extend方式1');
  },
    bar3:function() {
      alert('对象级别插件extend方式2');
  }
})
})(jQuery);

//形式二
(function($){
  $.fn.foo4 = function() {
    alert('对象级别插件fn方式');
  }
})(jQuery);

//接收参数来控制插件的行为
(function($){
  $.fn.bar4 = function(options) {
    var defaults = {aaa:'1',bbb:'2'};
    var opts = $.extend(defaults, options);
    alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);
  }
})(jQuery);

//提供公有方法访问插件的配置项值
(function($){
  $.fn.foo5 = function(options) {    
    var opts = $.extend({}, $.fn.foo5.defaults, options);
    alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);
}
$.fn.foo5.defaults = {aaa:'1',bbb:'2'};
})(jQuery);

//提供公有方法来访问插件中其他的方法
(function($){
  $.fn.bar5 = function(options) {
    $.fn.bar5.alert(options);
  }
  $.fn.bar5.alert = function(params) {
    alert(params);
  }
})(jQuery);

$(function(){
$('#test').foo3();
$('#test').bar3();
$('#test').foo4();
$('#test').bar4();
$('#test').bar4({aaa:'3'});
$('#test').bar4({aaa:'3',bbb:'4'});
$('#test').foo5();
$('#test').foo5({aaa:'5',bbb:'6'});
$('#test').bar5('aaaa');
});

 

posted @ 2016-07-22 16:43  178mz  阅读(388)  评论(0编辑  收藏  举报