jQuery中开发插件的两种方式
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
jQuery中开发插件的两种方式的更多相关文章
- jQuery中开发插件的两种方式(附Demo)
做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQu ...
- jQuery开发插件的两种方式
最近挺多人写jQuery的,都是关于jQuery扩展方面的,使用方面的讲的比较多,但是关于详细的一个基础的过程讲的比较少一点,做web开发的基本上都会用到jQuery,本人就根据jQuery的使用经验 ...
- web.config文件中配置数据库连接的两种方式
web.config文件中配置数据库连接的两种方式 标签: 数据库webconfig 2015-04-28 18:18 31590人阅读 评论(1)收藏举报 分类: 数据库(74) 在网站开发 ...
- LInux内核分析--使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
实验者:江军 ID:fuchen1994 实验描述: 选择一个系统调用(13号系统调用time除外),系统调用列表参见http://codelab.shiyanlou.com/xref/linux-3 ...
- Linux内核设计第四周学习总结 使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
陈巧然原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 实验目的: 使用库函数A ...
- linux内核分析作业4:使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用
系统调用:库函数封装了系统调用,通过库函数和系统调用打交道 用户态:低级别执行状态,代码的掌控范围会受到限制. 内核态:高执行级别,代码可移植性特权指令,访问任意物理地址 为什么划分级别:如果全部特权 ...
- Java中HashMap遍历的两种方式
Java中HashMap遍历的两种方式 转]Java中HashMap遍历的两种方式原文地址: http://www.javaweb.cc/language/java/032291.shtml 第一种: ...
- java中数组复制的两种方式
在java中数组复制有两种方式: 一:System.arraycopy(原数组,开始copy的下标,存放copy内容的数组,开始存放的下标,需要copy的长度); 这个方法需要先创建一个空的存放cop ...
- 实验--使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用(杨光)
使用库函数API和C代码中嵌入汇编代码两种方式使用同一个系统调用 攥写人:杨光 学号:20135233 ( *原创作品转载请注明出处*) ( 学习课程:<Linux内核分析>MOOC课程 ...
随机推荐
- 在CMD命令行和PowerShell中实现复制粘贴功能
在CMD命令行和PowerShell中实现复制粘贴功能 常常使用命令行或者PowerShell的朋友肯定会遇到这样的情况:粘贴文本非常easy,右键--选择粘贴就可以,可是想要复制命令 ...
- oracle 10g操作和维护手册
1. 检查数据库基本状况... 1.1. 检查Oracle实例状态... 1.2. 检查Oracle服务进程... 1.3. 检查Oracle监听状态... 2. ...
- 表与表的关系把RD搞乱了,记一个Procedure中的bug
就是6张表的关联查询,写了一个存储过程,使用4层for来处理 bug:最后一个for中,两张表的关联条件少了一个,结果数据多查了. 排查办法:使用dbms_output.printline('');每 ...
- 一张地图告诉你,只JavaScript不够!
这将是JavaScript语法,你真的会一JavaScript嘛.看看这个图片!超好用JavaScript一本书的摘录游.熊儿.快去学习! 版权声明:本文博客原创文章.博客,未经同意,不得转载.
- Codeforces 374D Inna and Sequence 二分法+树状数组
主题链接:点击打开链接 特定n一个操作,m长序列a 下列n的数量 if(co>=0)向字符串加入一个co (開始是空字符串) else 删除字符串中有a的下标的字符 直接在序列上搞.简单模拟 # ...
- DES加密和解密PHP,Java,ObjectC统一的方法
原文:DES加密和解密PHP,Java,ObjectC统一的方法 PHP的加解密函数 <?php class DesComponent { var $key = '12345678'; func ...
- HTTPS背后的加密算法(转)
当你在浏览器的地址栏上输入https开头的网址后,浏览器和服务器之间会在接下来的几百毫秒内进行大量的通信.InfoQ的这篇文章对此有非常详细的描述.这些复杂的步骤的第一步,就是浏览器与服务器之间协商一 ...
- oracle_oracle中修改日期的显示格式
我的现在的日期格式是 ,要改成英文的需要输入一下命令: ALTER SESSION SET NLS_DATE_LANGUAGE=AMERICAN; 修改后变为: 同样也得若是英文要想 ...
- MVC 插件化框架支持原生MVC的Area和路由特性
.NET MVC 插件化框架支持原生MVC的Area和路由特性 前面开放的源码只是简单的Plugin的实现,支持了插件的热插拔,最近晚上偶然想到,原生的MVC提供Areas和RouteAtrribut ...
- linux_windows下配置tomcat区别 ,不同子域名映射不同 项目
windows下 均为修改tomcat/bin/server.xml 在最后 替换 注意 docBase / <Realm className="org.apache.catalina ...