jquery源码解读,实现大概框架(一)
jquery是一个库,封装了很多方法。为的就是更加方便使用。
首先:分析, 第一条。 他们有两类方法,
一种是 $ . 直接调用方法 ( 例如:$.each() )
另一种是 (‘div’).html() )
首先实现, $(‘Selector’)方法:
<div>1</div>
<div>2</div>
<div>3</div>
<script src="js/jquery-1.7.2.js"></script>
<script>
// 获得jQuery对象
console.log($('div'));
</script>
是一个返回的是一个init的类数组。那么首先我们需要这样返回一个对象。
var jQuery = function(selector) {
return new init(selector);
}
var init = function(selector) {
}
// 验证
console.log(jQuery('div'));
但是,此时暴露了另一个问题, init这个构造函数,是暴露在全局的。污染全局变量。(我们这是一个类库。如果项目很大,引入我们的类库,发现全局变量冲突了,我认为这就是污染全局变量了。)
这是,我们需要把变量放到对象上, 此时就可以 使用 jQuery.fn
jQuery.fn = {
init : function(selector){
var doms = document.querySelectorAll(selector);
for(var i = 0; i < doms.length; i++) {
this[i] = doms[i];
// this.length++;
}
this.length = doms.length;
this.selector = selector;
},
}
我们知道,返回的是类数组。
此时我们需要对象变成类数组,需要三个条件
1、有length属性
2、有索引
3、有一个增强数数组的方法(例如Array的splice)
(1、有length属性
2、 有索引
3、需要有一个增强数组的方法(例如 Array中的splice) )
jQuery.fn = {
length: 0,
splice: Array.prototype.splice,
init : function(selector){
var doms = document.querySelectorAll(selector);
for(var i = 0; i < doms.length; i++) {
this[i] = doms[i];
// this.length++;
}
this.length = doms.length;
this.selector = selector;
},
}
现在执行 最终的一步,改变指向(这步非常精髓。我感觉jquery的精髓就在这些指向上了)
// 将对象变成类数组
jQuery.fn.init.prototype = jQuery.fn;
这样我们就实现了
常精髓。我感觉jquery的精髓就在这些指向上了)
// 将对象变成类数组
jQuery.fn.init.prototype = jQuery.fn;
这样我们就实现了