模块化

为什么要使用模块化

• 解决命名冲突
• 实现依赖管理
• 避免污染全局变量
  -可以实现代码的异步加载，提高页面性能
• 提高代码可读性
• 代码解耦，提高复用性
• 有利于团队分工

模块化规范

模块化规范	特点	应用
CommonJS	同步加载	服务器端
AMD	依赖前置	浏览器端
CMD	依赖延迟执行	浏览器端

CommonJS

CommonJS 是 node 采用的模块化规范，采用同步加载模块的方式，在服务器端是没问题的。

1. 一个单独的文件就是一个模块，每个模块都是一个单独的作用域，在模块内部定义的变量，无法被其他模块读取，除非定义为 global 对象的属性
2. 模块输出：模块只有一个出口，module exports 对象，把输出的内容放入该对象。模块内部的操作就好比打草稿纸，module exports 就是把草稿的结果拿出来
3. 加载模块：加载模块使用 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