javascript模块规范：CommonJS，AMD，CMD

Posted 2020-07-03

CommonJS/Nodejs实现

• Node.js上下文提供的变量
  • require：函数，用于引用依赖模块，依赖模块被引用为对象，即可食用提供的方法和变量，require()接受一个模块标识参数。
  • module：对象，代表当前模块本身
  • exports：对象，module的属性，作为模块的唯一出口，用来导出当前模块提供的方法和变量，将方法或变量挂载为exports对象的属性即可导出，也可以直接将方法或变量赋给module.exports导出
    “`javascript
    //挂载方式导出方法和变量
    exports.fun1=function(){
    …
    }
    var a = “”;
    exports.a=a;
    //直接赋值导出，不能直接给exports赋值！！！
    function fun2(){
    }
    module.exports=fun2;

1. - _filename：当前模块的文件名
2. - _dirname：当前模块所在目录名
3. -模块标识格式
4. 1符合小驼峰命名的字符串||以.、..开头的相对路径||绝对路径
5. 2可以没有文件名后缀
6. -模块类型
7. -.js
8. -.node
9. -.json
10. -包结构
11. -package.json；json格式文件，包描述文件
12. - bin：目录，存放可执行二进制文件
13. - lib：目录，存放Javascript代码
14. - doc：目录，存放文档
15. - test：目录：存放测试用例
17. ### AMD/require.js实现
18. [AMD文档](https://github.com/amdjs/amdjs-api/wiki/AMD "AMD文档")
19. -模块定义，使用require.js提供的全局函数define定义模块，define()接受三个参数
20. ```javascript
21. define(id?,dependences?,factory);

• id，可选，
• dependences，可选，字符串数组（可以只有一个元素），当前模块依赖的所有模块
• factory，必须，函数，提供了独立的作用域，用于定义模块提供的方法和变量，当前模块存在依赖模块时，依赖模块作为factory的参数传入

1. define(function(){
2. var exports ={};//需要定义模块入口变量
3. exports.fun1=function(){
4. ...
5. }
6. return exports;//需要将模块入口作为返回值
7. });
8. define([‘myLib‘],function(myLib){
9. function foo(){
10. myLib.doSomething();
11. }
12. return{
13. foo : foo
14. };
15. });

• 模块加载，在非模块代码中加载模块，使用require.js提供的全局函数require将模块加载为回调函数的参数，require接受两个参数
  • modules，字符串数组，要加载的模块标识，必要时需对模块标识设置加载路径
    “`javascript
    //设置加载路径，相对于当前模块所在目录
    require.config({
    paths: {
    “jquery”: “lib/jquery.min”,
    “underscore”: “lib/underscore.min”,
    “backbone”: “lib/backbone.min”
    }
    });
    //设置模块加载根目录
    require.config({
    baseUrl: “js/lib”,
    paths: {
    “jquery”: “jquery.min”,
    “underscore”: “underscore.min”,
    “backbone”: “backbone.min”
    }
    });

1. - callback，回调函数，加载模块后执行，参数即为加载的模块对象
3. ### CMD/seajs实现
4. [CMD文档](https://github.com/cmdjs/specification/blob/master/draft/module.md "CMD文档")
5. -模块定义，使用sea.js提供的全局函数define定义模块，define()接受一个参数factory，factory有三种情况
6. -函数：模块构造函数，默认有三个参数，require，exports，module，以形参的形式将上下文提供的变量引入当前模块的作用域供调用，还可以自己定义其他参数
7. ```javascript
8. //变量和方法的挂载同commonJS，不能直接为exports赋值，因为exports是momule.exports的引用，改变exports的值不改变对象内容
9. define(function(require, exports, module) {
10. ...
11. });

• 对象：
  “`javascript
  define({foo:”bar”});

1. -字符串：可以用来定义字符串模板
2. ```javascript
3. define(‘I am a template. My name is {{name}}.‘);

• 模块加载
  • require()，同步加载，接受模块标识作为唯一参数，将模块加载为对象
  • require.async()，异步加载，接受模块标识和回调函数，模块加载成功后执行回调函数

前后端模块

javascript没有编译的过程，模块加载都是在代码执行过程中进行的，javascript模块都是独立的文件，，模块加载意味着需要读取文件
后端模块（nodejs）的加载默认采用同步加载，由于加载的文件都是在本地，而且nodejs提供了模块缓存机制，因此同步加载对性能影响不大
前端模块的加载需要进行网络请求，速度远不如加载本地文件，而且如果采用同步加载，且模块加载在UI初始化之前进行，则会对用户体验造成较大影响
从 CommonJS 到 Sea.js