JS模块化
JavaScript模块化编程是指将JavaScript代码分割成独立的模块，每个模块都有自己的作用域和接口，可以按需加载和使用。这样可以避免全局变量污染，提高代码的可维护性和可重用性。在ES6之前，JavaScript并没有一个统一的模块化规范，开发人员通常使用CommonJS或AMD等第三方库来实现模块化编程。
背景
从四个维度来分析下js模块化，同步异步加载、变量的深浅拷贝、适用范围、代码表现。
针对于深浅拷贝来说，module.exports+require这样的操作就是浅拷贝可以共享内存，对于export import这样的操作就是深拷贝这个可以看之前的博客。
使用了rollup打包了umd。
CJS(commonjs)
同步异步加载：同步
适用范围：nodejs
代码表现：
// a.js
module.exports = {
boo: 10
}
// b.js
const {boo} = require('a.js')
console.log(boo)AMD
同步异步加载：：异步
适用范围：nodejs、配合reqirejs可以在浏览器中使用
代码表现：参考umd代码
define(["exports"], factory);CMD
同步异步加载：同步
适用范围：nodejs和配合reqirejs可以在浏览器中使用
代码表现：参考umd代码
define(function(require, exports, module) {
exports.a = 10
factory(exports);
});UMD
同步异步加载：同步
适用范围：nodejs和浏览器
代码表现：兼容了commonjs、cmd、amd
(function (global, factory) {
if (typeof exports === "object" && typeof module !== "undefined") {
// commonjs
factory(exports);
} else if (typeof define === "function" && define.amd) {
// amd
define(["exports"], factory);
} else if (typeof define === "function" && define.cmd) {
// cmd
define(function(require, exports, module) {
exports.a = 10
factory(exports);
});
} else {
// 没有环境
(global = typeof globalThis !== "undefined" ? globalThis : global || self),
factory((global.umd = {}));
}
})(this, function (exports) {
"use strict";
console.log(3424221233);
var sum = function sum(a, b) {};
exports.sum = sum;
Object.defineProperty(exports, "__esModule", { value: true });
});
ESM
同步异步加载：异步
适用范围：浏览器（随着浏览器的发展，可以在script的标签中加入type="module"来支持）和nodejs（Node verison 13.2.0，有两种方式1：package.json中填写type: "modules"，2.将文件结尾命名为mjs）
代码表现：
// a.js
let boo = 10
export default boo
// b.js
import boo from "boo"
console.loG(boo)IIFE（立即执行函数）
同步异步加载：同步
适用范围：nodejs和浏览器
代码表现：
(function() {
var foo = "bar";
console.log(foo);
})();结论
在webpack、rollup、esm各种打包器中都可以设置对应的产物类型，我们要根据我们的产物的用途来选择对应的类型，我们一般并不会关心最终的代码产物，但是对于各种类型的产物还是要有一定的了解，这篇文章算是个简单的总结。文章来源：https://www.toymoban.com/news/detail-691051.html
鹰眼：悲哀的弱者，如果你真是一流的剑士，就算没跟我交手也明白你我实力的差距吧文章来源地址https://www.toymoban.com/news/detail-691051.html
到了这里，关于js模块化CJS、AMD、CMD、UMD、ESM、IIFE理解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
