简单聊一聊Javascript中的模块化
在面试中只要说到模块化的问题，多多少少总会问到这些，umd、amd、cjs、esm，可能听过其中一个两个，或者都听说过。接下来我们先简单了解一下他们到底是什么，又有什么样的区别呢。
最开始的时候，Javascript是没有导入导出模块的这种方法，这就有一个比较头疼的问题，就是我们所有的代码都要写在一个文件里面，那可真的是又臭又长。有问题了，排查起来还特别的麻烦，定义个变量还总是出各种问题。后来，为了解决这些烦人的问题，各路大佬就推出了umd、amd、cjs、esm、cmd。
模块化的优点
实现代码的可复用，具有独立的作用域，避免全局变量被污染
便于代码编写和维护，提高开发效率
实现按需加载，例如：npm就是一个巨大的模块化仓库
CommonJS（cjs）
CommonJS主要用于服务端，nodejs是默认使用cjs模块规范。每一个文件就是一个模块，有自己独立的作用域、变了、方法等，对其他的模块都不可见。模块可以多次加载，但是只在第一次时运行，然后运行结果就被缓存，后续加载则直接读取缓存结果。若想再次运行模块，则需要清楚缓存。模块的加载顺序是按照在代码中的出现的顺序进行加载的。
如果想要多次执行一个模块，可以导出一个方法，然后直接调用方法即可。特点
在执行模块代码之前，NodeJs会使用函数封装器将其封装为闭包形式的方法
可以通过 module.exports 导出模块内容，但是不能对exports有赋值操作
CJS 是同步导入模块，通过 require(id) 引入模块、JSON、或本地文件
被引入的模块将被缓存到require.cache 对象中，如果删除该对象的某个模块会导致下次require的时候重新加载该模块
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。
amd是异步导入
专为前端而设计
语法不如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。
引入require.js时，我们会通过
data-main引入入口文件；require.js获取到入口文件后，将文件以及对应的依赖通过
script标签append到html上；依赖是依次、同步append到html，但是script标签的加载却是异步的；
依赖加载完成后，会立即调用其回调执行函数；
入口文件监听到所有的依赖都加载完成后，再调用其回调函数（即回调函数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
AMD是依赖前置，提前加载依赖；CMD依赖后置，使用时才加载
所有代码都运行在模块作用域中，不会污染全局变量；
模块会被异步加载；
模块加载完成后，不会执行其回调函数，而是等到主函数运行且需要的执行依赖的时候才运行依赖函数（依赖后置、按需加载）
（对于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 提出的实现一个标准模块系统的方案。
大多现代浏览器都支持
异步加载和简单语法
因为是静态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中的模块化的更多相关文章
- JavaScript 中的模块化
JavaScript 中的模块化 最早的基于立即执行函数,闭包的模块化 const MountClickModule = function(){ let num = 0; const handle ...
- 简单分析JavaScript中的面向对象
初学JavaScript的时候有人会认为JavaScript不是一门面向对象的语言,因为JS是没有类的概念的,但是这并不代表JavaScript没有对象的存在,而且JavaScript也提供了其它的方 ...
- 简单说 JavaScript中的tostring( ) 与 valueOf( )方法
说明 所有的对象都继承有toString() 和 valueOf() 方法,对象到字符串,对象到数字的转换,会通过调用待转换对象的这两个方法中的一个来完成. 解释 toString( )方法的作用是: ...
- 简单谈谈JavaScript中的this
是夜,想着考量下小黄毛近期的JavaScript进阶如何了,鉴于近期一直在接触Vue 2.0,索性就围绕this编写了个代码片段, 给其一个测量,毕竟写js的程序员都知道,JavaScript的函数调 ...
- 简单理解Javascript中的call 和 apply
javascript中面向对像的能力是后来加进来的, 为了兼容性, 所以整出了很多奇特的东西, function Animal(){ this.name = "Animal"; t ...
- 简单理解javascript中的原型对象,实现对之间共享属性和行为
javascript中提供了构造函数.可以方便的创建对象. 典型的构造函数例如以下: function Person(name, age) { this.name = name; this.age = ...
- 简单说 JavaScript中的事件委托(下)
说明 上次我们说了一些,关于 JavaScript中事件委托的 基础知识,这次我们继续来看. 解释 先来一段代码 <!doctype html> <html lang="e ...
- JavaScript中的模块化之AMD和CMD
前言: 为什么我们需要模块化开发,模块化开发的好处有哪些? 首先我们先说一下非模块化的开发方式带来的弊端. 非模块化开发中会导致一些问题的出现,变量和函数命名可能相同,会造成变量污染和冲突,并且出错时 ...
- 聊一聊JavaScript中的事件循环
一.概念:事件循环 JavaScript是单线程的 1.整片 script 整体代码(第一个宏任务)放到执行栈中,执行之后,会触发很多方法 这些方法只能一个个的顺序执行,不能并发 2.这些要执行的方法 ...
随机推荐
- 推荐一个基于Dapr的 Red Dog 的完整微服务应用程序
微服务尽管构建起来非常困难,但它们已成为一种越来越流行的架构模式.随着开发人员开始将他们现有的单体代码库迁移到微服务系统,他们花费大量时间来处理分布式应用程序带来的固有挑战,例如状态管理和服务调用.通 ...
- EKS助力小白实践云原生——通过k8s部署wordpress应用
目前云原生在大厂已经有了充分的实践,也逐渐向小厂以及非互联网公司推广.适逢12月20日,腾讯云原生[燎原社]精心打造了云原生在线技术工坊,让零基础的同学也能快速入门和实践 Docker 和 Kuber ...
- 在view中实现UIViewController的跳转 By H.L
view中是不能进行UIViewController的push,pop等操作的,若进行跳转操作,一般是用代理,block,通知等实现,那如何实现在ViewController的subView中实现跳转 ...
- python继承关系中，类属性的修改
class Grandfather(object): mylist = [] def __init__(self): pass class Father(Grandfather): pass Gran ...
- LAMP以及各组件的编译安装
LAMP以及各组件的编译安装 目录 LAMP以及各组件的编译安装 一.LAMP 1. LAMP概述 2. 各组件的主要作用 3. 平台环境的安装顺序 二.编译安装apache httpd 1. 关闭防 ...
- 2022寒假集训day3
day3:四道检测题,花了大半天时间. T1 子集和问题 问题描述 子集和问题的一个实例为<S,c>.其中S={x1,x2,-,xn}是一个正整数的集合,c是一个正整数.子集和问题判定是否 ...
- Hadoop完全分布式的配置
选取机器sam01作为主节点,并进行分布式文件的配置 1.进入Hadoop配置文件路径/usr/local/hadoop/etc/hadoop(这里我把Hadoop安装在/usr/local目录下) ...
- k8s笔记--驱逐与重调度，以及deschueduler的一次实验
在Kubernetes中,调度是指将Pod放置到合适的Node上,然后对应的Node上的Kubelet才能够运行这些pod.调度器通过Kubernetes的监测机制来发现集群中新创建且尚未被调度的No ...
- Solution -「国家集训队」「洛谷 P2839」Middle
\(\mathcal{Description}\) Link. 给定序列 \(\{a_n\}\),\(q\) 组询问,给定 \(a<b<c<d\),求 \(l\le[a,b] ...
- pytest(11)-Allure生成测试报告(一)
Allure是一个开源的测试报告生成框架,提供了测试报告定制化功能,相较于我们之前使用过pytest-html插件生成的html格式的测试报告,通过Allure生成的报告更加规范.清晰.美观. pyt ...