读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 相关文章推荐
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
浅谈jquery.fn.extend与jquery.extend区别
Jul 13 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
几种tab切换详解
Feb 03 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
详解基于node的前端项目编译时内存溢出问题
Aug 01 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
详解各版本React路由的跳转的方法
May 10 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 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插入排序实现代码
2013/04/04 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
解析vue中的$mount
2017/12/21 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
微信小程序的部署方法步骤
2018/09/04 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
在Python 3中实现类型检查器的简单方法
2015/07/03 Python
使用Python的PIL模块来进行图片对比
2016/02/18 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
美国在线咖啡、茶和餐厅供应商:LollicupStore
2018/05/04 全球购物
Herschel Supply Co.美国:背包、手提袋及配件
2020/11/24 全球购物
小学教师听课制度
2014/02/01 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
高中家长寄语
2014/04/02 职场文书
毕业生求职信
2014/06/10 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
正规借条模板
2015/05/26 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
python自然语言处理之字典树知识总结
2021/04/25 Python
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android