模块化之CMD-CSDN博客

本文链接：https://blog.csdn.net/iteye_2245/article/details/82413586

前面介绍了一下AMD相关的东西，这篇我们来看看CMD相关的。

CMD ------- Common Module Definition

在CMD规范里面，一个模块就是一个Javascript文件。代码书写格式如下：

define(factory);

define是全局函数，来定义模块
仅接收一个factory参数，可以是函数，对象，字符串等类型

1、 factory为对象、字符串等非函数类型时候，表示模块的接口是该对象、字符串等值

define({
    "foo":"bar"
});

通过字符串定义模版模块

define('I am a template.My name is {{name}}.');

2、 factory为函数时候，表示模块的构造方法。

执行该方法， 可以得到模块向外提供的接口。默认 3个参数：require 、 exports 、 module

define(function(require,exports,module){
    //...
});

require

--------- 是 一个方法，用来 获取其他模块提供的接口。

define(function(require){
     var a = require('./a');
     a.doSomething;
});

require接受 模块标识作为唯一参数，模块标识书写需要 遵循一些规范。

require.async

---------- 可以用来 异步加载模块，并在 加载完成后执行指定的回调。

define(function(require,exports,module){
     //异步加载b  
     require.async('./b',function(b){
          b.doSomething;
    });

    //异步加载多个模块
    require.async(['./c','./d'],function(c,d){
         //
         ........
    })

});

require.resolve

--------- 使用 模块系统内部的路径解析机制来返回模块的路径。该函数 不会加载模块，只 返回解析后的绝对路径。

define(function(require,exports){
     console.log(require.resolve('./b'));
     //../b.js
});

require.cache

---------- 可以 查看模块系统加载过的所有模块。

某些情况下，需要重新加载某个模块，可以得到该模块的url，然后通过 delete require.cache[url] 来将其信息删除。

exports

-------- 是一个对象，用来 向外提供模块接口。

define(function(require,exports){
      exports.foo = "bar";
      exports.doSomething = function(){
          ...............
      }
});

除了给 exports对象增加成员，还可以以return的方式直接向外提供接口。

define(function(require,exports,module){
      return {
          fool: "bar",
          doSomething:function(){
               .............
          }
     };
});

当然如果只是返回一个对象，可以直接：

define({
     foo: "bar",
     doSomething:function(){}
});

注释：在factory里面给exports重新赋值是没有意义的，因为exports仅仅是module.exports的一个引用，直接给exports重新赋值并不会修改module.exports的值。

看下面这个 错误的例子：

define(function(require,exports,module){
      exports = {
           foo: "bar",
           doSomething:function(){}
      }
});

正确的应该是：

define(function(require,exports,module){
     module.exports = {
            foo: "bar",
           doSomething:function(){}
     }
});

module

module 是一个对象，存储了与当前模块关联的一些属性和方法。

module.id

---------- 模块标识

define(function(require,exports,module){
    console.log(require(module.id) === exports);    // true
});

module.uri

------------ 根据模块系统的路径解析规则得到的模块 绝对路径

module.dependencies

------------ 是一个数组，标识当前模块的依赖列表

module.parent

------------ 指向 初始化调用当前模块的模块。可以得到模块初始化的callstack

module.factory

------------ 指向define(factory)中的factory参数

module.status

------------ 当前模块的状态，是一个数值

module.exports

------------ 当前模块对外提供的接口

传给factory构造方法的exports参数是module.exports对象的一个引用。

比如当模块的接口是某一个类的实例时候，需要通过module.exports来实现

define(function(require,exports,module){
     console.log(module.exports === exports);   // true
     module.exports = new SomeClass();
     console.log(module.exports === exports);  //false
});