如何讓模塊支持AMD/CMD和commonjs標準

前段時間在看一些前端模塊化方面的知識，如今本身就來寫一個符合amd／cmd 和commonjs標準的模塊。在文中會穿插一些AMD／CMD，commonjs的基礎知識，主要是爲了讓本身複習一下。瞭解的同窗們能夠直接略過。

一 原模塊

該模塊是一個實現類數組轉爲數組功能的模塊

(function(arrayLike){
  function arrayLikeObject2Array (arrayLike) {
    if (!Object.prototype.toString.call(arrayLike) === '[object Object]') {
      return
    } else {
      return Object.keys(arrayLike).map((key) => {
        return arrayLike[key]
      })
    }
  }
 return arrayLikeObject2Array
})(obj)

二 改形成AMD／CMD 模塊

要改形成AMD／CMD模塊，首先要了解這兩種模塊有哪些特色。AMD／CMD 都主要使用define來定義模塊，區別在於AMD是依賴前置，而CMD則是依賴就近。什麼意思呢？舉一個例子，假設AMD和CMD都須要引用Jquery這個模塊

//amd
 define('module1',[Jquery],function(Jquery){
    using Jquery do something
})
//cmd 
define(function(require,exports,modules){
//do something
var $ =require(Jquery)
//using jquery do something
})

如今咱們將原模塊打形成AMD/CMD標準，以下

(function(root,factory){
  if(typeof define === 'function'){
    define([],factory)
  }
})(this,function(){
    function arrayLikeObject2Array(arrayLike){
        if (!Object.prototype.toString.call(arrayLike) === '[object Object]') {
           return
        } else {
           return Object.keys(arrayLike).map((key) => {
           return arrayLike[key]
          })
        }
    }
    return arrayLikeObject2Array     
})

這樣，咱們的模塊已經支持了AMD/CMD標準。

三 改形成commonjs規範

commonjs模塊是nodejs遵循的標準。它加載模塊的方式是同步執行的。該規範通常用在服務器開發中。要把咱們的模塊改形成具備commonjs規範的模塊以下

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define([], factory)
  } else if (typeof exports === 'object') {
    module.exports = factory()
  } else {
    root.returnExports = factory() //若是沒有AMD/CMD和CommonJS就掛在全局對象下
  }
})(this, function () {
  function arrayLikeObject2Array (arrayLike) {
    if (!Object.prototype.toString.call(arrayLike) === '[object Object]') {
      return
    } else {
      return Object.keys(arrayLike).map((key) => {
        return arrayLike[key]
      })
    }
  }
  return arrayLikeObject2Array
})