在面试中只要说到模块化的问题，多多少少总会问到这些，umd、amd、cjs、esm，可能听过其中一个两个，或者都听说过。接下来我们先简单了解一下他们到底是什么，又有什么样的区别呢。

最开始的时候，Javascript是没有导入导出模块的这种方法，这就有一个比较头疼的问题，就是我们所有的代码都要写在一个文件里面，那可真的是又臭又长。有问题了，排查起来还特别的麻烦，定义个变量还总是出各种问题。后来，为了解决这些烦人的问题，各路大佬就推出了umd、amd、cjs、esm、cmd。

模块化的优点

  • 实现代码的可复用，具有独立的作用域，避免全局变量被污染

  • 便于代码编写和维护，提高开发效率

  • 实现按需加载，例如：npm就是一个巨大的模块化仓库

CommonJS（cjs）

CommonJS主要用于服务端，nodejs是默认使用cjs模块规范。每一个文件就是一个模块，有自己独立的作用域、变了、方法等，对其他的模块都不可见。模块可以多次加载，但是只在第一次时运行，然后运行结果就被缓存，后续加载则直接读取缓存结果。若想再次运行模块，则需要清楚缓存。模块的加载顺序是按照在代码中的出现的顺序进行加载的。
如果想要多次执行一个模块，可以导出一个方法，然后直接调用方法即可。特点

  1. 在执行模块代码之前，NodeJs会使用函数封装器将其封装为闭包形式的方法

  2. 可以通过 module.exports 导出模块内容，但是不能对exports有赋值操作

  3. CJS 是同步导入模块，通过 require(id) 引入模块、JSON、或本地文件

  4. 被引入的模块将被缓存到require.cache 对象中，如果删除该对象的某个模块会导致下次require的时候重新加载该模块

  5. CJS 不能在浏览器中工作，必须经过转换和打包。node.js 就是使用 commonJs 的模块规范，可以在 js 文件中直接使用

 // 定义模块 sum.js    
const num = 0;    
function add(a, b) {      return a + b;    }   
module.exports = { 
//在这里写上需要向外暴露的函数、变量      
　　add: add,      
　　num: num    
}    
/** 必须加./路径，不加的话只会去node_modules文件找 **/    
// 引用自定义的模块时，参数包含路径，可省略.js    
const sum = require('./sum');    
sum.add(2, 5);    
// 引用核心模块时，不需要带路径    
var http = require('http');    
http.createService(...).listen(3000);

amd（Asynchronous Module Definition）

amd是Javascript的异步模块化定义方案，专门为前端而做的，代表库为：require.js。

  1. amd是异步导入

  2. 专为前端而设计

  3. 语法不如cjs直观

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 () {};
});

RequireJS 是一个JavaScript模块加载器（文件和模块载入工具），使用RequireJS加载模块化脚本将提高代码的加载速度和质量它针对浏览器使用场景进行了优化，并且也可以应用到其他 JavaScript 环境中，例如 Node.js。

  1. 引入require.js时，我们会通过data-main引入入口文件；

  2. require.js获取到入口文件后，将文件以及对应的依赖通过script标签append到html上；

  3. 依赖是依次、同步append到html，但是script标签的加载却是异步的；

  4. 依赖加载完成后，会立即调用其回调执行函数；

  5. 入口文件监听到所有的依赖都加载完成后，再调用其回调函数（即回调函数factory）

<!-- project.html -->
<!DOCTYPE html>
<html>    
<head>        
<title>My Sample Project</title>        
<script data-main="scripts/main" src="scripts/require.js"></script>    
</head>    
<body>        
<h1>My Sample Project</h1>    
</body>
</html>


// main.js

requirejs(["helper/util"], function(util) {    
// you can do everything you want
});

cmd（Common Module Definition）

cmd通用模块定义，amd的优化版，代表库：sea.js

  1. AMD是依赖前置，提前加载依赖；CMD依赖后置，使用时才加载

  2. 所有代码都运行在模块作用域中，不会污染全局变量；

  3. 模块会被异步加载；

  4. 模块加载完成后，不会执行其回调函数，而是等到主函数运行且需要的执行依赖的时候才运行依赖函数（依赖后置、按需加载）

