为什么要使用模块化？

前端模块化开发的价值 参考

最主要的目的：

• 解决命名冲突
• 依赖管理
• 在前端工程潮流下，模块化拥有更多的含义，包括组件化+多人合作

其他价值：

• 提高代码可读性
• 代码解耦，提高复用性

CMD、AMD、CommonJS 规范分别指什么？有哪些应用

CMD
Common Module Definition：是sea.js在推广过程中对模块定义的规范化产出，主要用于浏览器端。它主要特点是：对于依赖的模块是延迟执行，依赖可以就近书写，等到需要用这个依赖的时候再引入这个依赖，应用有sea.js

AMD
Asynchronous Module Definition：是 RequireJS 在推广过程中对模块定义的规范化产出，也是主要用于浏览器端。其特点是：依赖前置，需要在定义时就写好需要的依赖，提前执行依赖，应用有require.js

CommonJS
CommonJS规范是在服务器端模块的规范，是同步加载的。应用有node.js

1. 一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性
2. 模块输出： 模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象
3. 加载模块： 加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象

//模块定义 myModel.js
var name = 'Byron';

function printName(){
    console.log(name);
}
function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加载模块
var nameModule = require('./myModel.js');

nameModule.printName();

不同的实现对require时的路径有不同要求，一般情况可以省略js拓展名，可以使用相对路径，也可以使用绝对路径，甚至可以省略路径直接使用模块名（前提是该模块是系统内置模块）

r.js 如何压缩文件

安装r.js

npm install r.js

新建build.js文件

压缩

r.js -o build.js

使用 requirejs 增加如下功能：

1. 首屏大图为全屏轮播
2. 有回到顶部功能
3. 图片区使用瀑布流布局（图片高度不一），下部有加载更多按钮，点击加载更多会加载更多数据(数据在后端 mock)
4. 使用 r.js 打包应用

预览
代码地址

加载更多本地可以正常获取