读jQuery之二(两种扩展)


Posted in Javascript onJune 11, 2011

如下

jQuery.extend = jQuery.fn.extend = function() { 
... 
};

我们可以用$.extend去扩展自定义的对象,如
var myself = {name:jack}; 
$.extend(myself, {setName: function(n){this.name=n;} }); 
myself.setName("tom");

通过$.extend为对象myself添加了setName方法。但这里主要讨论$.extend如何构建jQuery库的。不知注意到上面代码中jQuery.extend和jQuery.fn.extend是同一个函数。我们浏览下jQuery库,发现有些方法是通过调用jQuery.extend扩展的,有些则是通过调用jQuery.fn.extend扩展的。
下面分别讨论:
1,通过jQuery.extend扩展
我们知道jQuery.extend中的jQuery类型是function,即typeof jQuery值为字符串“function”。如果把jQuery当成一个类,jQuery.extend相当于为该类添加了静态方法extend。静态方法是不需要new一个实例再去调用的,通过“类名+方法名”直接调用。即jQuery.extend(...),jQuery又被赋值给$。因此我们更习惯$.extend(...)。
源码中直接调用jQuery.extend方法,只传一个参数。如下
jQuery.extend({ 
noConflict: function( deep ) { 
window.$ = _$; 
if ( deep ) 
window.jQuery = _jQuery; 
return jQuery; 
}, 
... 
});

我们知道extend中如果只传一个参数,那么将执行该句
if ( length === i ) { 
target = this; 
--i; 
}

即扩展自己,而这里的this则是function jQuery。也就是说给function jQuery添加了许多静态方法,这些方法都可以直接通过jQuery.xx(或$.xx)方式来调用,而不是先执行(调用)jQuery方法再去调用xx,如$("#id").xx。也许下面这个例子更容易理解
function fun(){}//定义一个类(函数) 
//为该类(函数)添加一个静态方法extend 
fun.extend=function(obj){ 
for(var a in obj) 
this[a] = obj[a];//注意:这里的tihs即fun 
} 
//调用extend为该类添加了静态属性name,静态方法method1 
fun.extend({name:"fun",method1:function(){}}); 
//输出name,prototype,extend,method1 
console.dir(fun)

因此,jQuery中的isFunction, isArray, isWindow等都是静态方法,只能通过$.isFunction, $.isArray, $.Window引用。而不能通过$("...").isFuction, $("...").isArray, $("...").isWindow方式引用。
2,通过jQuery.fn.extend扩展
jQuery.fn等于jQuery.prototype,也就是说给function jQuery的原型(prototype)上挂了个extend方法。通过调用jQuery.fn.extend(object)来扩展时(注意只传一个参数object),extend函数中仍然会执行
if ( length === i ) { 
target = this; 
--i; 
}

而这时的this则是jQuery.prototype(第一条提到的则是jQuery函数自身)。即给jQuery.prototype上添加了许多属性,方法。当jQuery函数执行时,如$()或jQuery(),更多时候是$()。该函数会new一个jQuery(见上一篇jQuery对象的组成)。这时则把扩展的属性,方法都附加到new生成的对象上了。也许下面这个示例更容易理解
function fun(){}//定义一个类(函数) 
//给该类原型上添加一个方法extned 
fun.prototype.extend = function(obj){ 
for(var a in obj) 
this[a] = obj[a];//注意:这里的this即是fun.prototype 
} 
//调用extend方法给fun.prototype上添加属性,方法 
fun.prototype.extend({name:"fun2",method1:function(){}}) 
//输出name,extend,method1 
console.dir(new fun())

因此扩展的属性或方法都添加到jQuery对象上了。如bind, one, unbind等可以通过$("...").bind, $("...").one, $("...").unbind方式调用。却不能通过 $.bind, $.one, $.unbind方式调用。
jQuery与Prototype一样都是通过extend方法扩展出整个库的。相对来说jQuery的扩展方式更难理解一些。
总结如下:
1,jQuery.extend({...})是给function jQuery添加静态属性或方法。
2,jQuery().extend({...})是给jQuery对象添加属性或方法。
/js/2011/zchain/zchain-0.2.js
Javascript 相关文章推荐
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
JavaScript获取路径设计源码
May 22 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
轻松掌握JavaScript代理模式
Aug 26 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
Javascript原生ajax请求代码实例
Feb 20 Javascript
利用原生JS实现欢乐水果机小游戏
Apr 23 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
读jQuery之一(对象的组成)
Jun 11 #Javascript
基于jquery的无刷新分页技术
Jun 11 #Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 #Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 #Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 #Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 #Javascript
精通Javascript系列之数据类型 字符串
Jun 08 #Javascript
You might like
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
thinkphp配置连接数据库技巧
2014/12/02 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
javascript面向对象程序设计高级特性经典教程(值得收藏)
2016/05/19 Javascript
node.js发送邮件email的方法详解
2017/01/06 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
原生js封装自定义滚动条
2017/03/24 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
Python的Django框架中的数据过滤功能
2015/07/17 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
python使用jieba实现中文分词去停用词方法示例
2018/03/11 Python
在Python中定义一个常量的方法
2018/11/10 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
师范毕业生求职自荐信
2013/09/25 职场文书
个人思想理论学习的自我鉴定
2013/11/30 职场文书
家庭教育的心得体会
2014/09/01 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
院党委组织查摆问题对照检查材料思想汇报2014
2014/10/08 职场文书
iPhone13将有八大升级
2021/04/15 数码科技
Mysql Online DDL的使用详解
2021/05/20 MySQL
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android
vue动态绑定style样式
2022/04/20 Vue.js