jQuery插件封装

一、类级别的插件开发，即给jQuery添加新的全局函数，相当与给jQuery类本身添加方法，jQuery的全局函数就是jQuery命名空间的函数。

二、对象级别的插件开发，即是给jQuery对象添加方法。

　　1.类级别的插件开发：类似于$.ajax();

1>.定义全局函数
jQuery.fon = function(){
     alert("定义全局函数")；
}
2>.使用extend定义函数
jQuery.extend({
     date: function(){
          alert('使用extend定义全局函数')  
     }
})
3>.使用命名空间定义函数
jQuery.plugin = {
      con: function(){
          alert('使用命名空间定义函数')
     }
}
$(function(){
   $.fon();
   $.date();
   $.con(); 
})

　　2.对象级别的插件开发

　　　　

形式一:
     (function($){
          $.fn.extend({
               upload1: function(){
                   alert('对象级别插件，extend方式')
               }
          })

     })(jQuery)
形式二：
     (function($){
          $.fn.upload2: function(){
                   alert('对象级别插件，fn方式')
               }
     })(jQuery)
接受参数来控制插件的行为
     (function($){
          $.fn.upload3 = function(options){
                   var defaults = {
                                             aaa: '11',
                                             bbb: '22'
                                         };
                   var ots = $.extend(defaults, opyions)
                   alert('参数值:aaa='+ots.aaa+';bbb=' + ots.bbb);
               }
     })(jQuery)
提供共有方法访问插件的配置项

(function($){
　　$.fn.date4 = function(options) {
　　　　var opts = $.extend({}, $.fn.date4.defaults, options);
　　　　alert('参数值:aaa:'+opts.aaa+';bbb:'+opts.bbb);
　　}
　　$.fn.date4.defaults = {aaa:'1',bbb:'2'};
})(jQuery);

提供共有方法访问插件的其他方法
(function($){
     $.fn.upload5 = function(options){
         $.fn.upload.alert("options")
     }
     $.fn.upload.alert = function(params){
          alert(params)
     }
})(jQuery)
$(function(){
　　$('#test').upload1();
　　$('#test').upload2();
　　$('#test').upload3();
　　$('#test').upload3({aaa:'333'});
　　$('#test').upload3({aaa:'333', bbb:'444'})
　　$('#test').date4();
　　$('#test').date4({aaa:'3'});
　　$('#test').date4({aaa:'3',bbb:'4'});

　　$('#test').upload5({aaa:'5',bbb:'6'});

})

 

　　　　

转载于:https://www.cnblogs.com/widem/p/7277878.html