浅谈 UMD 模块化规范

回顾

浅谈 Commonjs 模块化规范
浅谈 AMD 模块化规范
浅谈 CMD 模块化规范

概述

所谓 UMD (Universal Module Definition),就是一种 javascript 通用模块定义规范,让模块能在 javascript 所有运行环境中发挥作用

一般 UMD 模块的实现

UMD 模块的实现需要一个 IIFE(立即执行函数),函数需要传入两个参数:其中一个是 this(对应形参 root),其值可能是 window 或者 global,视运行环境而定;另一个参数是一个工厂函数(对应形参 factory),它只负责返回你需要导出的内容(对象,函数,变量等)

(function(root, factory) {
  if (typeof module === 'object' && typeof module.exports === 'object') {
    // commonjs 模块规范,nodejs环境
    module.exports = factory()
  } else if (typeof define === 'function' && define.amd) {
    // AMD 模块规范,如 require.js
    define(factory())
  } else if (typeof define === 'function' && define.cmd) {
    // CMD 模块规范,如 sea.js')
    define(function(require, exports, module) {
      module.exports = factory()
    })
  } else {
    // 没有模块环境,直接挂载在全局对象上
    root.umdModule = factory()
  }
}(this, function() {
  return {
    name: '我是一个umd模块'
  }
}))

上面代码利用 IIFE(立即执行函数)去执行工厂函数,通过判断当前环境来对工厂函数的返回结果进行相应的处理,如果没有模块环境,就直接挂载在全局对象上

有依赖关系的 UMD 模块

模块会被调用,当然也会调用其他模块。根据各种规范的要求,写上模块依赖即可

(function(root, factory) {
  if (typeof module === 'object' && typeof module.exports === 'object') {
    // commonjs 模块规范,nodejs环境
    let depModule = require('depModule')
    module.exports = factory(depModule)
  } else if (typeof define === 'function' && define.amd) {
    // AMD 模块规范,如 require.js
    define(['depModule'], factory)
  } else if (typeof define === 'function' && define.cmd) {
    // CMD 模块规范,如 sea.js')
    define(function(require, exports, module) {
      let depModule = require('depModule')
      module.exports = factory(depModule)
    })
  } else {
    // 没有模块环境,直接挂载在全局对象上
    root.umdModule = factory(root.depModule)
  }
}(this, function(depModule) {
  return {
    name: depModule.name
  }
}))

参考链接:学习UMD

除特殊说明外本人博客均属原创,转载请注明出处:http://blog.johnhan.cn/blog_1070.html
京ICP备19044523号-1