jQuery中开发插件的两种方式(附Demo)

作web开发的基本上都会用到jQuery，jQuery插件开发两种方式：一种是类扩展的方式开发插件，jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数)，若是将jQuery当作一个类，那么就至关于给jQuery类自己添加方法。第二种是对象扩展的方式开发插件，即jQuery对象添加方法。

类扩展的插件

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

 1.添加全局函数

 $.ltrim = function( str ) {
        return str.replace( /^\s+/, "" );
    };

　　调用方式

 var  str="  去除左空格 ";
 console.log("去除前:"+str.length+"去除后:"+$.ltrim(str).length);

　2.添加多个全局函数

    $.ltrim = function( str ) {
        return str.replace( /^\s+/, "" );
    };
 
    $.rtrim = function( str ) {
        return str.replace( /\s+$/, "" );
    };

　上面那种若是你写的全局函数比较少的状况下使用挺好，若是多的话建议使用 使用$.extend(object)

  $.extend({
      ltrim:function( str ) {
        return str.replace( /^\s+/, "" );
    },
    rtrim:function( str ) {
        return str.replace( /\s+$/, "" );
    }
    });

　3.独立的命名空间

虽然在jQuery命名空间中，咱们禁止使用了大量的javaScript函数名和变量名。可是仍然不可避免某些函数或变量名将于其余jQuery插件冲突，所以咱们习惯将一些方法封装到另外一个自定义的命名空间。

 $.myPlugin={
       ltrim:function( str ) {
        return str.replace( /^\s+/, "" );
    },
    rtrim:function( str ) {
        return str.replace( /\s+$/, "" );
    }
 };

使用独立的插件名，能够避免命名空间内函数的冲突，调用方式:

  var  str="  去除左空格 ";
  console.log("调用前:"+str.length+"调用后:"+$.myPlugin.ltrim(str).length);

对象扩展的插件

1.添加一个对象扩展方法

  $.fn.changeColor= function() {
    this.css( "color", "red" );
};
   $.fn.changeFont= function() {
    this.css( "font-size", "24px" );
};

　　调用方式:

     $(function () {
       $("a").showColor();
       $("div").changeFont();
    }); 

　2.添加多个对象扩展方法

  (function($){
      $.fn.changeColor= function() {
    this.css( "color", "red" );
};
   $.fn.changeFont=function() {
    this.css( "font-size", "24px" );
};
  })(jQuery);

　　兼容写法(防止前面的函数漏写了；):

;(function($){
      $.fn.changeColor= function() {
    this.css( "color", "red" );
};
   $.fn.changeFont=function() {
    this.css( "font-size", "24px" );
};
  })(jQuery);

　  上面都定义了一个jQuery函数,形参是$，函数定义完成以后,把jQuery这个实参传递进去.当即调用执行。这样的好处是,咱们在写jQuery插件时,也可使用$这个别名,而不会与prototype引发冲突.

3. 使用$.fn.extend(object)

题外话，查看jQuery源码(版本1.11.1)能够看到:

jQuery.fn = jQuery.prototype = {
	// The current version of jQuery being used
	jquery: version,
	constructor: jQuery,
......................
	},

jQuery是一个封装得很是好的类，好比语句$("a") 会生成一个 jQuery类的实例。jQuery.fn.extend(object)其实是对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可使用这个“成员函数”。

  $.fn.extend({
  changeColor:function() {
  this.css( "color", "red" );
},
changeFont:function() {
    this.css( "font-size", "24px" );
}
});

　介绍了基本是关于对象扩展的基础的用法，下面开发一个简单的相似于代码高亮的功能，以下:

(function($) {
   $.fn.highlight = function(options) {
     //插件参数的可控制性，外界能够修改默认参数
     var defaults=$.extend($.fn.highlight.defaults, options );
     //遍历函数，而后根据参数改变样式
   return this.each(function() {
        var elem = $( this ); 
        var markup = elem.html();
        markup = $.fn.highlight.format( markup );
        elem.html(markup);
        elem.css({
            color: defaults.color,
            fontSize:defaults.fontSize,
            backgroundColor: defaults.backgroundColor
        });
    });
};
//参数默认值
$.fn.highlight.defaults={
            color: "#556b2f",
            backgroundColor:"white",
            fontSize: "48px"
        };
//格式化字体
$.fn.highlight.format = function( txt ) {
    return "<strong>" + txt + "</strong>";
};
})(jQuery);

      $(function () {
        //调用插件
        $("a").highlight({color:"red",fontSize:"24px"});
    }); 

　小结

jQuery这两种插件开发的使用，须要根据开发过程当中的具体状况而定，第一种类扩展的方法相似于C#添加一个静态方法，第二种对象扩展主要是根据本身的实际业务而肯定的，你的网站有些地方经常使用的功能确定能够本身写成一个插件，好比说图片的查看，侧边栏的点击，有的时候你一样能够研究网上别人写的插件，也能够学到很多东西.