（对于seajs想了解的同学可以自己去官网了解，因为小妖也不太熟悉）

umd（Universal Module Definition）

一般可以把cjs转为UMD，用于浏览器运行时使用。是一种通用的写法，是在amd和cjs两个流行而不统一的规范情况下，才催生出umd来统一规范的，umd前后端均可通用，UMD 更像是一种配置多个模块系统的模式,当使用 Rollup/Webpack 之类的打包器时，UMD 通常用作备用模块。

// CommonJS侧重服务器，而AMD侧重于浏览器，两者的模块不能共享/*  UMD的思想很简单   判断是AMD则使用AMD方式  是commonJS则使用CommonJS方式  都不是则将模块公开给全局（window或global） */ (function (root, factory) {   if (typeof define === "function" && define.amd) {       // amd方式       define(["jquery", "underscore"], factory);   } else if (typeof exports === "object") {       // cjs方式       module.exports = factory(require("jquery"), require("underscore"));   } else {       // 公开暴露给全局       root.Requester = factory(root.$, root._);   }}(this, function ($, _) {    // 属性    var property = Math.property;    // 方法    function a() { };                   // 私有方法，因为它没被返回    function b() { return a() };        // 公共方法，因为被返回了    function c(x, y) { return x + y };  // 公共方法，因为被返回了    // 暴露公共方法    return {        ip: PI,        b: b,        c: c    }}));

esm（ES Module）

ESM 代表 ES 模块，es6原生支持的。这是 Javascript 提出的实现一个标准模块系统的方案。

  1. 大多现代浏览器都支持

  2. 异步加载和简单语法

  3. 因为是静态module结构，支持打包工具去除无用代码

// 在html中调用
<script type="module"> 
import {func1} from 'my-lib'; 
func1();
</script>

// 静态导入：导入本地的文件、库或者远程模块
import { createStore } from "https://unpkg.com/redux@4.0.5/es/redux.mjs";
import * as myModule from './util.js';


// 动态导入：ES模块实际上是JavaScript对象：我们可以解构它们的属性以及调用它们的任何公开方法
btn.addEventListener("click", () => {  
　　// loads named export  
　　import("./util.js")
　　.then(({ funcA }) => {    
　　　　funcA();  });
});
或
const loadUtil = () => import("./util.js"); 
// 返回的是一个 promise。所以也可以使用可以使用 `async/await`

btn.addEventListener("click", () => {  
　　loadUtil().then(module => {    
　　　　module.funcA();    
　　　　module.default();  
})})
// 使用 async/await 的写法
btn.addEventListener("click", async () => {  
　　const utilsModule = await loadUtil();  
　　utilsModule.funcA();  
　　utilsModule.default();
})

最后

  • 由于 esm 具有简单的语法，异步特性和可摇树性，因此它是最好的模块化方案

  • umd 随处可见，通常在 esm 不起作用的情况下用作备用

  • cjs 是同步的，适合后端

  • amd 是异步的，适合前端（cmd是amd的优化）

最最后：欢迎关注大家我的公众号

