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

    });

 小结

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

时间: 2024-10-12 12:31:29

jQuery开发插件的两种方式的相关文章

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

做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQuery看成一个类,那么就相当于给jQuery类本身添加方法.第二种是对象扩展的方式开发插件,即jQuery对象添加方法. 类扩展的插件 类扩展的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法.典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中.关

OpenCV4Android开发环境搭建两种方式加上图像二值化

1.环境搭建 进行android开发所需要的环境一般为:eclipse + android sdk + ADT,而OpenCV的开发由于需要编写本地代码(C/C++),因此还需要安装以下工具:NDK,Cygwin,CDT.网上都有大量详细的安装讲解,本文只描述下其中关键步骤. 1.1 NDK的安装 (1) NDK下载后解压到固定目录即可,无需安装.本文解压到D盘根目录下,其路径为:D:\android-ndk-r8d: (2) 添加环境变量,将其安装路径添加到系统path变量中,并添加系统变量N

eclipse里安装SVN插件的两种方式

eclipse里安装SVN插件,一般来说,有两种方式: 直接下载SVN插件,将其解压到eclipse的对应目录里 使用eclipse 里Help菜单的"Install New Software",通过输入SVN地址,直接下载安装到eclipse里 第一种方式: 1.下载SVN插件 SVN插件下载地址及更新地址,你根据需要选择你需要的版本.现在最新是1.8.x Links for 1.8.x Release: Eclipse update site URL: http://subclip

Mybatis 注解开发传入List 两种方式接收方式 在IN场景中

1.在@Select中 @Select("<script>"              + "SELECT IDFA FROM t_xxx WHERE IDFA IN "              + "<foreach item='item' index='index' collection='strList' open='(' separator=',' close=')'>"                  + &

Eclipse Jee Oxygen配置Tomcat插件的两种方式

一:手动安装tomcat插件 首先下载net.sf.eclipse.tomcat_9.0.1.jar 1.将该文件(net.sf.eclipse.tomcat_9.0.1.jar )放入Eclipse4.6/plugins中 2.将Eclipse Jee Oxygen 安装目录下的/configuration/org.eclipse.update删除 3:以管理员身份运行命令行 打开Eclipse Jee Oxygen 文件夹(使用命令"cd 文件夹路径") 输入"eclip

jQuery中插件开发两种方式

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

Golang开发环境搭建(Notepad++、LiteIDE两种方式以及martini框架使用)

本文介绍两种Golang的开发环境一种基于notepad++.另一种基于liteide. 1.下载Golang语言的pkg:http://golangtc.com/download 直接点击安装,一路next. 2.程序员必备神器notepad++开发Golang环境很简单 一次点击:插件->Plugin Manger->Show Plugin Manger,安装插件GOnpp,重启notepad++. 新建文件命名为hello.go用notepad++打开,拷贝如下代码: package m

jquery ajax提交表单数据的两种方式

jquery ajax提交表单数据的两种方式

Android开发之使用sqlite3工具操作数据库的两种方式

使用 sqlite3 工具操作数据库的两种方式 请尊重他人的劳动成果,转载请注明出处:Android开发之使用sqlite3工具操作数据库的两种方式 http://blog.csdn.net/fengyuzhengfan/article/details/40193123 在Android SDK的tools目录下提供了一"sqlite3.exe工具,它是一个简单的SQLite数据库管理工具,类似于MySQL提供的命令行窗口在有些时候,开发者利用该工具来査询. 管理数据库. 下面介绍两种方式: 第