模块化（AMD、CMD、CommonJS、ES6）

1,CommonJS

服务器，同步加载模块,加载机制是:输出拷贝

模块导出：module.exports

导入模块：require

2,AMD(异步模块定义)

用于浏览器,防止js加载阻塞页面渲染，异步的模块加载机制,

推崇依赖前置,提前执行.即使没有用到的模块,也提前加载,

require.config()定义模块路径,使用require加载模块,define()定义依赖模块

3,CMD(通用模块定义) 

用于浏览器,防止js加载阻塞页面渲染，异步的模块加载机制,

推崇依赖就近,延迟执行(在需要使用的时候，才引入)

define定义模块，seajs.config()全局配置模块路径，seajs.use()加载模块

4,ES6成 为浏览器和服务器通用的模块解决方案。

export规范对外的接口,import引用其他的模块功能

import命令在编译时引用模块,而不是在运行时

ES5的浏览器加载规则

1.defer和async

defer是渲染完再执行（顺序）,async是下载完就执行

因为async无法保证加载顺序,所以前后的多脚本,要保证并无依赖关系

ES6的浏览器加载

使用<script>标签,但是要加入type='module'属性

异步加载,页面渲染完,再执行,类似defer属性.

如果网页有多个<script type='module'>,它们会按照在页面出现的顺序依次执行

ES6引入外部模块注意事项

(1) 代码是在模块作用域之中运行,而不是全局作用域运行

(2) 模块内部的顶层变量,外部不可见

(3) 模块脚本自动采取严格模式,不管是否有声明use strict

(4) 模块之中,可以使用import命令来加载其他模块,也可以使用export命令输出对外接口

(5) 模块之中,顶层的this指向,返回undefined,而不是window

(6)同一个模块如果加载多次,将只执行一次

5,AMD,CMD,CommonJS,ES6 Module区别

1.AMD,CMD对比

1.相同点

(1) 都是异步加载模块

(2) 都实现了浏览器端模块化开发的目的

(3) 都倡导模块化开发理念,使前端模块化开发变得简单自然

(4) 解决前端开发过程中两大问题

    文件之间依赖问题

    浏览器加载多个JS时,页面失去响应的时间过长

2.不同点

(1) 官方推荐的写法不同,AMD推崇依赖前置,CMD推崇依赖就近

(2) 模块的执行时机不同,AMD是提前执行,CMD是延迟执行(按需加载)

1. api的设计不同,AMD的API默认是一个当多个用,CMD的API严格区分,推崇职责单一

2.AMD,CMD与CommonJs与ES6 Module对比

不同点

(1) AMD,CMD都是用于浏览器的模块化,

(2) CommonJS是服务端的模块化,

(3) ES6的模块化浏览器和服务端通用

(4) AMD代表require.js,CMD代表sea.js,CommonJS代表node.js

(5) AMD和CMD都是异步加载,而CommonJS是同步加载