简单聊一聊Javascript中的模块化的更多相关文章

  1. JavaScript 中的模块化

    JavaScript 中的模块化 最早的基于立即执行函数,闭包的模块化 const MountClickModule = function(){  let num = 0;  const handle ...

  2. 简单分析JavaScript中的面向对象

    初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...

  3. 简单说 JavaScript中的tostring( ) 与 valueOf( )方法

    说明 所有的对象都继承有toString() 和 valueOf() 方法,对象到字符串,对象到数字的转换,会通过调用待转换对象的这两个方法中的一个来完成. 解释 toString( )方法的作用是: ...

  4. 简单谈谈JavaScript中的this

    是夜,想着考量下小黄毛近期的JavaScript进阶如何了,鉴于近期一直在接触Vue 2.0,索性就围绕this编写了个代码片段, 给其一个测量,毕竟写js的程序员都知道,JavaScript的函数调 ...

  5. 简单理解Javascript中的call 和 apply

    javascript中面向对像的能力是后来加进来的, 为了兼容性, 所以整出了很多奇特的东西, function Animal(){ this.name = "Animal"; t ...

  6. 简单理解javascript中的原型对象,实现对之间共享属性和行为

    javascript中提供了构造函数.可以方便的创建对象. 典型的构造函数例如以下: function Person(name, age) { this.name = name; this.age = ...

  7. 简单说 JavaScript中的事件委托(下)

    说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看. 解释 先来一段代码 <!doctype html> <html lang="e ...

  8. JavaScript中的模块化之AMD和CMD

    前言: 为什么我们需要模块化开发,模块化开发的好处有哪些? 首先我们先说一下非模块化的开发方式带来的弊端. 非模块化开发中会导致一些问题的出现,变量和函数命名可能相同,会造成变量污染和冲突,并且出错时 ...

  9. 聊一聊JavaScript中的事件循环

    一.概念:事件循环 JavaScript是单线程的 1.整片 script 整体代码(第一个宏任务)放到执行栈中,执行之后,会触发很多方法 这些方法只能一个个的顺序执行,不能并发 2.这些要执行的方法 ...

随机推荐

  1. 社交网络分析的 R 基础：（二）变量与字符串

    本章会从 R 语言中最基本的数据类型开始介绍,在此之后就可以开始 R 语言实践了.对社交网络分析而言,我们在处理字符串上所花费的时间要远远大于处理数字的时间,因此本章还会介绍常用的字符串处理操作. 变 ...

  2. 如何为Windows服务增加Log4net和EventLog的日志功能。

    一.简介 最近在做一个项目的时候,需要该项目自动启动.自动运行,不需要认为干预.不用说,大家都知道用什么技术,那就是 Windows服务.在以前的Net Framework 平台下,Windows 服 ...

  3. 一行代码轻松修改 Text Field 和 Text View 的光标颜色 — By 昉

    众所周知,Text Field 和 Text View 的光标颜色默认都是系统应用的那种蓝色,如图: 而在实际开发中为了让视觉效果更统一,我们可能会想把那光标的颜色设置成和界面色调一致的颜色.其实在 ...

  4. GoogleGoogleGoogle!!!! 百度云资源

    一些谷歌镜像地址,够用了 Google 镜像站搜集 田飞雨 » Google 镜像站搜集 https://github.com/sxyx2008/DevArticles/issues/99 http: ...

  5. squid 代理服务器应用

    squid 代理服务器应用 1.Squid 代理服务器 : Squid 主要提供缓存加速.应用层过滤控制的功能.  代理的工作机制: 代替客户机向网站请求数据,从而可以隐藏用户的真实IP地址. 将获得 ...

  6. 【AGC035D】Add and Remove(脑洞 DP 分治)

    题目链接 大意 给出\(N\)个数的序列,每次操作可以选择连续的三个数,将中间的那个数抽出,将另外两个数的数值加上中间那个数的数值. 一直执行以上操作直到只剩最后两个数,求最后两个数的所有可能的和的最 ...

  7. logback1.3.x配置详解与实践

    前提 当前(2022-02前后)日志框架logback的最新版本1.3.0已经更新到1.3.0-alpha14版本,此版本为非stable版本,相对于最新稳定版1.2.10来说,虽然slf4j-api ...

  8. 帆软报表（finereport）控件背景色更改

    setTimeout(function() { $('.fr-trigger-btn-up').css({ "background-color": "#003399&qu ...

  9. suging闲谈-netty 的异步非阻塞IO线程与业务线程分离

    前言 surging 对外沉寂了一段时间了,但是作者并没有闲着,而是针对于客户的需要添加了不少功能,也给我带来了不少外快收益, 就比如协议转化,consul 的watcher 机制,JAVA版本,sk ...

  10. rabbit-vue3-ts-小兔鲜儿2022新版-系列开篇

    rabbit-vue3-ts-小兔鲜儿2022新版 项目使用 Vite + Vue3 + TypeScript + Pinia + VueRouter@4 进行开发. 代码检查和格式化为:ESlint ...