一、远古时期
<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=3export default a导出两个对象：匿名采集器容器，及default对象 |
导入方式 |
导入是浅拷贝基本类型不会同步 对象会同步 |
导入是赋值所有都会同步 |
导入对象个数 |
一个module.exports
|
两个匿名采集器容器default
|
