模块化进化史

• 模块化进化史
  • 模块带来的产物=>tree-shaking
  • 简介-问题
  • 全局function
  • 命名空间
  • IIFE模式-匿名函数自执行
  • 通过IIFE进行简单演化，使得一个模块只做一件事情
  • 模块化规范
    • CommonJS
      • 实现
    • ES6模块
      • 规范
        • 常规暴露
        • 默认暴露
      • 实现

模块带来的产物=>tree-shaking

简介-问题

• 模块化的出现是因为，前端开发遇到了问题，正是这些问题导致了技术的迭代和进步

1. 一个页面需要引入多个js文件
2. 问题：
   1. 请求过多
   2. 依赖模糊
   3. 难以维护
3. 这些问题可以通过现代化编码和项目构建来解决

实际问题

1. 首先：我们要依赖多个模块，那样就会发送多个请求，导致请求过多
2. 然后：就是依赖关系模糊，我们不知道他们的具体依赖关系是什么，也就是说很容易因为依赖关系混乱导致程序崩溃
3. 以上的现象就是导致了这样会很难维护。很可能出现牵一发而动全身的情况，导致项目出现严重的问题

全局function

全局函数模式：将不同的功能封装成不同的全局函数

var name = '怪诞咖啡';

function getName(){
    console.log(name);
}

• 缺点1：会被修改掉name=x
• 缺点2：容易命名冲突

命名空间

• namespace模式：简单对象封装

var obj = {
    name:'怪诞咖啡',
    getName(){
        console.log(this.name);
    }
};

• 缺点1：会被修改掉obj.name
• 缺点2：容易命名冲突

IIFE模式-匿名函数自执行

• IFEE模式：匿名函数自调用（闭包）

(function(w){
    let name = '怪诞咖啡';
    function getName(){
        console.log(name);
    }
    w.module = {
        getName:getName
    };
})(window);

通过IIFE进行简单演化，使得一个模块只做一件事情

• IIFE模式增强：引入依赖
• 这就是现代模块实现的基石

(function(w){
    let name = '怪诞咖啡';
    function getName(){
        console.log(name);
    }
    w.getName = getName;
})(window);

模块化规范

CommonJS：node就是基于此，进行模块化开发的
AMD
CMD：只了解，阿里人写的，适用范围不广；卖给了国外，很可能某一天就不能用了
es6

CommonJS

• 每个文件都可当做一个模块
• 在服务器端：模块的加载是运行时同步加载的
• 在浏览器端：模块需要提前编译打包处理

问题

• 浏览器中使用：会增长白屏时间
• 并且，require浏览器不支持，需要提前编译打包处理

基本语法

暴露模块

module.exports = value;
export.xxx = value;

• 问题：暴露的模块到底是什么？

本质是exports
exports最初是一个空变量，我们就行暴露，实际就是把要提供的功能，赋值给exports变量

引入模块

require(xxx);

• 第三方模块：xxx为模块名
• 自定义模块：xxx为模块文件路径

实现

服务器端实现

• Node.js

浏览器端实现

• Browserify
• 也称为CommonJS的浏览器端的打包工具

ES6模块

规范

• 依赖模块需要编译打包处理

语法

• 导出模块：export
• 引入模块：import

常规暴露

使用-分别暴露

export var age = 1;
export var job = 2;

使用-统一暴露

var age = 1;
var job = 2;
export {age,job}

默认暴露

• 可以暴露任意数据类型，暴露什么数据接收到的就是什么数据

实现

• Babel