TypeScript学习日志-第二十天（模块解析）

一股向上的枫2024-05-06 13:23

模块解析

一、ES6之前的模块规范

前端模块化规范是有很多的，在es6模块化规范之前分别有一下的模块化规范

一、Commonjs

这是 NodeJs里面的模块化规范

javascript 复制代码

// 导入
require("xxx");
require("../xxx.js");
// 导出
exports.xxxxxx= function() {};
module.exports = xxxxx;

二、AMD

AMD 和 CMD 都是浏览器下使用的规范。

AMD 遵循的是 requireJs

javascript 复制代码

// 定义
define("module", ["dep1", "dep2"], function(d1, d2) {...});
// 加载模块
require(["module", "../app"], function(module, app) {...});

三、CMD

CMD 遵循的是 seaJs

javascript 复制代码

define(function(require, exports, module) {
  var a = require('./a');
  a.doSomething();
  
  var b = require('./b');
  b.doSomething();
});

四、UMD

UMD 是 AMD 和 CommonJS 的糅合

javascript 复制代码

(function (window, factory) {
    // 检测是不是 Nodejs 环境
	if (typeof module === 'object' && typeof module.exports === "objects") {
        module.exports = factory();
    } 
	// 检测是不是 AMD 规范
	else if (typeof define === 'function' && define.amd) {
        define(factory);
    } 
	// 使用浏览器环境
	else {
        window.eventUtil = factory();
    }
})(this, function () {
    //module ...
});