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 异步调用框架 (Part 3 - 代码实现)
Aug 04 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
深入探究node之Transform
Jul 20 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
基于node打包可执行文件工具_Pkg使用心得分享
Jan 24 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
node前端开发模板引擎Jade的入门
May 11 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创建自己的Composer包方法
2018/04/09 PHP
jQuery EasyUI API 中文文档 - Menu菜单
2011/10/03 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
2012/11/08 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
IE8下String的Trim()方法失效的解决方法
2013/11/08 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
JS实现表单中checkbox对勾选中增加边框显示效果
2015/08/21 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
基于JavaScript实现类名的添加与移除
2017/04/23 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
Vue数据监听方法watch的使用
2018/03/28 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
2020/06/02 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
解决echarts vue数据更新,视图不更新问题(echarts嵌在vue弹框中)
2020/07/20 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
Python lambda和Python def区别分析
2014/11/30 Python
Python日志模块logging简介
2015/04/13 Python
Python实现微信自动好友验证,自动回复,发送群聊链接方法
2019/02/21 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
《花的勇气》教后反思
2014/02/12 职场文书
大学生见习期满自我鉴定
2014/09/13 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书