jQuery类扩展和实例扩展

jQuery开发插件的两种方式

最近挺多人写jQuery的，都是关于jQuery扩展方面的，使用方面的讲的比较多，但是关于详细的一个基础的过程讲的比较少一点，做web开发的基本上都会用到jQuery，本人就根据jQuery的使用经验讲讲插件开发。jQuery插件开发两种方式：一种是类扩展的方式开发插件，jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数)，如果将jQuery看成一个类，那么就相当于给jQuery类本身添加方法。第二种是对象扩展的方式开发插件，即jQuery对象添加方法。

类扩展的插件

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

 1.添加全局函数

1 2 3

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

　　调用方式

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

　2.添加多个全局函数

1 2 3 4 5 6 7

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

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

1 2 3 4 5 6 7 8

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

　3.独立的命名空间

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

1 2 3 4 5 6 7 8

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

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

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

对象扩展的插件

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

1 2 3 4 5 6

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

　　调用方式:

1 2 3

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

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

1 2 3 4 5 6 7 8

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

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

1 2 3 4 5 6 7 8

;( 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)可以看到:

1 2 3 4 5 6

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类的实例可以使用这个“成员函数”。

1 2 3 4 5 6 7 8

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

( 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" });      });