兼容多种模块规范(AMD,CMD,Node)的代码

前言

昨天，公司同事问了我如下一个问题：

说他在看一个插件时，看到了源码结构如截图所示，他知道(function(){})()是一种立即执行函数，但是在截图中，最后的那个圆括号里又写了一个函数function($,ChineseDistricts){...}，这个函数暂且称为“匿名函数1”，function (factory){...}暂且称为“”匿名函数2”，意思是不是：把匿名函数1传入到匿名函数2的参数factory中，然后检测当前环境。如果检测到了全局环境中存在exports对象，则证明是node环境，如果是node环境，则用factory(require('jquery'), require('ChineseDistricts'))这个方法来执行匿名函数1，因为Node是基于模块的，所以在Node中要使用这个插件的话，必须用require()方法把匿名函数2中需要的参数"$"和"ChineseDistricts"以模块的方式给引用进来？

看到截图的代码和它的疑问，请接着往下看......

一、兼容多种模块规范(AMD,CMD,Node)的代码

在JavaScript模块化开发中，为了让同一个模块可以运行在前后端，以及兼容多种模块规范(AMD,CMD,Node)，类库开发者需要将类库代码包装在一个闭包内。

1.AMD规范

AMD，即“异步模块定义”。主要实现比如： RequireJS。

其模块引用方式如下：define(id?,dependencies?,factory);

其中，id及依赖是可选的。其与CommonJS方式相似的地方在于factory的内容就是实际代码的内容，下面是一个简单的例子：

define(function(){
  var exports = {};
  exports.say = function(){
    alert('hello');
  };
  return exports;
});

2.CMD规范

CMD规范，与AMD类似，区别主要在于定义模块和依赖引入的地方。主要实现比如： SeaJS。

主要区别是：AMD需要在声明模块时指定所有的依赖，通过形参传递依赖到模块内容中。

define(['dep1','dep2'],function(dep1,dep2){
  return function(){};
});

与AMD相比，CMD更接近Node对CommonJS规范的定义：

define(factory);

在依赖部分，CMD支持动态引入，如下：

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

require、exports、module通过形参传递给模块，在需要依赖模块时，随时调用require引入即可。

3.CommonJS的模块实现

CommonJS的模块引用使用require，如下：

var http = require('http');

4.Node的模块实现

在Node中引入模块，需要经过下面3个步骤：路径分析；文件定位；编译执行。主要用require()方法来查找模块。

5.兼容多种模块规范

为了让同一个模块可以运行在前后端，在开发过程中需要考虑兼容前后端问题，以下代码演示如何将hello()方法定义到不同的运行环境中，它能够兼容AMD、CMD、Node以及常见的浏览器环境中：

;(function (name, definition) {
  // 检测上下文环境是否为AMD或CMD
  var hasDefine = typeof define === 'function',
    // 检查上下文环境是否为Node
    hasExports = typeof module !== 'undefined' && module.exports;
 
  if (hasDefine) {
    // AMD环境或CMD环境
    define(definition);
  } else if (hasExports) {
    // 定义为普通Node模块
    module.exports = definition();
  } else {
    // 将模块的执行结果挂在window变量中，在浏览器中this指向window对象
    this[name] = definition();
  }
})('hello', function () {
  var hello = function () {};
  return hello;
});

二、如何封装Node.js和前端通用的模块

在Node.js中对模块载入和执行进行了包装，使得模块文件中的变量在一个闭包中，不会污染全局变量，和他人冲突。

前端模块通常是我们开发人员为了避免和他人冲突才把模块代码放置在一个闭包中。

如何封装Node.js和前端通用的模块，我们可以参考Underscore.js 实现，他就是一个Node.js和前端通用的功能函数模块，查看代码：

// Create a safe reference to the Underscore object for use below.
  var _ = function(obj) {
    if (obj instanceof _) return obj;
    if (!(this instanceof _)) return new _(obj);
    this._wrapped = obj;
  };
 
  // Export the Underscore object for **Node.js**, with
  // backwards-compatibility for the old `require()` API. If we're in
  // the browser, add `_` as a global object via a string identifier,
  // for Closure Compiler "advanced" mode.
  if (typeof exports !== 'undefined') {
    if (typeof module !== 'undefined' && module.exports) {
      exports = module.exports = _;
    }
    exports._ = _;
  } else {
    root._ = _;
  }

通过判断exports是否存在来决定将局部变量 _ 赋值给exports，向后兼容旧的require() API，如果在浏览器中，通过一个字符串标识符“_”作为一个全局对象；完整的闭包如下：

