前端模块化 (Require.js)

为什么要用 前端模块化

1 最开始的js就是为了实现客户端验证以及一些简单的效果

2 后来，js得到重视，应用越来越广泛，前端开发的复杂度越来越高（  早期，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载。 ）

3 旧版本的js中没有提供与模块（module）相关的内容

非模块化的写法有很大的缺点:

1.加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长   

2.由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面），依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。

为了解决这两个问题 ：

1.实现js文件的异步加载，避免网页失去响应；

2.管理模块之间的依赖性，便于代码的编写和维护。

模块的概念：

1.在js中，一个模块就是实现特定功能的文件（js文件）

2.遵循模块的机制，想要什么功能就加载什么模块

3.模块化开发需要遵循规范

模块化解决的问题:

1 命名冲突  2 文件依赖（加载文件）  3 模块的复用  4 统一规范和开发方式

JS实现模块化的规范:

1.AMD 浏览器端----requirejs

2.CommonJS nodejs---加载模块：require()        导出模块：module.exports = {} / exports = {}

3.ES6 中的 import / export

4.CMD 浏览器端---玉伯（阿里前端大神） -> seajs (目前京东还在用)

5.UMD 通用模块化规范，可以兼容 AMD、CommonJS、浏览器中没有模块化规范 等这些语法

AMD

Asynchronous Module Definition：异步模块定义，浏览器端模块开发的规范

代表：require.js

特点：模块被异步加载，模块加载不影响后面语句的运行

模块化的实现（require.js）

下载后，把它放在目录下面，就可以加载了

定义模块

引用模块

模块注意项

模块路径

建议单独创建一个config.js文件，把配置项写进去

可以在当前页面只引入当前页面的js文件

index.js中定义带有依赖项的模块，数组里面的值要和paths里面的值一样，function里的参数和代码中使用的值要一致