OMD: javascript模块化开发兼容CommonJS, AMD, CMD 以及 原生 JS

有更新，请到github上看源码

什么是OMD

在node.js流行起来以前，javascript的开发方式都是函数式的顺序依赖关系，直到node火起来。CommonJS其实首先提供了一个丰富的可扩展的库，在此基础上提供可应用的API，在这些API的基础上，逐渐造成一套规范，使得javascript的开发在这些规范的基础上进行。它的重要特征就是运行开发者模块化的开发javascript，提供一个模块，这个模块对外提供接口，有一个入口去调动全部的模块协同完成不一样的功能。node就是在此规范上创建起来的服务端框架。

node能够被认为是应用程序开发的一个案例，它是运行在服务器上的javascript。而是否能够在浏览器上面也遵循CommonJS规范呢？为了达到这个目的，requirejs火起来，与它对应的是AMD规范。实际上，AMD规范是CommonJS的一个兼容方案，requirejs但愿创建一个既知足应用程序，又知足浏览器运行的规范。AMD也逐渐被开发者接受，国外不少javascript发布产品，基本上都遵循或支持amd规范。

seajs是专一于浏览器的模块化javascript开发框架，和前二者不一样的是，它只专一于浏览器端，并且更优雅灵活，它所遵循的是CMD规范，其创始人为中国的前端大牛玉伯。自此，三家分立，各有裨益，javascript的模块化开发规范已经被创立完毕，之后就将其逐渐完善，并实现更多的应用。

在此基础上，有人试图实现兼容。也就是本身的代码既能在node上运行，也能在符合amd规范的代码环境中运行。因而产生了umd，其实umd并不算规范，而只能算一种兼容方案，它能够兼容CommonJS和AMD。但国内更多的实际上是使用seajs，包括淘宝、腾讯的部分产品，都是使用seajs框架，而react等的跑火，有理由相信，将来的前端开发必定是模块化趋势的。

就目前而言，为了能兼容commonjs amd cmd以及原生的javascript，我结合了前人的经验，发布了omd，它也不是什么规范，只是一套兼容方案罢了。

omd的目的，就是但愿开发javascript按照这个规则来完成代码，就能使它在模块化开发环境下能跑，在普通的javascript或jquery代码中也能跑。它就是一套兼容方案，目前兼容的有module.exports、amd、cmd以及原生支持。

OMD的源码

首先，我须要将源码放出来，全部的读者能够先简单的看下它的内容，大体了解它的运行规则。在github上follow这个项目，随时了解最新的一些变化。

OMD原理详解

在《javascript当即执行某个函数：插件中function(){}()再思考》一文中，我详细阐述了!function(fun){}(function($){});，所以这里就不详细阐述了。

兼容amd和cmd

