jQuery 源码分析(一) 代码结构
jquery是一个javascript库，它支持链式操作方式,即对发生在同一个jquery对象上的一组动作，可以直接接连写无需要重复获取对象。这一特点使得jquery的代码无比优雅，而且有强大的选择器，出色的dom操作,可靠的事件处理机制,完善的ajax,关键是有出色的浏览器兼容性，开发项目时可以不用考虑兼容性，因为jquery已经替我们都修正好了，最后还有一点是jquery有非常多的插件，功能非常丰富。
jquery和vue(包括react、angular)的区别就不说了，网上一大堆哈哈，前者是mvc模式，后者是mvvm模式,mvvm模式的出现不是说为了取代mvc模式的，它们是可以共同存在的，很多时候还是使用mvc模式更方便，对于一些数据交互比较多的可以使用vue之类的脚手架来进行开发项目,难度相比较也有点大
jquery的代码结构相比较简单，就是一个匿名函数，将入口挂载到window.$和window.jquery属性上，我们模拟一下jquery的结构，由浅入深，如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
<script>
(function(window,undefined){
var jquery = (function(){
return 'hello jquery';
})()
window.jquery = window.$ = jquery;
})(window)
console.log($)
</script>
</body>
</html>
就是定义一个匿名函数，内部再定义一个jquery变量，值为一个立即执行表达式，最后将值挂载到window.jquery和window.$上，打印出来的如下:
实际上当然不可能直接返回一个字符串，其实在这个立即执行表达式里，会执行new jquery.fn.init()创建一个函数对象，最后返回改函数对象，我们加深一点代码，和jquery内部一样，如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
</head>
<body>
<p id="p">123</p>
<script>
(function(window,undefined){
var jquery = (function(){
var jquery = function(selector){ //再定义一个函数，内部返回new一个jquery.fn.init对象，并返回
return new jquery.fn.init(selector)
}
jquery.fn={
init:function(selector){
this[0] = selector;
return this
}
}
return jquery;
})()
window.jquery = window.$ = jquery;
})(window)
console.log($('p'))
console.log($('p')[0])
</script>
</body>
</html>
打印如下:
第一行输出是$('p')对象，第二行就是p这个dom节点引用了，第一行输出是不是和真实的jquery对象很像呢，我们用真实的jquery打印看看:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<p id="p">123</p>
<script>
console.log($(p))
console.log($(p)[0])
</script>
</body>
</html>
输出如下:
可以看到真实的jquery返回的也是一个init对象，第二行输出么就是一摸一样了。
jquery的代码结构就是这样的,最后返回的其实内部的jquery.fn.init对象，然后会把jquery.fn设置为jquery.fn.init的原型，最后在jquery.fn或jquery.fn.prototype上设置大量的属性和方法，这些属性和方法就是jquery对外的属性和方法，供我们使用了。
jquery的代码结构按照功能不同分为三部分:
入口模块(用于构造jquery对象)
底层支持模块(供功能模块使用的)
功能模块(最后实现的操作)
底层支持模块又分为:
选择器模块
浏览器功能测试
异步队列
数据缓存和队列模块
功能模块又细分为
属性操作
事件系统
dom遍历
dom操作
样式操作css
异步请求
动画模块
后面慢慢介绍每个模块，每个api的用法和原理实现。
上一篇： jquery 获取上传文件大小
下一篇： ES6 入门系列 ArrayBuffer