She*_*hea 9 javascript jquery design-patterns class
我试图重现jQuery的(1.7.1)对象结构,以更好地理解它是如何工作的.我有以下代码:
(function (window, undefined) {
var document = window.document,
navigator = window.navigator,
location = window.location;
window.myclass = (function () {
var __con = function () {
return new __con.fn.init();
}
__con.fn = __con.prototype = {
'init' : function () {
return this;
},
'test' : function () {
console.log('test1');
return this;
}
}
__con.fn.init.prototype = __con.fn;
__con.test = function () {
console.log('test2');
return this;
}
return __con;
})();
})(window);
我的控制台看起来像这样:
> myclass().test();
test1
< __con.fn.__con.init
> myclass.test();
test2
< function () {
return new __con.fn.init();
}
我的困惑是jQuery如何能够返回一个数组并仍然是一个jQuery对象？从控制台执行的jQuery可能看起来像:
> $(document.body)
[<body>?…?</body>?]
> $(document.body).css('width');
"1263px"
事实上,我肯定注意到的一件事是缺少<返回对象.那到底是怎么回事？我在谷歌搜索过来解释jQuery是如何工作的,无济于事.也许我只是把术语弄错了,我不确定.好像我找不到任何解释这一点的详细资料来源.
也许我的代码只是不完整,但到目前为止我所拥有的基本结构是我迄今为止所能提取的.如果错误,不完整或效率低下,请纠正我到目前为止的情况,请务必随时提供以下内容:
jQuery对象是类似数组的,所以外观和行为很像数组,但实际上只是自定义对象,大致相当于DOM节点的集合(除了增加了功能).所有类似数组的功能 - 长度,切片()等......实际上是手动添加到jQuery原型(为jQuery.fn别名),有时通过使用jQuery对象作为上下文调用数组函数
slice = Array.prototype.slice,
...
slice: function() {
return this.pushStack( slice.apply( this, arguments ),
"slice", slice.call(arguments).join(",") );
},
有时候从头开始写.看一下带注释的代码(对你来说可能是一个非常有用的资源 - 它涵盖了v1.6.2,但我认为从那以后没有任何太大的变化,除了可能添加$ .callbacks),看看this.length是否手动设置,例如
if ( selector === "body" && !context && document.body ) {
this.context = document;
this[0] = document.body;
this.selector = selector;
this.length = 1;
return this;
}
该jQuery.buildFragment()方法对于如何构造包含较大DOM节点集合的jQuery对象也是基础.
总而言之,jQuery不使用数组,它看起来就像它一样,因为许多本机数组功能已被复制为jQuery原型的属性.
| 归档时间： |
|
| 查看次数： |
688 次 |
| 最近记录： |