读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 相关文章推荐
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
jquery ajax修改全局变量示例代码
Nov 08 Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
Apr 27 Javascript
详解javascript数组去重问题
Nov 06 Javascript
全屏js头像上传插件源码高清版
Mar 29 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
使用jquery Ajax实现上传附件功能
Oct 23 jQuery
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
jstree中的checkbox默认选中和隐藏示例代码
Dec 29 Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 Javascript
读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
在smarty中调用php内置函数的方法
2013/02/07 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
php防止sql注入简单分析
2015/03/18 PHP
php读取csc文件并输出
2015/05/21 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
探讨JQUERY JSON的反序列化类 using问题的解决方法
2013/12/19 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
Python中的引用和拷贝浅析
2014/11/22 Python
Django Highcharts制作图表
2016/08/27 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
Django model序列化为json的方法示例
2018/10/16 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
python 如何区分return和yield
2020/09/22 Python
python中翻译功能translate模块实现方法
2020/12/17 Python
AmazeUI 图标的示例代码
2020/08/13 HTML / CSS
与世界上最好的跑步专业品牌合作:Fleet Feet
2019/03/22 全球购物
香港网上花店:FlowerAdvisor香港
2019/05/30 全球购物
党课心得体会范文
2014/09/09 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
java如何实现socket连接方法封装
2021/09/25 Java/Android
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL