为什么要使用模块化
- 解决命名冲突
- 实现依赖管理
- 避免污染全局变量
-可以实现代码的异步加载，提高页面性能 - 提高代码可读性
- 代码解耦，提高复用性
- 有利于团队分工
模块化规范
| 模块化规范 | 特点 | 应用 |
|---|---|---|
| CommonJS | 同步加载 | 服务器端 |
| AMD | 依赖前置 | 浏览器端 |
| CMD | 依赖延迟执行 | 浏览器端 |
CommonJS
CommonJS 是 node 采用的模块化规范，采用同步加载模块的方式，在服务器端是没问题的。
- 一个单独的文件就是一个模块，每个模块都是一个单独的作用域，在模块内部定义的变量，无法被其他模块读取，除非定义为 global 对象的属性
- 模块输出：模块只有一个出口，
module exports对象，把输出的内容放入该对象。模块内部的操作就好比打草稿纸，module exports就是把草稿的结果拿出来 - 加载模块：加载模块使用
require方法，该方法读取一个文件并执行，返回文件内部的module exports对象，如果请求的模块不能返回，那么require必须抛出一个错误
CommonJS 范例
/*
模块定义model.js
*/
var name = "cg"
function printName(){
console.log(name);
}
function sayHello(){
console.log("hello " + name);
}
module.exports = {
printName: printName
sayHello: sayHello
}
/*
加载模块
*/
var nameModule = require("./model.js")
nameModule.printName() //"cg"
nameModule.sayHello() //"hello cg"
AMD
Asynchronous Module Definition：是 RequireJS 在推广过程中对模块定义的规范化产出，主要用于浏览器端。特点是：依赖前置，需要在定义时就写好需要的依赖，提前执行依赖，应用有 require.js
//定义模块 myModule.js
define(["dependency"], function(){
var name = "cg"
function printName(){
console.log(name);
}
return {
printName:printName
}
})
//加载模块
require(['myModule'], function(my){
my.printName()
})
CMD
Common Module Definition：是 Sea.js 在推广过程中对模块定义的规范化产出，主要用于浏览器端，特点是：依赖延迟执行。依赖可以就近书写，等到需要用到这个依赖的时候，再引入这个依赖，应用有 sea.js
//定义模块 myModule.js
define(function(require, exports, module){
var $ = require("jquery.js")
$("div").addClass("active")
})
//加载模块
seajs.use(['myModule.js'], function(my){
})
模块化实战
效果
加载更多本地测试可行
r.js 打包压缩成一条js
image.png
