jQuery源码分析随笔

帅比萌擦擦* 提交于 2020-04-06 07:16:38

一次在写jquery插件的经历,让自己发现了js水很深,自己很菜。然后慢慢发现js包括了原型、闭包、作用域等一些很常用的知识点。

 

首先jquery源码的主要结构

下面就是在做分析jquery源码时自己的一些备注

 1 (function(window){
 2     var jQuery = function(select){
 3         //privatefunc();
 4         return new jQuery.fn.init(select);
 5         //这边必须new一个对象(这时this指向init对象),不然return jQuery.fn.init(select);中this指向jQuery.fn,而jQuery.fn其实是个定义了很多方法的集合
 6     }
 7     
 8     jQuery.test = function(){//静态方法
 9         console.log('call test method');
10     }
11     
12     var privatefunc = function (){//内部方法,不能再 外面调用,需要让外部调用及jquery的做法:window.privatefunc = privatefunc;这也是闭包
13         console.log(this)
14         console.log('call privatefunc method');
15     }
16 
17     jQuery.fn = jQuery.prototype = {
18         init:function(select){
19             console.log(this)
20             var _this = this;
21             if(!select){
22                 return this;
23             }
24             _this.ele = document.documentElement.querySelectorAll(select);
25             _this.length = _this.ele.length;
26             return _this;
27         },
28         show: function(){
29             if(this.length===0){
30                 return;
31             }
32             for(var i=0;i<this.length;i++){
33                 this.ele[i].style.display = 'block';
34             }
35             console.log('call show method')
36             return this;
37         },
38         hide: function(){
39             if(this.length===0){
40                 return;
41             }
42             for(var i=0;i<this.length;i++){
43                 this.ele[i].style.display = 'none';
44             }
45             console.log('call hide method')
46             return this;
47         },
48         click: function(){
49             console.log('call click method')
50             return this;
51         },
52         each: function(fn){
53             for(var i=0;i<this.length;i++){
54                 fn.call(this.ele[i], i, this.ele[i])
55             }
56         },
57         morefunc: function(){
58             
59         }
60         
61     }
62     
63     jQuery.fn.init.prototype = jQuery.fn;
64     
65     window.jQuery = jQuery; //将jQuery赋值给window.jQuery,全局变量。这样外部就可以直接访问jQuery函数了
66     
67 })(window,undefined)

下面我从自己一开始比较疑惑的几个点进行分析

1、jQuery 到底是什么?

  通常$('div')返回的是new jQuery.fn.init( selector, context )这个对象,也就是init这个函数对象,这里面会查询div标签的dom对象数组、length还有jquery的实例方法。

  

 

2、jQuery.fn和jQuery的区别?

  jQuery.fn是个方法的集合,通过jQuery.fn.init.prototype = jQuery.fn,这样jQuery.fn.init就包含了jQuery的所有实例方法,jQuery.fn也就是jQuery的所有实例方法。

      jQuery.fn.init.prototype==jQuery.prototype==jQuery.fn

 

3、jQuery为什么要调用jQuery.fn.init来实例化?

  jQuery的初始化可以$('div')、new $('div')。为了能通过$('div')方便的进行初始化,就需要在构造方法中返回new jQuery.fn.init(select)来巧妙的实现他。

  jQuery.fn.init刚好具备了jquery的所有的实例方法。

  比如在jQuery构造方法中直接return this或者new jQuery(),很明显这是没办法实现的。

 

4、存在的疑问

   jQuery.fn这个变量总是让人很绕。如果直接换成jQueryFn不知道可不可以,也许是为了写插件时把jQuery.prototype提供出去吧。

  jQuery.fn.plugin = plugin;

 

5、总结

  首先创建一个闭包,在里面申请一个变量jQuery,然后挂载window下,让闭包外的作用域也能进行访问;

  其次创建一个jquery别名的jquery.fn=jquery.prototype,并将jquery.fn.init.prototype = jquery.fn;
     最后$('.div')的方法返回new jquery.fn.init()的实例。这样这个实例也拥有了jquery.fn的方法。

1 (function(window, undefined){
2 var jquery = function(selected, content){
3 return jquery.fn.init();
4 }
5 //方便后续我们初始化jquery对象时$('div')而不用new jQuery('div')来初始化
6 jquery.fn.init.prototype = jquery.fn;
7 
8 })(window)

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!