一、远古时期

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

• 知识点
• <script>是js中访问其它文件的唯一途径：本地的，src
• 静态<script>是同步加载，然后再，顺序执行：保证了执行依赖
• 动态<script>是异步加载,但执行无序。此时，
  依赖关系：通过script的onload的回调去加载其它script
  执行：异步执行，通过onload回调执行回调函数

• 思路：
• 即通过，<script>脚本的加载，来实现 "模块化加载"

• 缺点：
• 静态script会阻塞页面渲染，动态script要手动控制依赖关系及执行
• 会污染全局(自执行函数可以优化)；较多script时，可能会同名变量。
• 依赖关系不明确；不明确某script需要依赖什么

二、AMD和CMD规范

这边介绍require.js的实现原理

• 原理
• 采用动态script：相对于静态script，需要控制依赖关系及执行，但避免了阻塞及按需加载
• 依赖关系：进行了封装。
• 执行：进行了封装。
• 不污染全局：采用命名空间
• 依赖关系明确

1、首先，引入require.js及标明依赖入口

 <script data-main="main.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
 <!--data-main：标明入口，在其script加载及执行完后会执行main.js-->

2、定义模块

define([module1,module2],function () {//这里也可以定义，定义这个模块需要的依赖
    //加载模块的思路：动态script，包装顺序，就是利用回调
    return {};
  });

3、引入模块

//main.js
require.config({
       baseUrl: "/",
    　　paths: {}
});

require(['jquery','one'], function (res1,res2) {//这里定义：依赖jquery及one，都加载完之后，执行回调函数
//res1,res2分别代表'jquery'和'one'的返回值
});

4、总结

• require.js其实，就是利用动态script及一些列封装，来实现模块化加载

---

• 优点：

• 模块化初具雏形

• 特定：

• 异步加载，回调执行
• AMD推崇依赖前置、CMD推崇就近依赖

三、commonJs规范：如Node

• 特点：同步加载
• 导出：module.exports 或 exports
• 导入：require

1、定义模块

...
module.exports={};//或exports.xx=...;

2、引入模块

let a=require('...');

四、Es6规范：

• 特点：结合Node及commonJs优点
• 优点：词法分析+静态Node+动态script+现代版(promise,解析结构等等)
• 导出：export
• 导入：import

五、对比总结

对比项	Node	es6
时机	运行加载	静态加载(编译词法分析时加载)
采集(可以多次)	exports	export
采集风格	exports.xx=... module.exports={a,b} 导出一个对象：module.exports	export {a,b} export let a=3 export default a 导出两个对象：匿名采集器容器，及default对象
导入方式	导入是浅拷贝 基本类型不会同步 对象会同步	导入是赋值 所有都会同步
导入对象个数	一个 module.exports	两个 匿名采集器容器 default