读jQuery之一(对象的组成)


Posted in Javascript onJune 11, 2011

对于jQuery的写法甚是困惑,尤其在使用Prototype的$后,一度不能理解jQuery的$。对于现在前端同学来说,可能第一个接触的就是jQuery了,他们会觉得很习惯,很自然。

至今电脑里还存放着当时的API文档,发个图感叹下

读jQuery之一(对象的组成)


在这段时间内,我的入门老师是墨墨,其实至今他仍然是我敬仰的同事之一。他的编程造诣很高,相信早已突破了编程语言的限制。在大家都在使用Prototype.js的时候,在jQuery尚未在国内流行的时候,他就已经把jQuery引入到项目中了。

言归正传吧,目前的jQuery版本已经到了1.6.1。从当时的2000行左右膨胀到了9000行。相信不久就会突破1w行。对于一些简单网页来说引入一个jQuery已经不再那么轻量了。这里的研读的是1.6.1这个版本,我会边读边写,最后会写出一个1000行左右的“迷你jQuery”。


以下是jQuery 1.6.1 代码片段

var jQuery = function( selector, context ) { 
// The jQuery object is actually just the init constructor 'enhanced' 
return new jQuery.fn.init( selector, context, rootjQuery ); 
}, 
... 
class2type = {}; jQuery.fn = jQuery.prototype = { 
constructor: jQuery, 
init: function(selector, context, rootjQuery){ 
} 
} 
// Give the init function the jQuery prototype for later instantiation 
jQuery.fn.init.prototype = jQuery.fn;

初看上去像是在用 原型方式 在写一个类jQuery(别名$),但实际我们使用时是函数调用$("#id"),却不是new $("#id")。
标识符 jQuery是一个function,其内new了一个function init的实例,然后返回。至此我们知道其真正的构造器是jQuery.fn.init。jQuery写的实在诡异,它把init又挂在了jQuery的prototype上,阅读起来有些绕人。

jQuery.fn.init.prototype = jQuery.fn; 是关键的一句。该句把function jQuery的原型赋值给了function init的原型。当调用$("#id")时返回的对象组成包括两个部分。
1,由function init中this带的(如this.context);
2,由function jQuery的prototype带的(如this.size/this.toArray);

模仿jQuery写一个

// zchain-0.1.js 
function $(selector){ 
return new $.prototype.init(selector); 
} 
$.prototype={ 
init:function(selector){ 
if(selector === undefined){ 
this.length = 0; 
return this; 
} 
if(selector.nodeType==1){ 
this[0] = selector; 
}else{ 
this[0]=document.getElementById(selector); 
} 
this.length=1; 
}, 
css:function(name,value){ 
this[0].style[name] = value; 
return this;//链式调用 
}, 
hide:function(){ 
var self=this; 
setTimeout(function(){ 
self[0].style.display="none"; 
},3000); 
return this;//链式调用 
} 
} 
$.prototype.init.prototype=$.prototype;

简单起见,这里选择器只传html element或元素id(后续会增强,但不实现全部css selector),this上挂了length属性,赋值为1。
当我们调用时
var obj = $(); 
console.dir(obj);

$()实际没有什么意义,只是为了测试调用后obj的组成。firebug控制台输出如下:
length:0;
init:function
attr:function
hide:function

即obj对象是由function init中this及function $.prototype组成的。
再看下$.prototype上的方法,我只添加了css和hide方法,这两个方法的实现也是极其简陋的。

<script src="http://files.cnblogs.com/snandy/zchain-0.1.js"></script> 
<div id='content'>3 seconds later I will hide.</div> 
<script type="text/javascript"> 
$("content").css("color","red").hide(); 
</script>

先调用css设置了字体颜色为红色,3秒后隐藏了。
总结下:
jQuery对象指的是jQuery.prototype.init的实例,简单的说就是new jQuery.prototype.init。这里jQuery.prototype.init的类型是function,可以看成是一个类。

jQuery对象由以下部分组成:
1,挂在jQuery.prototype.init中的this上的属性或方法。
2,挂在jQuery.prototype.init.prototype上的属性或方法。
3,因为把jQuery.prototype赋值给了jQuery.prototype.init.prototype,所以挂在jQuery.prototype上的属性和方法也是jQuery对象的一部分。
4,通过jQuery.fn.extend({...})方式扩展的属性或方法(后续提到)。
/201106/yuanma/zchain.rar

Javascript 相关文章推荐
Js 随机数产生6位数字
May 13 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
Oct 19 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
Javascript 命名空间模式
Nov 01 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
ztree简介_动力节点Java学院整理
Jul 19 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
JavaScript find()方法及返回数据实例
Apr 30 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
精通Javascript系列之Javascript基础篇
Jun 07 #Javascript
You might like
深入解析php中的foreach问题
2013/06/30 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
phpmyadmin在宝塔面板里进不去的解决方案
2020/07/06 PHP
jquery实现心算练习代码
2010/12/06 Javascript
js获取html页面节点方法(递归方式)
2013/12/13 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
Jquery插件easyUi实现表单验证示例
2015/12/15 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
把vue-router和express项目部署到服务器的方法
2018/02/21 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python 多线程重启方法
2019/02/18 Python
Python Pandas 对列/行进行选择,增加,删除操作
2020/05/17 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
KARATOV珠宝在线商店:俄罗斯珠宝品牌
2019/03/13 全球购物
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
争论的故事教学反思
2014/02/06 职场文书
工作表现自我评价
2014/02/08 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
美容院经理岗位职责
2014/04/03 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
竞选卫生委员演讲稿
2014/04/28 职场文书
音乐课外活动总结
2015/05/09 职场文书
2019生态环境保护倡议书!
2019/07/03 职场文书
Django如何与Ajax交互
2021/04/29 Python
Java Socket实现多人聊天系统
2021/07/15 Java/Android