自制jQuery

Posted 2020-09-26

 1 (function( window, undefined ) {
 2     var jQuery = (function(){
 3         var jQuery = function(selector){
 4             return new jQuery.fn.init(selector);
 5         };
 6 
 7         //这里fn是prototype的别名，后面的代码扩展fn就是扩展prototype，fn写起来简短
 8         //如果后面引用了大量的prototype，prototype因为是关键字，还不能被压缩
 9         jQuery.fn = jQuery.prototype = {
10             constructor: jQuery,
11             //这是一个构造函数
12             init: function(selector, context){
13                 var root;
14                 //如果没有root,就从document开始查找
15                 root = context || document;
16                 //
17                 var parts = selector.split(" "),                //以空格分离选择器
18                     query = parts[0],                           //取出第一段结果
19                     //slice返回从第1项到最后一项组成的一个新数组
20                     //join把数组中的每个元素转换为字符串，并且用空格连接起来，形成一个String对象
21                     rest = parts.slice(1).join(" "),
22                     elems = root.getElementsByTagName(query),   //查找匹配第一段选择器的元素
23                     results = [];                               //初始化一个数组，用于保存查询结果
24 
25                     for(var i = 0; i < elems.length; i++){
26                         if(rest){
27                             //递归查找，以elems[i]为上下文，以rest为选择器表达式
28                             //concat会创建一个原数组的副本，并将find的结果添加到results末尾,，这里又将这个副本的引用存回results
29                             results = results.concat(find(rest, elems[i]));
30                         }
31                         else{
32                             //将查找到的元素保存在results数组上
33                             results.push(elems[i]);
34                         }
35                     }
36                 //真正的jQuery返回的是不是Array对象，是一个类数组对象
37                 return results;//返回Array对象
38 
39             }
40         };
41         jQuery.fn.init.prototype = jQuery.fn;
42         jQuery.extend = jQuery.fn.extend = function(){
43             var ob = arguments[0];
44             for(var p in ob){
45                 if(ob.hasOwnProperty(p) && (!this.hasOwnProperty(p))){
46                     this[p]=ob[p];
47                 }
48             }
49         };
50 
51         //用于扩展全局对象，所以不用jQuery.fn.extend
52         jQuery.extend({
53             isFunction: function () {
54                 if(typeof arguments[0] == "function")
55                     return true;
56                 else
57                     return false;
58             }
59         });
60 
61         jQuery.extend({
62             isFrom:function(){
63             return argument[0].constructor == arguments[1];
64             //return arguments[0] instanceof arguments[1];
65         }});
66 
67 
68         jQuery.extend({
69             each:function(obj,callback){
70                 for(var i = 0; i < obj.length; i++){
71                     callback.call(obj || null, obj[i], i, obj);
72                 }
73             }
74         });
75 /*
76  对于html文档，getElementsByTagName返回的是一个HTMLCollection对象，该对象和NodeLIst对象很类似，该函数是用C++实现的
77  详见《JS高程》P257
78  return jQuery.makeArray(document.getElementsByTagName(selector));
79 */
80         jQuery.extend({
81             makeArray:function( array, results ){
82                 //array是HTMLCollection对像
83                 array = Array.prototype.slice.call( array, 0 );
84                 if ( results ) {
85                     results.push.apply( results, array );
86                     return results;
87                 }
88 
89                 return array;
90             }
91         });
92         return jQuery;
93     })();
94     window.jQuery = window.$ = jQuery;
95 })(window);

目前仅支持标签选择器，如“div", "div p"。而且$("div")返回的是Array对象，和实际的jQuery不同