欢迎光临
我的个人博客网站

【面试说】Javascript 中的 CJS, AMD, UMD 和 ESM是什么?

最初,Javascript 没有导入/导出模块的方法, 这是让人头疼的问题。 想象一下,只用一个文件编写应用程序——这简直是噩梦!

然后,很多比我聪明得多的人试图给 Javascript 添加模块化。其中就有 CJSAMDUMDESM。你可能听说过其中的一些方法(还有其他方法,但这些是比较通用的)。

我将介绍它们:它们的语法、目的和基本行为。我的目标是帮助读者在看到它们时认出它们

CJS

CJSCommonJS 的缩写。经常我们这么使用:

// importing  const doSomething = require('./doSomething.js');   // exporting module.exports = function doSomething(n) {   // do something } 复制代码
  • 很多人可以从 Node 中立刻认出 CJS 的语法。这是因为 Node 就是使用 CJS 模块
  • CJS 是同步导入模块
  • 你可以从 node_modules 中引入一个库或者从本地目录引入一个文件 。如 const myLocalModule = require('./some/local/file.js') 或者 var React = require('react'); ,都可以起作用
  • CJS 导入时,它会给你一个导入对象的副本
  • CJS 不能在浏览器中工作。它必须经过转换和打包

AMD

AMD 代表异步模块定义。下面是一个示例代码

define(['dep1', 'dep2'], function (dep1, dep2) {     //Define the module value by returning a value.     return function () {}; }); 复制代码

或者

// "simplified CommonJS wrapping" https://requirejs.org/docs/whyamd.html define(function (require) {     var dep1 = require('dep1'),         dep2 = require('dep2');     return function () {}; }); 复制代码
  • AMD 是异步(asynchronously)导入模块的(因此得名)
  • 一开始被提议的时候,AMD 是为前端而做的(而 CJS 是后端)
  • AMD 的语法不如 CJS 直观。我认为 AMDCJS 完全相反

UMD

UMD 代表通用模块定义(Universal Module Definition)。下面是它可能的样子(来源)

(function (root, factory) {     if (typeof define === "function" && define.amd) {         define(["jquery", "underscore"], factory);     } else if (typeof exports === "object") {         module.exports = factory(require("jquery"), require("underscore"));     } else {         root.Requester = factory(root.$, root._);     } }(this, function ($, _) {     // this is where I defined my module implementation      var Requester = { // ... };      return Requester; })); 复制代码
  • 在前端和后端都适用(“通用”因此得名)
  • CJSAMD 不同,UMD 更像是一种配置多个模块系统的模式。这里可以找到更多的模式
  • 当使用 Rollup/Webpack 之类的打包器时,UMD 通常用作备用模块

ESM

ESM 代表 ES 模块。这是 Javascript 提出的实现一个标准模块系统的方案。我相信你们很多人都看到过这个:

import React from 'react'; 复制代码

或者其他更多的

import {foo, bar} from './myLib';  ...  export default function() {   // your Function }; export const function1() {...}; export const function2() {...}; 复制代码
<script type="module">   import {func1} from 'my-lib';    func1(); </script>

本文首发于前端黑洞网,博客园同步跟新

赞(0) 打赏
未经允许不得转载:张拓的天空 » 【面试说】Javascript 中的 CJS, AMD, UMD 和 ESM是什么?
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