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 相关文章推荐
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
TypeScript入门-基本数据类型
Mar 28 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
vue实现拖拽效果
Dec 23 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
PHP编程与应用
2006/10/09 PHP
用PHP实现ODBC数据分页显示一例
2006/10/09 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
Laravel创建数据库表结构的例子
2019/10/09 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
2006/06/26 Javascript
Javascript开发包大全整理
2006/12/22 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
2017/04/13 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
用实例解释Python中的继承和多态的概念
2015/04/27 Python
python从sqlite读取并显示数据的方法
2015/05/08 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
python读取并写入mat文件的方法
2019/07/12 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
python GUI模拟实现计算器
2020/06/22 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
购房个人委托书范本
2014/10/11 职场文书
2014年教务处工作总结
2014/12/03 职场文书
五年级学生评语大全
2014/12/26 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
Redis批量生成数据的实现
2022/06/05 Redis