类似于jquery的Mole库架构分析
仿jquery写的一个东东~
以下是jQuery 1.6.1 代码片段
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var jQuery = function ( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); }, ... 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对象指的是jQuery.prototype.init的实例,简单的说就是new jQuery.prototype.init。这里jQuery.prototype.init的类型是function,可以看成是一个类。
jQuery对象由以下部分组成:
- 挂在jQuery.prototype.init中的this上的属性或方法。
- 挂在jQuery.prototype.init.prototype上的属性或方法。
- 因为把jQuery.prototype赋值给了jQuery.prototype.init.prototype,所以挂在jQuery.prototype上的属性和方法也是jQuery对象的一部分。
- 通过jQuery.fn.extend({...})方式扩展的属性或方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
;(function(window, undefined) { //调用$或Mole构造器时,返回的实例对象共享(拥有)$原型对象的方法(因为:$.fn.init.prototype = $.fn = $.prototype;) if (window.$ === undefined) { //实例对象共享的方法(原型方法) //初始化选择器,包括#id, .className,还有tagName.className,node节点四种格式 init: function(selector, root) { }, //判断样式类是否存在 //显示隐藏 //事件绑定 //节点或HTML插入 //坐标、宽高计算 } //因为$.prototype = $.fn,所以使用new操作符调用init构造函数后返回的实例对象共享$原型的方法 return $; })(window);
|