jquery源码分析，实现一个简单的id选择器

一直在使用jQuery，也一直想更深层次的学习jQuery，下面就从jQuery的结构说起。并通过一个小例子，实现一个简单的选择器获取文本内容的功能。

在jQuery源码，你会看到下面的结构:

(function(window,undefined){
    var jQuery = ;
    window.jQuery = $.jQuery = jQuery;
})(window);

这个结构代表创建一个匿名函数并且立即执行。通过这个匿名函数，创建了一个“私有”的命名空间，可以防止变量冲突污染。

1	由于undefined可以被重写，被修改为其他的值，因此将undefined作为参数传入，可以保证undefined确实是未定义。

jQuery对象构造函数
1
2
3
4
//构造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对象中直接调用。

1	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。

根据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函数中。
#####注意：var rootjQuery = window.document;这句话不要省略。

skFe

无忧亦无惧

jQuery源码分析，实现一个简单的id选择器