jQuery 源码分析之整体架构
阅读一个开源框架，目的无非想学习设计的思想以及实现的方式。
为什么要分析整体框架？
理清整体架构有助于接下来源码的阅读，源码脉络清晰了，接下来的细节也就娓娓道来了。
事不宜迟，下面看看jQuery的整体架构
整体架构
jQuery 框架的核心其实就是对html元素的查找匹配并且进行dom操作。
etc
$().find().css()
$().show().hide()
以上我们可以发现两个细节。
- jQuery对象的创建方式
- jQuery方法的调用方式
特点一: jQuery的无new构建
jQuery并非像大多数对象通过new的构建
大多数的对象创建可能如下:
var ajquery = function() {
// 构造函数
}
ajquery.prototype = {
// 原型
say: function() {
console.log('i am saying');
},
sing: function() {
console.log('i am singing');
}
}
var aobj = new ajquery();
aobj.say();
但是毫无疑问，jQuery并不是这样玩的，
var ajquery = function(selector, context) {
// 构建
return new ajquery.prototype.init(selector, context);
}
ajquery.fn = ajquery.prototype = {
// 原型
init: function(selector, context) {
this.selector = selector;
this.context = context;
return this;
},
say: function() {
console.log('i am saying');
},
singing: function() {
console.log('i am singing');
}
}
ajquery.prototype.init.prototype = ajquery.prototype;
特点二：DOM链式调用
作用有二:
- 节省js代码
- 所返回的都是同一个对象，可以提高代码的效率
etc
var ajquery = function() {
return new ajquery.prototype.init();
}
ajquery.prototype ={
init: function() {
return this;
},
say: function() {
console.log('i am saying');
return this;
}
}
ajquery.prototype.init.prototype = ajquery.prototype;
ajquery().init().say()
特点三：jQuery 插件式接口
通过函数的形式去扩展函数，而不是直接修改jQuery的prototype，这样对于用户来说更加友好。
jQuery 允许用户添加自己的扩展属性，这个对外提供这个接口，叫做jQuery.fn.extend()来对对象增加方法。
etc
jquery.extend = jquery.fn.extend = function() {}
jQuery.extend 是对jQuery本身的属性和方法进行添加
jQuery.fn.extend 是对jQuery.fn的属性和方法的添加
总结：
- jQuery通过原型上的init方法进行构建
- 通过prototype指针的指向，让init创建的对象重新指向jQuery类的原型
- 这样构建出来的对象就继承了jQuery上面的所有的属性以及方法了