# 前端模块化 ## **AMD、CMD、ESM和CommonJS** https://www.cnblogs.com/chenwenhao/p/12153332.html - AMD/CMD/CommonJs 是js模块化开发的规范，对应的实现require.js/sea.js/Node.js - CommonJs-->服务端，AMD/CMD/ES Module--> 浏览器端 服务器端一般采用同步加载文件，等待它加载再执行。而浏览器端采用异步加载，提前将需要的模块文件并行加载好。 - AMD/CMD区别，都是并行加载js文件，AMD是预加载，在并行加载js文件同时，还会解析执行该模块（需要执行，所以在加载某个模块前，这个模块的依赖模块需要先加载完成）； CMD是懒加载，并行加载js文件，但是不会执行，而是在需要的时候才执行； - CommonJS 和 ES Module 区别：CommonJS 模块输出的是一个值的拷贝（运行时加载），ES6 模块输出的是值的引用（编译时加载）； - 如何使用？CommonJs --> NodeJS；AMD--> 通过`<script>`标签引入require.js，CMD--> sea.js ```js /** commonjs -- node **/ var $ = require('jquery'); // 依赖 function myFunc(){}; // 方法 module.exports = myFunc; // 暴露公共方法（一个） /** AMD写法 **/ define(["a", "b", "c", "d", "e", "f"], function(a, b, c, d, e, f) { a.doSomething(); // 等于在最前面声明并初始化了要用到的所有模块 if (false) { b.doSomething() } //即便没用到模块b，但b还是提前执行了 }); /** CMD写法---AMD推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行 **/ define(function(require, exports, module) { var a = require('./a'); //在需要时申明 a.doSomething(); if (false) { var b = require('./b'); b.doSomething(); } }); /** sea.js **/ define(function(require, exports, module) { // 定义模块 math.js var $ = require('jquery.js'); var add = function(a,b){ return a+b; } exports.add = add; }); // 加载模块 seajs.use(['math.js'], function(math){ var sum = math.add(1+2); }); ``` # **import和export** [链接](https://juejin.im/post/5a2e5f0851882575d42f5609) ES6标准中，JavaScript原生支持模块(module)了。这种将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用。 * importread-only特性：import的属性是只读的，不能赋值，类似于const的特性 * export/import提升：import/export必须位于模块顶级，不能位于作用域内；其次对于模块内的import/export会提升到模块顶部，这是在编译阶段完成的 export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口。 import用于在一个模块中加载另一个含有export接口的模块。 import和export命令只能在模块的顶部，不能在代码块之中。 ```javascript import Person from './example' //全部导入 import { name } from './example' //导入部分 import * as example from "./example.js" //将整个模块所有导出内容当做单一对象，用as起别名 console.log(example.name) console.log(example.getName()) export default App // 导出默认 export class User extend Component {}; // 部分导出 // 默认成员和具名成员同时导入 import obj, { name, age } from "./module.js" // obj 是对export default的引用, 花括号内是对具名导出的引用 ``` ## export和export default的作用、区别 **作用：** export和export default实现的功能相同，即：可用于导出（暴露）常量、函数、文件、模块等，以便其他文件调用。 **区别：** 1、export导出多个对象，export default只能导出一个对象 2、export导出对象需要用{ }，export default不需要{ }，如： export {A,B,C}; export default A; 3、在其他文件引用export default导出的对象时不一定使用导出时的名字。因为这种方式实际上是将该导出对象设置为默认导出对象，如： ~~~undefined 假设文件A、B在同级目录，实现文件B引入文件A的导出对象deObject： 文件A：export default deObject 文件B：import deObject from './A' 或者： import newDeObject from './A' ~~~