AMD_CMD_RequireJS

1： 为什么要使用模块化？

网页越来越复杂，js代码越来越多，在多人协作下如何管理代码？于是就有了模块化。

• 解决命名冲突；
• 方便依赖性管理；
• 提高代码的维护性和可读性；
• 代码解耦，提高代码复用性；

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

• AMD
  可以异步加载模块，并且会提前加载依赖。

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
   //模块代码
  return 模块名
});

有三个参数，分别是：本模块的名字、依赖模块数组、依赖模块传入使用。

• CommonJS
  使用require方法加载模块，通过module.exports来导出接口。Node.js采用这个规范。

//myModel.js
function printName(){
    console.log(name);
}
module.exports = { // 导出接口
    printName: printName,
}
//加载模块
var nameModule = require('./myModel.js');
nameModule.printName(); //myModel.js里的方法

加载模块是同步的，只有加载完成后才能执行后面的操作。

• CMD
  就近加载依赖。

define(function(require, exports, module) {
  // 模块代码
  });

• AMD与CMD的区别：
  AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块。
  CMD推崇就近依赖，只有在用到某个模块的时候再去require。

  //AMD  必须一开始就声明依赖模块
  define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
      //模块代码
   });

 //CMD
 define(function(require, exports, module) {
     // 模块代码
     //100行代码后，需要某个模块。
     var alpha = require('./alpha') //就近加载
   });

3.requirejs的使用

- www/
 - index.html
 - js/
     app/ 页面的js模块
      sub.js
   - lib/  第三方库 如jq
     jquery.js
    canvas.js
  - app.js 页面入口配置文件

在index.html中：

先加载require.js完成后，然后再加载app.js页面入口配置文件

requirejs.config({
   
    baseUrl: 'js/lib',  基本路径
 
    paths: {   路径缩写
        app: '../app'
    }
});
require(app/index.js)

详细的使用可以直接参考 requirejs文档，包括使用r.js打包压缩。

在r.js中，mian.js路径是相对于index.html，而build.js是相对于自己的位置，所以在写 baseUrl有所不同。

4： 使用 requirejs 完善入门任务15，包括如下功能：

Paste_Image.png

实战task15-2