读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 event事件在IE、FF兼容性问题
Jan 01 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
JavaScript四种调用模式和this示例介绍
Jan 02 Javascript
scrollWidth,clientWidth,offsetWidth的区别
Jan 13 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
vue中引用阿里字体图标的方法
Feb 10 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
JS实现马赛克图片效果完整示例
Apr 13 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
el-table树形表格表单验证(列表生成序号)
May 31 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+oracle 分页类
2006/10/09 PHP
坏狼的PHP学习教程之第1天
2008/06/15 PHP
PHP 冒泡排序算法的实现代码
2010/08/08 PHP
php使用Jpgraph绘制复杂X-Y坐标图的方法
2015/06/10 PHP
php实现评论回复删除功能
2017/05/23 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
js 数组实现一个类似ruby的迭代器
2009/10/27 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
常用js字符串判断方法整理
2013/10/18 Javascript
简单的Jquery遮罩层代码实例
2013/11/14 Javascript
javascript计算用户打开网页的停留时间
2014/01/09 Javascript
禁用Tab键JS代码兼容Firefox和IE
2014/04/18 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
2015/03/04 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
JS检测window.open打开的窗口是否关闭
2017/06/25 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
2020/06/28 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
js实现贪吃蛇游戏(简易版)
2020/09/29 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
实例讲解Python中整数的最大值输出
2019/03/17 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
Python语法之精妙的十个知识点(装B语法)
2020/01/18 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
个人党性剖析材料
2014/02/03 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
运动会广播稿150字
2014/02/19 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python