JQuery插件，傻傻分不清！

Posted 2020-06-09

直接上代码:

 

第一种：$.extend()，给$扩展方法

 1 <!-- extend 扩展jQuery,其实就是增加一个静态方法 -->
 2         $.extend({
 3             sayHello:function(name)
 4             {
 5                  alert(‘Hello, ‘+(name?name:‘XXXX‘)+‘ !‘)
 6             }
 7         });
 8          
 9         $(function(){
10               $.sayHello();
11               $.sayHello(‘Zhangsan‘);
12         });

View code 

 第二种：$.fn，给JQuery对象扩展方法

<!-- $.fn  给JQuery对象，增加方法 -->
        $.fn.Red=function(){
            
            this.each(function(){
               $(this).append(‘ ‘+$(this).attr(‘href‘));
            });
            
            return    this.css(‘color‘,‘red‘);
        }
        
        
        
        $(function(){
              $("a").Red().css(‘color‘,‘gray‘);
        });

View Code

 两者的综合利用

 <!-- 综合利用 -->
        $.fn.MyDesign=function(options){
            var defaults={
               ‘color‘:‘red‘,
               ‘fontSize‘:‘12pt‘
            }
            var settings=$.extend({},defaults,options)
            
            this.each(function(){
               $(this).append(‘ ‘+$(this).attr(‘href‘));
            });
            
            return    this.css({‘color‘:settings.color,‘fontSize‘:settings.fontSize});
        }
        
        $(function(){
              $("a").MyDesign();
              
              $("a").MyDesign(
              {
              ‘color‘:‘yellow‘, 
              ‘fontSize‘:‘20pt‘}
              );
        });

View Code

 插件优化（包括加“；”、匿名函数、调用全局变量等）

;(function($,window,document,undefined){
    var Beautifier= function(ele,options){
        this.defaults={
          ‘color‘:‘yellow‘,
          ‘fontSize‘:‘20pt‘
       }
       this.ele=ele,
       this.options=options,
       this.setting=$.extend({},this.defaults,this.options)
    }
    
    Beautifier.prototype={
        beautify:function(){
            return this.ele.css({
            ‘color‘: this.setting.color,
            ‘fontSize‘: this.setting.fontSize
            })
        }
    }
    
         $.fn.MyDesgin=function(options){
           var beautifier=new Beautifier(this,options);
         beautifier.beautify();
         }
})(jQuery,window,document)

View Code