jQuery 学习第七课 扩展jQuery的功能 插件开发


Posted in Javascript onMay 17, 2010

jQuery的主体如下:

(function(){ ……})();

对于Javascript基础不太好好的人来说比较奇怪。实际上,这个表达式声明了一个匿名函数(第一个括号),然后再执行它(第二个括号)。在这个函数中,完成了jQuery一系列方法和对象的定义。第24行很关键,

jQuery = window.jQuery = window.$ = function( selector, context ) { 
// The jQuery object is actually just the init constructor 'enhanced' 
return new jQuery.fn.init( selector, context ); 
}

在这里,定义了十分强大的$函数。$其实是jQuery的一个别名。jQuery才是“正宗”的jQuery函数,$的定义只是为了减少程序员的打字量。$很容易和其他库冲突,例如著名的prototype库也使用了这个名字。不过jQuery和其他库冲突的机会就少多了,因此使用jQuery 要比$安全的多。下面再说冲突的问题。再看return的对象fn的定义,第35行
jQuery.fn = jQuery.prototype = { 
init: function( selector, context ) { …… }, …… 
};

很显然fn只是一个jQuery的原型的简写而已。其中定义了一个init函数。实际上,init充当的是jQuery的构造函数的角色。当我们使用var i=$(‘selector')这样的代码的时候,可以发现变量i被jQuery包裹起来了,也就是i带上了jQuery.fn的方法。很明显,i的prototype被指向了jQuery.fn。再Javascript的世界里,可以说,i是jQuery的一个实例,你尝试下 i instanceof jQuery,返回的是true。然而,这里并没有用 i=new $(selector); 我估计,$是如此常用的一个函数,如果每次都要使用new来构造一个对象的话,那也太麻烦了,这就是init存在的理由,$本身被定义为一个很简单的函数,它内部仅有一行代码,返回一个init对象。我们每调用一次$(selector)方法,都返回一个jQuery对象。有点工厂模式的味道。当然,如果你对Javascript比较熟悉,就会知道这样是不够的,我们需要把init的prototype设为jQuery.fn,代码541行:

jQuery.fn.init.prototype = jQuery.fn;

到540行为止,都是定义的jQuery的原型对象,用OO语言的话说,相当于实例方法,从540行开始,定义了一系列jQuery的方法,相当于静态方法。至此,抛开方法的具体实现不谈(有些实在是太困难了),jQuery的结构基本上是明了的了。下面开始介绍扩展。

扩展jQuery首先要注意的就是避免命名冲突,尤其是抢手的$。考虑周到的jQuery设计了一个jQuery.noConflict()方法,使得jQuery可以拱手让出$符号,避免和其他库冲突,而程序员可以使用完整的符号jQuery来调用jQuery提供的方法。noConflict()的实现简单而巧妙,顺便看一下,首先在第21行,

// Map over the $ in case of overwrite
_$ = window.$,jQuery首先记录下windows.$,注意这行代码的运行时间非常早,在jQuery任何函数执行之前就会被执行。当然,这里的_$也有冲突的可能,不过概率是在是太小了,谁会用这么诡异的名字作为关键的变量呢。此时如果$已经被其他库占用,它的值会保留在_$中,在任何时候,只要调用jQuery.noConflict方法,619行,其代码如下:

noConflict: function( deep ) { 
window.$ = _$; 
if ( deep ) 
window.jQuery = _jQuery; 
return jQuery; 
},

这样,$就又还回去了。

作为插件开发者,我们无法保证$是否被拱手相让,最保险的是调用jQuery方法,然而有一个技巧可以保留简单的$而不影响其他部分,那就是:

(function($){ // plugin code goes here, you can use $ safely. 
})(jQuery);

关于插件的js文件的命名,一般是jquery.pluginname.js。

要扩展jQuery工具函数(静态函数)是很容易的,下面一个例子实现一个将数字扩展成固定位数的字符串的函数。

(function($) { 
$.toFixedWidth = function(value, length, fill) { 
var res = value.toString(); 
if (!fill) fill = 0; 
var padding = length - res.length; 
if (padding < 0) { 
res = res.substr(-padding); 
} else { 
for (var n = 0; n < padding; n++) 
res = fill + res; 
} 
return res; 
} 
})(jQuery);

要编写包装集的方法也同样容易,下面实现一个使表单元素只读的方法:
$.fn.setReadOnly = function(readonly) { 
return this.find('input:text').attr('readonly', readonly).css('opacity', readonly ? 0.5 : 1.0); 
}

下面编写一个小页面测试下,这个页面模拟的是订单提交页面,如果用户需要发票,需要填写发票信息,否则不能填写发票信息。
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery Extension</title> 
<script src="jquery-1.3.2.js" type="text/javascript"></script> 
<script src="jquery.yinzixin.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
$('#OrderID').val($.toFixedWidth('123', 8)); 
$('#InvoiceRequired').click(function() { 
$('.InvoiceInfo').setReadOnly(!this.checked); 
}); 
$('.InvoiceInfo').setReadOnly(false); 
} 
); 
</script> 
</head> 
<body> 
<form> 
Order ID:<input type="text" id="OrderID" /> <br /> 
<input type="checkbox" id="InvoiceRequired" />Invoice Required<br /> 
<div class="InvoiceInfo"> 
Inovice Tilte:<input type="text" id="Text1" /> 
Invoice Content:<input type="text" id="Text2" /> 
</div> 
<input type="button" value="Submit" /> 
</form> 
</body> 
</html>

jQuery 学习第七课 扩展jQuery的功能 插件开发
Javascript 相关文章推荐
Javascript代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
jquery 指南/入门基础
Nov 30 Javascript
简单实用的全选反选按钮例子
Oct 18 Javascript
JavaScript生成福利彩票双色球号码
May 15 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
如何在 Vue 中使用 JSX
Feb 14 Vue.js
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 #Javascript
jQuery 学习第五课 Ajax 使用说明
May 17 #Javascript
jQuery实现的立体文字渐变效果
May 17 #Javascript
jQuery实现的类flash菜单效果代码
May 17 #Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 #Javascript
JQuery select标签操作代码段
May 16 #Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 #Javascript
You might like
PHP 身份证号验证函数
2009/05/07 PHP
PHP类的静态(static)方法和静态(static)变量使用介绍
2012/02/19 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
2013/03/25 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
JavaScript原生对象之Number对象的属性和方法详解
2015/03/13 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
Nodejs中session的简单使用及通过session实现身份验证的方法
2016/02/04 NodeJs
DWR中各种java方法的调用
2016/05/04 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
2017/03/15 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
ios中视频的最后一桢问题解决
2019/05/14 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
基于python操作ES实例详解
2019/11/16 Python
Python正则表达式高级使用方法汇总
2020/06/18 Python
医学专业毕业生个人的求职信
2013/12/04 职场文书
村级四风对照检查材料
2014/08/24 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
Python实现天气查询软件
2021/06/07 Python
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL
Win10/Win11 任务栏替换成经典样式
2022/04/19 数码科技
Nginx开源可视化配置工具NginxConfig使用教程
2022/06/21 Servers