读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 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
使用jquery实现以post打开新窗口
Mar 19 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
Aug 25 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
JavaScript门面模式详解
Oct 19 Javascript
Angular 作用域scope的具体使用
Dec 11 Javascript
Vue双向绑定实现原理与方法详解
May 07 Javascript
Element Input输入框的使用方法
Jul 26 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
jQuery内部原理和实现方式浅析
2015/02/03 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
python取代netcat过程分析
2018/02/10 Python
Python查看微信撤回消息代码
2018/06/07 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
推荐值得学习的12款python-web开发框架
2020/08/10 Python
python基于opencv 实现图像时钟
2021/01/04 Python
Pycharm创建python文件自动添加日期作者等信息(步骤详解)
2021/02/03 Python
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
加拿大时尚潮流大码女装购物网站:Addition Elle
2018/04/02 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
opencv实现图像平移效果
2021/03/24 Python
商务日语专业自荐信
2014/04/17 职场文书
共筑中国梦演讲稿
2014/04/23 职场文书
初中学生评语大全
2014/04/24 职场文书
中职三好学生事迹材料
2014/08/24 职场文书
幼师大班个人总结
2015/02/13 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
元旦联欢晚会主持词
2015/07/01 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
导游词之江苏溱潼古镇
2019/11/27 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
python小型的音频操作库mp3Play
2022/04/24 Python