模块化开发

Posted 2021-02-01 hsong

前端模块规范有三种：CommonJs,AMD和CMD。

• CommonJs用在服务器端，AMD和CMD用在浏览器环境
• AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
• CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
• AMD:提前执行（异步加载：依赖先执行）+延迟执行
• CMD:延迟执行（运行到需加载，根据顺序执行）

CommonJS

• 根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

  AMD

• AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。由于不是javascript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出
• 它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

• RequireJS主要解决两个问题

• 多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器

• js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

  CMD

module.exports | exports | export | export default的区别

1. 首先上是用法上的不同
   module.exports和exports的用法是后面加一个等号，再接具体的导出

module.exports=...
exports=...

export ...
export default ...

1. exports其实是module.exports的引用
   在nodejs中，每一个js文件都被看成是一个模块，所以，nodejs会为每一个js文件生成一个module对象，这个module对象会有一个exports属性，并且这个exports属性是一个空对象，即

module={
    exports:{}
}

同时还有一个exports对象，引用的是module的exports属性，

exports=module.exports

1. export和exports的区别
   这两个看起来很容易混淆，因为实在太像了。但是二者是完全不同的概念。

export是es6引入的语法，用于导出模块中的变量，对象，函数，类。对应的导入关键字是import。
exports是一个对象，不是语法。具体的含义在第二点已经说明。

1. export和export default的区别
   export和export default都是es6的导出语法。
   二者的区别有以下几点：

• export default在一个模块中只能有一个，当然也可以没有。export在一个模块中可以有多个。
• export default的对象、变量、函数、类，可以没有名字。export的必须有名字。
• export default对应的import和export有所区别

// 比如
// test.js
export default const a = 1;
export const a = 1;
对应的import分别是
// import a from ‘test‘
import {a} from ‘test‘
export对应的import必须加上{}

// import时取别名的区别
// 二者都可以在import的时候取别名。但格式不同。 
// 比如把导入的a取名为b
// export default对应的取别名方式
import b from ‘test‘
// export对应的取别名方式
import {a as b} from ‘test‘

export与export default

1. export与export default均可用于导出常量、函数、文件、模块等
2. 你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
3. 在一个文件或模块中，export、import可以有多个，export default仅有一个
4. 通过export方式导出，在导入时要加{ }，export default则不需要