jQuery源码分析一

最近在研究jQuery源码，jQuery源码近9000行，因此不可能一篇文章全都分析了，我会一点一点分析，每隔一段时间更新一点，尽量分析的详细一点。
这篇文章我分享的是JQ采用的匿名函数自以及构造函数。

匿名函数自执行
(function(window,undefined){})(window)；
jQuery采用的就是这段代码，从第14行到8829行，包裹住全文（我分析的版本是2.0.3的版本，你们可以自己从网上下载这个版本）；

1.匿名函数自执行的一个优势，内部的代码，不会外部冲突，内部污染外部。
2.jQuery传这两个参数原因有两个，第一个，window属于js的最顶端，速度比较慢，根据作用域的原理，变量是从离他最近定义的地方开始查找，所以说传参之后，查找速度就更加的快捷。第二个，window传过来之后，对于压缩版本也很有好处,我们要知道压缩代码不仅仅只是压缩换行和空格，函数内部的变量名它也会进行压缩,例如window在jquery-2.0.3.min.js里面被压缩成了e,但是不传参window则是函数外部的，无法被压缩。
3.为什么要传undefined?因为undefined在某些情况下是可以被修改的，例如IE8 以下，定义var undefined=99;alert(undefined)为99，更多情况下它是不可被更改。所以为了防止外部有人修改undefined，jq将它传了进来。
4.”use strict”严格开发模式，加了这句话表明开发模式为严格开发模式，我们必须严格遵守其规范，例如在非严格模式下允许写八进制形式，在严格模式下就不允许，但是jquery不支持这种写法因为这种写法在低版本浏览器下不兼容只支持高版本的浏览器;再比如，我们定义一个a=10，并没有用var定义，在非严格模式下不报错，但是加上了“use strict”程序会报错a is not defined，我们公司的移动框架还是支持的，毕竟移动端不需要考虑多少兼容性成本。

构造函数
jQuery中的构造函数可以说其精华之一，我不得不赞叹一下其作者。
1.普通的构造函数

function Aaa(){//这里面定义一些属性
}
//原型链中添加方法
Aaa.prototype.init = function(){};
Aaa.prototype.css = function(){};
//使用
var a1 = new Aaa();
a1.init();
a1.css();

2.jQuery中的构造函数

//window.jQuery = window.$ = jQuery;8826行
function jQuery(){return new jQuery.prototype.init();//亮点一，第63行
}
jQuery.prototype.init = function(){}
jQuery.prototype.css = function(){}
jQuery.prototype.init.prototype = jQuery.prototype;//一个对象赋值给了另外一个对象，就出现了引用,亮点二，第283行
jQuery().css();//调用方法

可能有的人会觉得，不对啊，jQuey里面不是这样写的，
63行写的return new jQuery.fn.init( selector, context, rootjQuery );
283行写的是jQuery.fn.init.prototype = jQuery.fn;
但是注意到第96行jQuery.fn = jQuery.prototype，我就喜欢叫fn你有什么办法吗，上面的方法是我简化之后样子，jQuery简化下来就是这个样子，这里我推荐张鑫旭老师的一篇文章，分析jQuery原理的，
http://www.zhangxinxu.com/wordpress/2013/07/jquery-%E5%8E%9F%E7%90%86-%E6%9C%BA%E5%88%B6/，写的很好，也很幽默，不会很枯燥。

jQuery返回的是一个new操作符处理的实例化对象，在init方法里面经过了一系列判断处理，返回的其实就是类似document.getElementById()酱紫的东西。我们要知道，在new操作符实现构造函数实例化对象的时候，我们return 都是不用写的，因为默认返回的是this,但若是改变了，返回的就是改变的东西，jQuery中返回自执行构造函数（init函数），在init里面进行自己想要的操作，再用jQuery.prototype.init.prototype = jQuery.prototype赋值引用(引用大家应该都懂吧，传值和传址不懂的可以去百度百度)，两个指向同一个地址，也就是说，jQuery.prototype.init的原型即是我jQuery的原型，那样我写在jQuery的原型里面或者是写在jQuery.prototype.init的原型里面不都可以吗！

jQuery源码分析一相关推荐

jQuery源码分析-each函数
本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...
jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准附上每一章的源码注释分析 :https://git ...
[转] jQuery源码分析-如何做jQuery源码分析
jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...
[转]jQuery源码分析系列
文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准附上每一章的源码注释分析 :https://github.com/JsAaro ...
jQuery 源码分析第一篇之入口源码
目前阅读的是jQuery 1.11.3的源码,有参考nuysoft的资料.原来比较喜欢在自己的Evernote上做学习基类,并没有在网上写技术博客的习惯,现在开始学习JS的开源代码,想跟大家多交流,希 ...
jQuery源码分析系列：.domManip() .buildFragment() .clean()
.domManip(args,table,callback):是jQuery DOM操作的核心函数,可以扩展出如下方法: append/appendTo: prepend/prependTo: b ...
jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/unde
10.4 .bind() .one() 10.4.1 如何使用 .bind( eventType, [eventData], handler(eventObject) ) 在匹配的元素上绑 ...
JQuery源码分析 - 闭包机制在jQuery中的使用及冲突解决
jQuery中的闭包机制本系列中我们将基于jquery3.5.1版本对jQuery源码进行分析,分析以源码加注释的方式展示. 本节中将分析jQuery源码中的 14 ~ 40行:自执行函数定义.环境 ...
jQuery源码分析之$.ajax方法
请阅读我其它的关于inspectPrefiltersOrTransport以及ajaxTransport等相关博文,请了解readyState状态码针对获取到location.href的兼容代码: ...
jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/undelegate
Js代码作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 后文预告:封装事件对象便 ...

jQuery源码分析一

jQuery源码分析一相关推荐

最新文章

热门文章