(function() {
 
  // Baseline setup
  // --------------
 
  // Establish the root object, `window` in the browser, or `exports` on the server.
  var root = this;
 
  // Create a safe reference to the Underscore object for use below.
  var _ = function(obj) {
    if (obj instanceof _) return obj;
    if (!(this instanceof _)) return new _(obj);
    this._wrapped = obj;
  };
 
  // Export the Underscore object for **Node.js**, with
  // backwards-compatibility for the old `require()` API. If we're in
  // the browser, add `_` as a global object via a string identifier,
  // for Closure Compiler "advanced" mode.
  if (typeof exports !== 'undefined') {
    if (typeof module !== 'undefined' && module.exports) {
      exports = module.exports = _;
    }
    exports._ = _;
  } else {
    root._ = _;
  }
}).call(this);

通过function定义构建了一个闭包，call(this)是将function在this对象下调用，以避免内部变量污染到全局作用域。浏览器中，this指向的是全局对象（window对象），将“_”变量赋在全局对象上“root._”，以供外部调用。

和Underscore.js 类似的Lo-Dash，也是使用了类似的方案，只是兼容了AMD模块载入的兼容：

;(function() {
 
  /** Used as a safe reference for `undefined` in pre ES5 environments */
  var undefined;
    /** Used to determine if values are of the language type Object */
      var objectTypes = {
        'boolean': false,
        'function': true,
        'object': true,
        'number': false,
        'string': false,
        'undefined': false
      };
  /** Used as a reference to the global object */
  var root = (objectTypes[typeof window] && window) || this;
 
  /** Detect free variable `exports` */
  var freeExports = objectTypes[typeof exports] && exports && !exports.nodeType && exports;
 
  /** Detect free variable `module` */
  var freeModule = objectTypes[typeof module] && module && !module.nodeType && module;
 
  /** Detect the popular CommonJS extension `module.exports` */
  var moduleExports = freeModule && freeModule.exports === freeExports && freeExports;
 
/*--------------------------------------------------------------------------*/
 
  // expose Lo-Dash
  var _ = runInContext();
 
  // some AMD build optimizers, like r.js, check for condition patterns like the following:
  if (typeof define == 'function' && typeof define.amd == 'object' && define.amd) {
    // Expose Lo-Dash to the global object even when an AMD loader is present in
    // case Lo-Dash was injected by a third-party script and not intended to be
    // loaded as a module. The global assignment can be reverted in the Lo-Dash
    // module by its `noConflict()` method.
    root._ = _;
 
    // define as an anonymous module so, through path mapping, it can be
    // referenced as the "underscore" module
    define(function() {
      return _;
    });
  }
  // check for `exports` after `define` in case a build optimizer adds an `exports` object
  else if (freeExports && freeModule) {
    // in Node.js or RingoJS
    if (moduleExports) {
      (freeModule.exports = _)._ = _;
    }
    // in Narwhal or Rhino -require
    else {
      freeExports._ = _;
    }
  }
  else {
    // in a browser or Rhino
    root._ = _;
  }
}.call(this));

再来看看Moment.js的封装闭包主要代码：

(function (undefined) {
    var moment；
    // check for nodeJS
    var hasModule = (typeof module !== 'undefined' && module.exports)；
/************************************
        Exposing Moment
    ************************************/
 
    function makeGlobal(deprecate) {
        var warned = false, local_moment = moment;
        /*global ender:false */
        if (typeof ender !== 'undefined') {
            return;
        }
        // here, `this` means `window` in the browser, or `global` on the server
        // add `moment` as a global object via a string identifier,
        // for Closure Compiler "advanced" mode
        if (deprecate) {
            this.moment = function () {
                if (!warned && console && console.warn) {
                    warned = true;
                    console.warn(
                            "Accessing Moment through the global scope is " +
                            "deprecated, and will be removed in an upcoming " +
                            "release.");
                }
                return local_moment.apply(null, arguments);
            };
        } else {
            this['moment'] = moment;
        }
    }
 
    // CommonJS module is defined
    if (hasModule) {
        module.exports = moment;
        makeGlobal(true);
    } else if (typeof define === "function" && define.amd) {
        define("moment", function (require, exports, module) {
            if (module.config().noGlobal !== true) {
                // If user provided noGlobal, he is aware of global
                makeGlobal(module.config().noGlobal === undefined);
            }
 
            return moment;
        });
    } else {
        makeGlobal();
    }
}).call(this);

从上面的几个例子可以看出，在封装Node.js和前端通用的模块时，可以使用以下逻辑：

if (typeof exports !== "undefined") {
    exports.** = **;
} else {
    this.** = **;
}

即，如果exports对象存在，则将局部变量装载在exports对象上，如果不存在，则装载在全局对象上。如果加上ADM规范的兼容性，那么多加一句判断：

if (typeof define === "function" && define.amd){}

参考链接：
1.http://www.css88.com/archives...
2.http://www.css88.com/archives...