8 jQuery源码剖析

2019-05-10 本文已影响0人官清岁月

1、jQuery简化框架：剖析源码jQuery2.0.3; 用法介绍的为3.3.1(最新版本)；[目前还有部分政商系统使用的jQuery1/2，而且低版本jQuery更加稳定,全面，所以源码介绍为2版本，目前jQuery也宣布不再更新，但仍然会发布补丁包，3.3.1还不太稳定]

(function( window, undefined ) { 源码 })(window)

(1).使用立即执行函数优点：防止污染全局变量 [匿名函数的自执行]

(2).全局可使用jQuery/$, 其显然提供了一个接口，将jQuery/$挂载到了全局window上了， window.jQuery = window.$ = jQuery;//8826行

(3).window作为参数传入的原因：形参等同于是局部变量，立即执行函数体内查找window要比从全局中查找window更快，同时压缩版本的时候，将window传入给形参e；不用写window,更省内存，形参为单字母变量；//小结：查找速度快对压缩版本有好处(function(e,u){}(window)) undefined是window下的属性,不属于关键字/保留字，其是可以修改的，在IE浏览器中，var undefined = 10; console.log(undefined);//10;(被修改了)，所以采取传参的形式，防止外界修改undefined;

(4).jQuery2.0.3不遵循es5.0严格模式，jQuery3.3.1严格遵循es5.0严格模式

2、简化框架(模块化)：

(1).21 ~ 94：定义变量和函数

(2).96 ~ 283：添加属性和方法(原型链上编程jQuery.prototype,说明其是面向对象编程)[对象.属性/.方法也说明其是面向对象编程]

(3). 285 ~ 347: jQuery.extend = jQuery.fn.extend = fn;(扩展方法在jQuery/jQuery()；如果写在原型链上，不易于代码的独立性，不易维护和扩展，利用继承后续方便扩展)

(4).349 ~ 817：扩展工具方法($.fn:扩展静态属性和方法；$().fn:扩展实例方法) 静态方法和实例方法的关系：静态方法是更底层的方法，实例方法偏上层，实例方法中可调用静态方法，并且扩展的静态方法/类方法和扩展的实例方法的方法名可相同，并不会冲突，因为其面向的对象是不同的

(5).877 ~ 2856：sizzle选择器(复杂选择器，可独立作为选择元素使用，官网:https://sizzlejs.com/)

(6).2880 ~ 3042：回调函数($.Callbacks();返回对象/执行队列)，作用：通过回调对象来管理函数，实现对函数的统一管理

(7).3043~3183：延迟对象($.Deferred();异步管理方式，实现对异步操作的统一管理，js中定时器，ajax,加载script标签，等待dom加载等都是异步，异步需要进行管理，要不代码越写越复杂)

(8).3184 ~ 3295：功能检测($.support();判断不同浏览器来进行不同操作，浏览器版本迭代较快，所以检测功能即可，每次浏览器迭代更新并不一定是推出新功能，有时只是解决一些bug，修复漏洞而已) [功能检测，检查浏览器对各项功能的支持(属性和方法)，主要是针对不同浏览器的兼容性，检查其是否支持该属性和方法，共检测了13项，并不是所有的都进行检测]

(9).3308 ~ 3652：数据缓存(data)[jQuery内部存在缓存系统，即不把数据扩展到(添加到)元素身上，防止内存泄漏] [动画、事件等都有用到缓存系统，而不是把它们都放到DOM元素的属性上] [内存泄漏：内存被占用，不能释放也不能使用，本质都是内存变少，所以称之为内存泄漏，java/c#都有垃圾回收机制，c++是手动操作；之前原生js中提到的闭包的坏处也是如此，导致原有作用域链不释放，发生内存泄漏]

(10).3653 ~ 3797：队列管理($.queue())

(11).3803 ~ 4299：元素属性的操作:attr();/prop();/val();/addClass();

(12).4300 ~ 5128：事件操作相关方法:on();trigger();等

(13).5140 ~ 6057：Dom基本操作:next();siblings();

(14).6058 ~ 6620：CSS样式操作(内部封装了兼容性写法)

(15).6621 ~ 7854：ajax系列操作：$.ajax();$().load();$.getJSON();$.getScript();

(16). 7855 ~ 8584：动画相关操作运动

(17).8585 ~ 8792: 位置尺寸:offset();scrollTop();

(18).8804 ~ 8821：jQuery模块化的模式

(19).8826：对外提供的接口:window.jQuery = window.$ = jQuery;

3、重点剖析：

(1).jQuery();获取到的类数组对象继承自jQuery.prototype原型;//$();其就是普通的函数执行(jQuery并不是构造函数)，最终可获得对象 ->函数内部return new 对象 -> jQuery中无new构造的实现