如何让模块支持AMD/CMD和commonjs标准

前段时间在看一些前端模块化方面的知识,如今本身就来写一个符合amd/cmd 和commonjs标准的模块。在文中会穿插一些AMD/CMD,commonjs的基础知识,主要是为了让本身复习一下。了解的同窗们能够直接略过。前端

一 原模块

该模块是一个实现类数组转为数组功能的模块node

(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这个模块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
})
相关文章
相关标签/搜索