模块化
- Q 什么是模块化
- A将系统进行分割成独立模块的过程
- Q 模块化特点
- A 独立性，可复用
模块化类型
- 总共会有6种
立即执行函数
为了解决全局变量不安全问题，避免被随意访问，创建闭包，将变量约束到局部作用域内解决
var module = (function(){
var age = 20; var name = 'JavaScript'
var fn1 = function(){ console.log(name, age) };
var fn2 = function(a, b){ console.log(a + b) };
return { age, fn1, fn2, }; })();
module.age;
// 20 module.fn1();
// JavaScript 20 module.fn2(128, 64); // 192
commonjs
nodejs 规范
- 加载机制
- this指向
- tree-shaking 机制
- 导出值
function testModule() { console.log('exports'); } module.exports = testModule;
特点，同步导入，一个模块接着一个模块，值拷贝导出，导出的是副本，内部模块再次变换，不影响之前的导出
AMD
- amd 规范特点在于，异步导入，解决commonjs 同步导入的问题
- 具体使用，待补充 todo。。。
CMD
- CMD 最大的特点在于懒加载，只有在使用依赖时进行动态加载。
- 遵循就近依赖，不像AMD 前置依赖，提前列出所有依赖
为什么要有模块化
- 避免全局变量污染
- 逻辑复用
define(function(require, exports, module)
{ var add = require('math').add;
exports.increment =
function(val) { return add(val, 1); };
module.id = "increment"; });
以上核心区别概念
- 同步/异步加载 ：可以理解为阻塞加载，非阻塞加载
- 运行时/静态加载：是否为运行时才能明确加载模块
- 值/引用拷贝： 导入的值，在这一刻，拷贝了一份，和原有模块值独立，当调用改变模块值，导入值依然不变，反之则为引用拷贝
- 依赖是否前置
AMD 依赖提前声明好，才能使用对应依赖 CMD 运行时再声明依赖
require import
- require 引入时属于动态，同步导入，import 属于，静态，异步导入
- 因此前者不支持 treeshaking
treeshaking
- 属于静态分析，代码优化技术
- Q核心
- A 编译时期确定，静态加载
- Q 为什么非得要编译时确定
- A 运行时再去处理，会存在不确定性，无法判断代码是否可删除，并且类似webpack 是在编译期获取完整模块依赖图，运行时无法确定。
- Q;基本流程
- A 依赖esmodule 静态分析功能，编译器构建完整依赖图，对于未引用模块，进行标记，再通过删除插件，uglify 等，最后再去打包构建
