这是我参与8月更文挑战的第26天，活动详情查看：8月更文挑战
1.源码技巧解析
1.1 把一些很远作用域的变量作为参数传到函数中，来提升代码效率
eg:看似多此一举的 传window 操作
(function (window) {
})(window);
原因：节省作用域链查找时间，提升代码性能。
如果不传window，在函数中也是可以使用window的，但是在使用时会一直查找作用域链直到顶层。
当传入window后，参数会作为函数的局部变量。
1.2 关注变量的权限
eg: 在vue中，如果想让所有组件都拥有某个属性，那么会把这个属性定义在原型对象上。比如vue-router,但是这样做vue-router是可以修改的，会造成严重后果。
vue对于vue-router的做法：
//vue-router的例子
this.$router = {};
// 将$router属性挂载在router原型链上
Object.defineProperty(vue.prototype, "$router", {
//只设置get属性，返回_router源对象
get: function () {
return _router;
}
})
//通过defineProperty去给对象定义属性，若不设置set,这个属性将无法更改
启发：
- 关注变量的权限
- 当需要给对象设置一个不可更改的属性时，可以利用Object.defineProperty()
1.3 模块支持检测
-
模块化历史
- 民间--amd cmd umd
- es6--import
- node--commonjs
- < script >
由于规范版本不同会造成兼容问题，所以几乎在所有框架中都有模块支持检测（如vue和jquery），先判断当前用户是哪种模块化规范环境，就使用哪种规范暴露前端框架。所以在自己造轮子时要注意。
2.JS架构方案（3种）
源码的构建无非三种模式
- 工厂模式
- 构建庞大的类---建造者模式
- 前端特有---函数式
2.1 工厂模式
- 提供一个工厂方法
- 调用工厂方法，传入需要的
- 返回需要的对象
不用关心对象是怎么建造的，只需要和工厂方法要对象就好了。
应用场景：当你的需求需要频繁产出对象的时候。
eg:
// jquery的$符号
$('.dom')
// 我们只需要传入我们需要的dom对象，$就会把这个对象创建好并返回。我们不需要自己创建对象。
// jquery-》DOM时代，需要获取大量的DOM
//jquery的架构
(function () {
window.$ = jQuery;
})()
2.2 建造者模式
通过组合独立模块，来构建一个复杂的类。（new Vue）
应用场景：当你的需求需要一个复杂的类的时候。
2.3 前端特有---函数式编程（vue3）
适用于写大而全的功能性库,给所有用户使用。
函数式编程好处：
- 可扩展性和组合性更高
- ！！！方便tree-shaking(可以帮助我们删掉定义了却没有使用的方法和变量) vue jquery lodash
