读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 相关文章推荐
监控 url fragment变化的js代码
Apr 19 Javascript
javascript中获取下个月一号,是星期几
Jun 01 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
Jan 23 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
详解JavaScript作用域 闭包
Jul 29 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
Oct 28 Javascript
gojs实现蚂蚁线动画效果
Feb 18 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 HTML代码串截取代码
2008/12/29 PHP
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP超级全局变量数组小结
2012/10/04 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
php清空(删除)指定目录下的文件,不删除目录文件夹的实现代码
2014/09/04 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
微信小程序 获取session_key和openid的实例
2017/08/17 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
2020/09/14 Javascript
python分析nignx访问日志脚本分享
2015/02/26 Python
Python中函数的参数定义和可变参数用法实例分析
2015/06/04 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
Python3操作Excel文件(读写)的简单实例
2019/09/02 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
python实现横向拼接图片
2020/03/23 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
灰雀教学反思
2014/04/28 职场文书
公司给客户的感谢信
2015/01/23 职场文书
长城导游词300字
2015/01/30 职场文书
会计求职自荐信
2015/03/26 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
未婚证明格式
2015/06/15 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
PHP实现两种排课方式
2021/06/26 PHP
手写实现JS中的new
2021/11/07 Javascript