jQuery源码分析，实现一个简单的id选择器
2016-02-15 本文已影响879人
webCoder
一直在使用jQuery，也一直想更深层次的学习jQuery，下面就从jQuery的结构说起。并通过一个小例子，实现一个简单的选择器获取文本内容的功能。
- 在jQuery源码，你会看到下面的结构:
(function(window,undefined){
var jQuery = ;
window.jQuery = $.jQuery = jQuery;
})(window);
这个结构代表创建一个匿名函数并且立即执行。通过这个匿名函数，创建了一个“私有”的命名空间，可以防止变量冲突污染。
由于undefined可以被重写，被修改为其他的值，因此将undefined作为参数传入，可以保证undefined确实是未定义。
- jQuery对象构造函数
//构造jQuery对象
var jQuery = function(selector,context){
return new jQuery.fn.init(selector,context,rootjQuery);
}
jQuery对象不是通过 new jQuery 创建的，而是通过 new jQuery.fn.init 创建的。定义了jQuery对象，实际就是一个函数，这个函数返回的是new jQuery.fn.init( selector, context, rootjQuery );，所以jQuery对象就是*** jQuery.fn.init*** 实例。
- jQuery原型
jQuery的原型就是jQuery.fn，所以在fn上添加的方法可以在任何jQuery对象中直接调用。
jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype
这里会有点绕，我也是参考了别人的网站上写的。
所有挂载到jQuery.fn的方法，相当于挂载到了jQuery.prototype，
即挂载到了jQuery 函数上（一开始的 jQuery = function( selector, context ) ），
但是最后都相当于挂载到了jQuery.fn.init.prototype，
即相当于挂载到了一开始的jQuery 函数返回的对象上，即挂载到了我们最终使用的jQuery对象上。
- 下面我们就来看jQuery.fn.init
jQuery.fn.init的功能是对传进来的selector参数进行分析，进行各种不同的处理，然后生成jQuery对象。
这个init函数就是原型，jQuery函数构造函数。
这个函数接收三个参数，分别是选择器，上下文和root，
这个root在return new jQuery.fn.init( selector, context, rootjQuery );已经定死了，
就是rootjQuery 就是 document对象,
所以实际上只有两个参数可用，就是selector和context。
pic1.png
根据selector和context参数的不同，分情况处理，依次处理了如下几种情况
1, selector为空，则直接返回空的jquery对象
2，如果selector是字符串，分如下几种情况
2.1, selector是 '<xxx>'类型的，则直接创建html片段，
同时如果context是plainObject则把其中的属性全部赋值给创建出来的html片段
2.2,如果selector是一个id选择器，则直接调用getElementById来选择元素
2.3, 如果context为空，调用rootjQuery.find(selector),
如果context是jquery对象，则直接调用context.find(selector)
2.4，到这里，说明context也是一个选择器，则直接调用$(context).find(selector)
3, 如果selector是一个DOMElement，则直接使用，不用去找了
4, 如果selector是一个函数，则在documentready时调用此函数
5，兼容另一种写法，即直接传一个对象 {selector:xxx, context:xxx}
到此基本的知识点就讲到这里，我们来看jQuery源码的结构
(function( window, undefined) {
var jQuery = (function() {
// 构建jQuery对象
var jQuery = function( selector, context ) {
return new jQuery.fn.init( selector, context, rootjQuery );
}
// jQuery对象原型
jQuery.fn = jQuery.prototype = {
constructor: jQuery,
init: function ( selector, context, rootjQuery ) {
}
};
// 合并内容到第一个参数中，后续大部分功能都通过该函数扩展
// 通过jQuery.fn.extend扩展的函数，大部分都会调用通过jQuery.extend扩展的同名函数
jQuery.extend = jQuery.fn.extend = **function**() {};
// 在jQuery上扩展静态方法
jQuery.extend({
});
// 到这里，jQuery对象构造完成，后边的代码都是对jQuery或jQuery对象的扩展
return jQuery;
})();
window.jQuery = window.$ = jQuery;
})(window);
下面是模拟jQuery实现简单的获取元素内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="testText">
测试文本
</div>
</body>
<script>
(function(window,undefined){
var rootjQuery = window.document;
var jQuery = (function(){
var jQuery = function(selector,context){
return new jQuery.fn.init( selector, context, rootjQuery );
}
jQuery.fn = jQuery.prototype ={
construct: jQuery,
init: function( selector, context, rootjQuery ){
var that = this;
that.ele = null;
that.value = '';
if(selector.charAt(0) === '#'){
console.log(selector);
that.ele = document.getElementById(selector.slice(1));
}
that.getValue = function(){
that.value = that.ele ? that.ele.innerHTML : 'No value';
return that;
};
that.showValue = function(){
return that.value;
};
}
};
jQuery.fn.init.prototype = jQuery.fn;
return jQuery;
})();
window.jQuery = window.$ = jQuery;
})(window);
//测试
var testText = $('#testText').getValue().showValue(); //
alert(testText);
</script>
</html>
这里只实现了根据id来查找到具体的元素，其他拓展的方法，如根据类名来实现查找 都可以写在init函数中。