if(typeof define == 'function' && (define.amd != undefined || define.cmd != undefined) {
  define(function() {
    return fun();
  });
}

上面这段代码，仅在amd或cmd规范下使用时才执行define。咱们这里把范围缩小到requirejs和sea.js。对于requirejs而言，define和define.amd是可见的，所以执行define(function(){});，一样的道理，seajs也会执行。可是做为两种不一样的规范，为什么能够以相同的代码返回呢？

在requirejs中，一个模块能够如此去定义：

define({});
define(factory);
define(id,dependencies,factor);
define(dependencies,factor)

在seajs中也差很少，可是也有不一样之处：

define({});
define(factory);
define(id,dependencies,factory);
define(id,factory);

前面三种都是同样的，可是细节上也有所不一样，第一种以对象的方式定义并不能解决咱们插件中接口传递的目的，所以不考虑。剩下的就只有两种相同的形式，可是就像前文说到的同样，OMD是为了实现兼容，也就是说它必须做为框架被应用，框架的基础代码具备稳定性，不能让用户改来改去，不然也就失去了规范的意义。而在剩下的两种中，define(id,dependencies,factory)的前两个变量，都须要本身去定义，所以，也被排除。最终也就只有define(factory)这种形式被咱们采用。

define(function(require,exports,module){
  var a = require('a');
});

这种代码形式在require.js和sea.js中均可以使用，但是在sea.js中，可使用exports.xxx = function(){}来提供接口，但是在require.js中，不得不采用return的形式，幸亏，在sea.js中，return也是有效的。因此，最终，咱们选择了return的形式向外提供接口：

define(function(){
    return {
        fun1 : function(a,b) {},
        fun2 : function(c,d) {}
    }; // return的结果为一个对象
});

在sea.js或require.js中：

define(function(){
    var $omd = require('omd');
    var fun1 = $omd.fun1(12,34);
});

这样，在omd.js中写的插件所提供的模块接口，就能够被使用了。

兼容comomjs

当define没有被定义的时候，说明跟sea.js和require.js没有任何关系了，这个时候，咱们要检查是否支持node.js。

若是是在node.js环境下运行，那么module和exports是一个由核心库提供的全局变量。所以，只须要将插件提供的接口赋值给module.exports，就完成了当前文件（模块）所提供的接口了。

兼容原生的javascript

当以上状况都不知足的状况下，实际上，你所提供的接口，就是一个函数。你提供了一个fun1的接口，你就能够在其余javascript代码中执行fun1()函数。

全局变量$和局部变量$

把$做为变量名，最大的好处是兼容jquery和zepto。在第一个function(factory){}中，我两次使用到了factory($)，在这里，$没有被事先声明过，所以用了一个if(typeof $ === 'undefined')作判断。可是若是当前环境下已经加载了jquery或zepto，$就是一个全局变量，实际上它是window.$。所以，在执行factory($)时，其实是把$做为参数传递给了factory()。

而在前面那篇关于当即执行函数的文章中我已经讲过了，在这里的factory()实际上就是第二个咱们要真正用来写插件代码的function($){}，要理解这一点，你必须读懂上面那篇文章。

在factory($)中，$若是表明jquery或zepto，那么它其实是一个全局变量。而到了function($)，$实际上成为函数的参数，成为一个局部变量。在function($){}中，虽然你可使用$('#div1')进行选择，但你要知道，这里的$并不是全局变量window.$，而是传递而来的,是它的引用。下文还会提到，要使用 var jQuery = $; 这样诡异的代码来处理某些状况。

factory($)返回值问题

在第一次使用factory($)时，return factory($)。第二次时，ex = factory($)。从值的返回角度讲，factory($)必然存在一个return。具体是什么意义呢？

factory($)的返回值，其实就是插件提供的对外接口，而实际上，就是一个对象Object。咱们能够在第一次return factory($);的时候，也先执行一次赋值操做：

define(function(){
    var ex = factory($);
    return ex;
});

前面已经讲过了，amd和cmd在define的function中return，其实是模块对外提供接口的一种方式，而这种方式，必须保证以对象的形式返回。所以，在插件代码中，你能够看到，我首先定义的是一个ex = {}，而后执行return ex;从而对外提供了接口。

而在node.js环境下，只须要将这个ex返回值赋予exports便可完成该模块的接口。在原生的JavaScript环境下，没有接口这种概念，对外提供的，则是函数或对象属性，将它赋予window对象，就至关于提供了一个全局函数或全局变量。

OMD开发规则

利用omd开发兼容各个规范的插件（模块）时，只须要在// 真正的插件代码都在这里这句注释后面撰写插件代码便可，无需像其余教程所示同样，写一个(function($){}(jQuery))，直接写插件内容便可。若是无需对外提供接口，则写完插件代码就能够完成开发。

关于var jQuery = $

在插件代码中，一些插件并无使用$，而是使用jQuery。可是前文已经提到了，在这个函数内部，jQuery是未定义的，$是传递过来的变量，所以，将$赋值给jQuery，则让jQuery从新有效。

若是须要对外提供接口，则在// 接口开始后面使用对象属性的方式，将接口赋值给ex。注意一点，ex返回后，你不能够经过接口改变插件内部的变量，这个接口是对外接口。

利用OMD开发的步骤

1.在开始开发插件以前，将omd.js的代码框架拷贝到你的项目（插件）文件中；

2.在注释中对应的位置开始撰写你的脚步代码

3.在注释中指出接口输出的位置处，经过ex.fun = function(){}的方式返回接口

4.完成代码写做以后，利用JavaScript压缩工具，净化和压缩你的Javascript代码

OMD使用要点

和sea.js不一样，require.js的全部模块都是异步加载，这意味着你不能按照以往的方式，经过先加载哪一个模块，而后加载另一个模块来肯定它们的依赖关系。不幸的是，全部的jquery插件都要依赖jquery库。所以，在require中须要解决好这个依赖问题。依赖的用法只有在define的参数中，前面已经提到了define的几种用法，咱们来看下具体的实现方法：

define(['jquery'],function($){
    require(['plugin.omd.js'],function($plugin){
        $('#test').plugin();
        $plugin.p('#test');
    });
});

上面的代码中，define(['jquery'])首先肯定了这个模块依赖于jquery，并将其返回接口以$做为变量。在这个基础上，再去require(omd.js)，则可让omd.js中的对jQuery的依赖能够实现，omd.js中才能够正常使用jquery。

不过，从require.js的设计上，模块之间都是异步加载的，若是按照上述方法解决依赖问题，性能上比sea.js要差不少。

我已经将这个代码放到github上，里面有demo，你能够看下plugin.js和main.js，来看看具体的用法。