模块化

前端模块化详解(完整版)JS 模块规范：AMD、UMD、CMD、commonJS、ES6 module

什么是模块化？解决了什么问题？

1. 文件隔离
2. 暴露变量与函数

早期办法

• 全局 function

  • 看不出关联依赖 污染全局

• 对象模式 定义一个变量 导出这个对象的变量与方法

  • 作用: 减少了全局变量，解决命名冲突 问题: 数据不安全(外部可以直接修改模块内部的数据)

• IIFE 模式：匿名函数自调用(闭包)

• IIFE 模式增强 : 引入依赖

模块化的规范

CommonJS

• 在服务器端，模块的加载是运行时同步加载的；在浏览器端，模块需要提前编译打包处理。

• 加载某个模块，其实是加载该模块的 module.exports 属性

• require 命令的基本功能是，读入并执行一个 JavaScript 文件，然后返回该模块的 exports 对象。如果没有发现指定模块，会报错。

• CommonJS 模块的加载机制是，输入的是被输出的值的拷贝。也就是说，一旦输出一个值，模块内部的变化就影响不到这个值

AMD

如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，因此浏览器端一般采用 AMD 规范

定义及使用引入 require.js

<script data-main="js/main" src="js/libs/require.js"></script>

CMD

CMD 规范专门用于浏览器端

sea.js

UMD

兼容 AMD 和 commonJS 规范的同时，还兼容全局引用的方式

ES6 模块化

ES6 模块与 CommonJS 模块的差异

1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。

2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。