← 返回文章列表

初探模块系统02—如何让模块支持AMD/CMD和commonjs标准

· 1 min read ·
Node.js 前端工程化

前段时间在看一些前端模块化方面的知识，现在自己就来写一个符合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
})
← 返回文章列表

# // CONTENTS