读jQuery之一(对象的组成)

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了读jQuery之一(对象的组成)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3442字，纯文字阅读大概需要5分钟。

内容图文

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

在这段时间内，我的入门老师是墨墨，其实至今他仍然是我敬仰的同事之一。他的编程造诣很高，相信早已突破了编程语言的限制。在大家都在使用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
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的读jQuery之一(对象的组成)全部内容，希望文章能够帮你解决读jQuery之一(对象的组成)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端