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 相关文章推荐
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
Angular实现form自动布局
Jan 28 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
Three.js快速入门教程
Sep 09 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
Javascript自定义事件详解
Jan 13 Javascript
js获取ip和地区
Mar 10 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
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
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
使用javascript获取flash加载的百分比的实现代码
2011/05/25 Javascript
jQuery实现数字加减效果汇总
2014/12/16 Javascript
js+css实现有立体感的按钮式文字竖排菜单效果
2015/09/01 Javascript
js编写贪吃蛇的小游戏
2020/08/24 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
JavaScript驾驭网页-CSS与DOM
2016/03/24 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
vue axios 在页面切换时中断请求方法 ajax
2018/03/05 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
Python中函数及默认参数的定义与调用操作实例分析
2017/07/25 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
详解小白之KMP算法及python实现
2019/04/04 Python
Python中常用的os操作汇总
2020/11/05 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
2020/06/04 HTML / CSS
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
中专毕业生求职简历的自我评价
2013/10/21 职场文书
岗位职责的定义
2013/11/10 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
项目建议书怎么写
2014/05/15 职场文书
学校师德师风整改方案
2014/10/28 职场文书
招标保密承诺书
2015/01/20 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
深入讲解Vue中父子组件通信与事件触发
2022/03/22 Vue.js