做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#添加一个静态方法,第二种对象扩展主要是根据自己的实际业务而确定的,你的网站有些地方常用的功能肯定可以自己写成一个插件,比如说图片的查看,侧边栏的点击,有的时候你同样可以研究网上别人写的插件,也可以学到不少东西.

jQuery中开发插件的两种方式(附Demo)的更多相关文章

  1. jQuery中开发插件的两种方式

    jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

  2. jQuery开发插件的两种方式

    最近挺多人写jQuery的,都是关于jQuery扩展方面的,使用方面的讲的比较多,但是关于详细的一个基础的过程讲的比较少一点,做web开发的基本上都会用到jQuery,本人就根据jQuery的使用经验 ...

  3. web.config文件中配置数据库连接的两种方式

    web.config文件中配置数据库连接的两种方式 标签: 数据库webconfig 2015-04-28 18:18 31590人阅读 评论(1)收藏举报    分类: 数据库(74)  在网站开发 ...

  4. LInux内核分析--使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用

    实验者:江军 ID:fuchen1994 实验描述: 选择一个系统调用(13号系统调用time除外),系统调用列表参见http://codelab.shiyanlou.com/xref/linux-3 ...

  5. Linux内核设计第四周学习总结 使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用

    陈巧然原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验目的: 使用库函数A ...

  6. linux内核分析作业4:使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用

    系统调用:库函数封装了系统调用,通过库函数和系统调用打交道 用户态:低级别执行状态,代码的掌控范围会受到限制. 内核态:高执行级别,代码可移植性特权指令,访问任意物理地址 为什么划分级别:如果全部特权 ...

  7. Java中HashMap遍历的两种方式

    Java中HashMap遍历的两种方式 转]Java中HashMap遍历的两种方式原文地址: http://www.javaweb.cc/language/java/032291.shtml 第一种: ...

  8. java中数组复制的两种方式

    在java中数组复制有两种方式: 一:System.arraycopy(原数组,开始copy的下标,存放copy内容的数组,开始存放的下标,需要copy的长度); 这个方法需要先创建一个空的存放cop ...

  9. 实验--使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用(杨光)

    使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用 攥写人:杨光  学号:20135233 ( *原创作品转载请注明出处*) ( 学习课程:<Linux内核分析>MOOC课程 ...

随机推荐

  1. C#语法浮点型字面量

    C#语法浮点型字面量 小数是生活中经常使用的一种数据表示形式.我们日常使用的5.5.0.6都是小数.在编程语言中,这种数据表示方式被称为浮点型数.浮点型数由整数部分.小数部分和小数点组成.浮点型字面量 ...

  2. luoguP5108 仰望半月的夜空 [官方?]题解 后缀数组 / 后缀树 / 后缀自动机 + 线段树 / st表 + 二分

    仰望半月的夜空 题解 可以的话,支持一下原作吧... 这道题数据很弱..... 因此各种乱搞估计都是能过的.... 算法一 暴力长度然后判断判断,复杂度\(O(n^3)\) 期望得分15分 算法二 通 ...

  3. Socket通信原理简介

    Socket通信原理简介 字数1011 阅读1766 评论2 喜欢11 何谓socket 计算机,顾名思义即是用来做计算.因而也需要输入和输出,输入需要计算的条件,输出计算结果.这些输入输出可以抽象为 ...

  4. Git版本管理工具对比(GitBash、EGit、SourceTree)

    Git管理工具对比(GitBash.EGit.SourceTree) GitBash是采用命令行的方式对版本进行管理,功能最为灵活强大,但是由于需要手动输入希望修改的文件名,所以相对繁琐. EGit是 ...

  5. Android 打包出现jdk版本错误的问题

    Android 打包出现 jdk 版本错误的问题,本质上是 SDK 的问题,与 JDK 无关.如果 SDK 的 API 是24或者更高,就要求 jdk 1.8,我这里指定的 API 是22,所以去勾选 ...

  6. HDU 1692 Destroy the Well of Life 水题

    Destroy the Well of Life Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showprob ...

  7. trigger、procedure和event如何同步

    最近遇到一个需求涉及存储过程,被突然问题到如何同步问题问到了,赶紧补课学习一下. 首先,先看一下trigger.procedure和event的定义都是什么? trigger: 触发器是一个被指定关联 ...

  8. 原型设计工具 Axure

    ahjesus Axure RP 7.0注册码 ahjesus Axure RP 7.0注册码 用户名:axureuser 序列号:8wFfIX7a8hHq6yAy6T8zCz5R0NBKeVxo9I ...

  9. PostgreSQL高可用集群方案收集/主从切换/一主多从(待实践)

    对于业内来说,基本都在围绕主从切换的高可用方案: http://www.10tiao.com/html/175/201509/210974337/1.html https://www.jianshu. ...

  10. PostgreSQL SystemTap on Linux 转

    PostgreSQL 支持动态跟踪, 可以通过dtrace或者systemtap工具统计相关探针的信息. 安装systemtap yum install systemtap kernel-debugi ...