读jQuery之一(对象的组成)_Javascript教程-查字典教程网
读jQuery之一(对象的组成)
读jQuery之一(对象的组成)
发布时间:2016-12-30 来源:查字典编辑
摘要:对于jQuery的写法甚是困惑,尤其在使用Prototype的$后,一度不能理解jQuery的$。对于现在前端同学来说,可能第一个接触的就是...

对于jQuery的写法甚是困惑,尤其在使用Prototype的$后,一度不能理解jQuery的$。对于现在前端同学来说,可能第一个接触的就是jQuery了,他们会觉得很习惯,很自然。

至今电脑里还存放着当时的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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类