【你的jQuery?是你的jQuery】(一)——jQuery的架子

目的:

了解jQuery整体结构,自己构造出$(oo).xx这种东西

解析:

在jQuery中,你会发现整篇满眼的“$(xx)”、“$(oo).css(xx)”这种,是的,它就是构造jQuery对象的构造函数简称,你可以这样理解:$==window.$==window.jQuery

也就是说我们常用的$为widow对象下的一个属性,那么这个属性是怎么跑到window上的呢?

我们先把源码中多余的代码去掉会看到:

一:

1 (function(window,undefined){
2 
3     //code
4 
5 })(window)

说明:

1、通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间下,你可以玩命定义你的var变量而不会破坏全局的命名空间。

2、通过传入window变量,使得window由全局变量变为局部变量,当在jQuery代码块中访问window时,不需要将作用域链回退到顶层作用域,这样可以更快的访问window;这还不是关键所在,更重要的是,将window作为参数传入,可以在压缩代码时进行优化

3、参数列表中增加undefined,确保undefined是真的未定义。因为undefined能够被重写,赋予新的值。(undefined = "123";)这样。

二:

我们将代码扩充一下

 1 (function (window, undefined) {
 2   var jQuery = window.jQuery = window.$ = function (selector, context) {
 3    return new jQuery.fn.init(selector, context);
 4   }
 5   jQuery.fn = jQuery.prototype = {
 6     init: function (selector, context) {
 7        },
 8        jquery: "xxx"
 9     }
10 jQuery.fn.init.prototype = jQuery.fn;
11 })(window)
12 alert($().jquery)    //成功构造出$(oo).xx这种东西

说明:

1、selector:也就是你传入$()内的参数,形如$("#id")、$(".class")、$("div p span")

2、context:可选参数,会默认成当前节点的上下文

3、new jQuery.fn.init:jQuery真正的入口,创建出各种jQuery对象

4、jQuery.fn.init.prototype = jQuery.fn;此句为关键代码,将上一条说明中创建的jQuery实例对象的原型链连上jQuery的原型方法,原型链不太懂的同学可以看下这个【javascript继承】之——原型链继承和类式继承

(本篇至此,其他内容未完,待续……)

下一节提示:

介绍jQuery的基本组成,了解到底什么是jQuery对象,以及常说的jQuery对象的”原型方法”和“静态方法”

原文地址:https://www.cnblogs.com/ccto/p/3076761.html