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

做web开发的基本上都会用到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"});
    });

 小结

jQuery这两种插件开发的使用,需要根据开发过程中的具体情况而定,第一种类扩展的方法类似于C#添加一个静态方法,第二种对象扩展主要是根据自己的实际业务而确定的,你的网站有些地方常用的功能肯定可以自己写成一个插件,比如说图片的查看,侧边栏的点击,有的时候你同样可以研究网上别人写的插件,也可以学到不少东西.

如果你觉得本文还不错,有所收获,给个推荐吧,多谢~

 

http://www.cnblogs.com/xiaofeixiang/p/3950178.html

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。