10-分析源码学架构
第十课 分析源码学架构¶
统计信息：字数 4671 阅读10分钟
https://study.163.com/course/courselive/1280302025.htm
如何看源码？分析 jquery 框架 express 框架（两个架构不同）
怎样看源码¶
不要一句一句看源码
先看架构+再找入口+按照流程读下去，看架构关键的部分
可以先缩放函数内部的细节（把函数内部折叠）
jquery 把 $ 挂载到window上面，window 入口函数，然后一步一步找（流程）
源码的特征¶
程序健壮性：一个函数前面是变量定义，条件判断（开始部分函数健壮性处理，if判断），后面的是函数后面的执行部分。
健壮性类似于容错性（方法错误使用下，不至于中断整个操作），有可能出错了，但是找不到问题出在哪里。
解决方法：判断参数的类型（typeof），否则抛出错误（异常）或者 try-catch 操作（后端文件操作，服务持久性）
try {
fs.readFile();
} catch(e) {
console.log(e);
}
模块化：模块调用模块。
模块化规范：amd cmd require import commonJS 的规范；不同的模块规范
典型架构¶
1、工厂模式¶
工厂模式：jquery zepto
新建一个工厂方法，使用者告诉工厂需要什么，工厂就提供给你要的对象
window.$ = function() {
return new jquery.fn.init();
// 这里没有直接返回 jquery 避免循环调用死循环
// JS 如何查找变量？作用域从内到外查找（如果直接给出window，那么不需要一层一层查找变量，这是性能问题）
}
暴露在window上面的是一个工厂，需要什么产品，那么从工厂中返回对应的实例；jquery
直接使用 $ 然后 源码中实现 new jquery.fn...
$ 好处
例子：jquery 源码分析
复杂功能分成多个模块，不同模块调用；
Extend 方法：不同参数情况不同，一个参数和两个参数的区别
共享公共变量模式（类似的结构中，可以把公共变量提出来）享元模式
连等思想（一个方法绑定到不同对象上，那么不同对象可以调用这个方法）
2、建造者模式¶
express VUE 2.0
new VUE() 直接创建实例
express 框架：建造者模式
node 框架（类似的还有webpack）main.js
Require 就是入口
function createApplication() {
var app = function(req, res, next) {
app.handle(req, res, next);
};
mixin(app, EventEmitter.prototype, false);
mixin(app, proto, false);
app.request = Object.create(req, {
app: {
configurable: true,
enumerable: true,
writable: true,
value: app,
}
});
app.response = Object.create(res, {
app: {
configurable: true,
enumerable: true,
writable: true,
value: app,
}
});
app.init();
return app;
}
工厂模式和建造者模式对立：工厂模式需要多次获取对象（需要快速获取）；建造者模式需要获取少数复杂的对象（需要传多个参数）；都是创建者模式。$ 频繁使用，那么使用工厂型。VUE 是单页面，那么使用创建者。
例如：如果大量的相同的简单的弹窗，工厂模式；轮播图，那么需要传参，很少，所以使用建造者模式。
多人写不同的模块；写好后混合进来（注入 mixin）建造者概念
如果直接在原型上写，会造成原型注入漏洞；
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = global || self, global.Vue = factory());
}(this, function() {
'use strict';
var emptyObject = Object.freeze({});
function isUndef(v) {
return v === undefined || v === null
}
...
}));
3、函数式¶
函数式：VUE3.0 lodash 很多 function
函数式优点：
- 组合大于继承：如果C继承于A和B的特性，继承比较麻烦；函数式直接调用方法（C调用AB的方法）
- tree-shaking（摇树）：我们引用2000个方法，但是我们只用了一个1个方法。使用webpack打包时候，那么可能打包2000个。最好是把1999个功能去掉，webpack 会按需加载（打包）tree-shaking 是基于 export 的文档流。jquery 会把全部的内容打包（内部的方法不能去掉）函数式可以输出很多小 exports 那么可以支持 tree-shaking 不需要的部分。很多 exports 的文档流。工厂模式和建造者模式无法生效。
例子：lodash是单独的函数
express 架构：把业务规划成不同的模块；不同的模块的通信关系（沟通组合，互相调用）；