JavaScript--UMD规范

169 阅读1分钟

前言

   俗话说“好记性不如烂笔头”,此文仅用于记录自我知识库

一、UMD,全称 Universal Module Definition,即通用模块规范。

   为了让模块同时兼容AMDCommonJs规范而出现的,多被一些需要同时支持浏览器端和服务端引用的第三方库所使用。
UMD的实现:
   先判断是否支持 AMD(define 是否存在),存在则使用 AMD 方式加载模块;
   再判断是否支持 Node.js 模块格式(exports 是否存在),存在则使用 Node.js 模块格式;
   前两个都不存在,则将模块公开到全局(windowglobal);

二、实现代码

基本结构

(function (root, factory) { 
    if (typeof define === 'function' && define.amd) { 
        // AMD 
        define(['jquery', 'underscore'], factory); 
    } else if (typeof exports === 'object') { 
        // Node, CommonJS之类的
        module.exports = factory(require('jquery'), require('underscore'));
    } else { 
        // 浏览器全局变量(root 即 window) 
        root.returnExports = factory(root.jQuery, root._); 
    } 
 }(this, function ($, _) {
     // 方法 
     function a(){}; 
     // 私有方法,因为它没被返回 (见下面) 
     function b(){}; // 公共方法,因为被返回了 
     function c(){}; // 公共方法,因为被返回了 
     // 暴露公共方法 
     return { b: b, c: c } 
 }));

vue源码UMD规范

(function (global, factory) {
  // 遵循UMD规范
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  (global = global || self, global.Vue = factory());
}(this, function () { 'use strict';
  ···
  // Vue 构造函数
  function Vue (options) {
    // 保证了无法直接通过Vue()去调用,只能通过new的方式去创建实例
    if (!(this instanceof Vue)
    ) {
      warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
  }
  return Vue
}))

三、参考资料

js模块化的各种规范 之 CJS、AMD、CMD、UMD、ESM

浅谈模块化