模块加载标准

熟悉模块加载标准之后

1. 浏览器 html 文本插入非常多 script 标签时，异步加载这些标签，使页面响应速度变快。

2. 管理代码拆分，前端模块化/工程化，便于代码的编写和维护。

3. 更快的看懂一个新的项目。

目前最流行的三种模块加载标准是 Commonjs / AMD / CMD

CommonJs

commonjs 简单运用步骤

1.一个文件一个模块, 文件内定义一个函数a

2.把对象 { a : a } 赋值给 module.exports 暴露出去。

3.使用 let moduleA = require("libs/a") 来接收这个模块

4.moduleA.a() 来执行这个函数

5.commonjs 标准在浏览器端用不了

node 使用 commonjs 加载机制

AMD

浏览器是同步加载 js 的, 当大量的 script标签同步引入的时候会阻塞页面渲染

AMD 加载 js 的好处

1. 异步加载 script 标签, 减少页面失去响应的时间。

2. 实时添加时间戳, 防止开发过程中 js 加载后被缓存(无论怎么改代码都报错,需要强制清空浏览器缓存)。

3. 前端模块化, 便于编写和维护。

实现前端 AMD 方式加载 js 的前端插件是 require.js

以下是 require.js 的配置/自定义模块/以及使用的简单例子(以下例子纯属手打, 如果有错误, 无视就好)

// html中引用require.js以及配置