jQuery源码解析(架构与依赖模块)笔记一

1.3设计模块

简洁的API、优雅的链式、强大的选择器、便捷的操作

1.4整体架构

五大块：选择器、DOM操作、事件、AJAX、动画

业务层的门面接口：.ajaxComplete()、.ajaxError()、.ajaxSend()、ajaxStart()、.ajaxStop()、.ajaxSuccess()

底层接口：jQuery.ajax()、jQuery.ajaxSetup()

快捷方法：jQuery.get()、jQuery.getJSON()、jQuery.getScript()、jQuery.post()

1.5立即调用表达式

任何库与框架设计的第一个要点：解决命名空间与变量间污染的问题。采用立即调用表达式包裹了自身方法来解决这个问题。

方法1：

var factory = function(){
return function(){

//执行方法

}

}

var jQuery = factory();

方法2：

(function(window, undefined) { //undefined是普普通通的变量名,在js中不作为关键字，可对其赋值操作

var jQuery = function() { } //闭包

//...

window.jQuery = window.$ = jQuery;

})(window);

//当window通过传递给闭包内部之后，在闭包内使用，可以把它当成局部变量，显然要比原先在window scope下查找是要快一些

jQuery为什么创建外层包裹？原理？

jQuery使用()将匿名函数括起来，然后后面加一对小括号，小括号能把我们的表达式组合分块，并且每一块（每一对小括号）都有一个返回值。所以，当我们用小括号把匿名函数括起来的时候，实际上小括号返回的就是一个匿名函数的Function对象。

1..6 jQuery类数组对象的结构

内部采用“类数组对象”的方式作为存储结构的，既可以像对象一样处理jQuery操作，也可以像数组一样使用push、pop、shift、unshift、sort、each、map等类数组的方法来操作jQuery对象了。

<span style="white-space:pre"></span>var aQuery = function(selector){//强制为对象if(!(this instaceof aQuery)){//某个值是什么类型的对象，变量this是aQuery对象吗return new aQuery(selector);}var elem = document.getElementById(/[^#].*/.exec(selector)[0]);//exec()检测字符串与正则表达式的匹配this.length = 1;this[0] = elem;this.context = document;this.selector = selector;this.get = function(num){return this[num];}return this;}

1.7 jQuery中ready与load事件

三种文档加载方法：

<span style="white-space:pre"></span>$(document).ready(function(){//...代码...})//ready简写$(function(){//...代码...})$(document).load(function(){//...代码...})

 ready和load哪个先执行？ready先执行。

DOM文档的加载步骤：

1.解析HTML结构；

2.加载外部脚本和样式表文件；

3.解析并执行脚本代码；

4.构造HTML DOM模型；//ready

5.加载图片等外部文件；

6.页面加载完毕。//load

总结：ready和load的区别就在于资源文件的加载，ready构建了基本的DOM结构，所以对于代码来说越快加载越好。

<span style="white-space:pre"></span>jQuery.ready.promise = function(obj){//promise--对象，用来传递异步操作的消息，代表某个未来的才会知道结果的事件(异步操作)//并且这个事件提供API，可供进一步处理if(!readyList){readyList = jQuery.Deferred();if(document.readyState === "complete"){setTimeout(jQuery.ready);}else{document.addEventListener("DOMContentLoaded", completed, false);window.addEventListener("load", completed, false);}}return readyList.promise(obj);};

1.7jQuery多库共存处理-------无冲突处理

例如$采取作为命名空间，不免与其他别的库框架或插件相冲突------noConflict函数

引入jQuery运行这个noConflict函数将变量$的控制权让给第一个实现它的那个类库，确保jQuery不会与其他类库的$对象发生冲突。在运行这个函数后，就只能只用jQuery变量访问jQuery对象。

使用DEMO：

jQuery.noConflict();

//使用jQuery

jQuery("arron").show();

//使用其他库的$()

$("arron").style.display = 'block';

这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库之前。

var _jQuery = window.jQuery,_$ = window.$;jQuery.noConflict = function(deep){if(window.$ === jQuery){window.$ = $;}if(deep && window.jQuery === jQuery){window.jQuery = jQuery;}return jQuery;};