河田镇建设局网站,免费图片制作app软件哪个好,什么什么网站,报电子商务(网站建设与运营)什么是模块化#xff1f; 将程序⽂件依据⼀定规则拆分成多个文件#xff0c;拆分出来每个⽂件就是⼀个模块#xff0c;模块中的数据都是私有的#xff0c;模块之间互相隔离。如果不进行隔离#xff0c;可能会造成模块间的变量定义有冲突#xff0c;导致程序崩溃 为啥要使…什么是模块化 将程序⽂件依据⼀定规则拆分成多个文件拆分出来每个⽂件就是⼀个模块模块中的数据都是私有的模块之间互相隔离。如果不进行隔离可能会造成模块间的变量定义有冲突导致程序崩溃 为啥要使用模块化 1.全局污染引入不同js文件时js当中同名的函数、变量等因引入先后顺序的问题导致相互覆盖造成调用不清晰的问题 2.依赖混乱引入js文件顺序不同导致页面效果混乱 模块化优点 1.防止命名冲突 2.代码复用 3.提高代码的维护性 哪些模块化规范
IIFE (Immediately Invoked Function Expression)这不是一个模块格式而是一种 JavaScript 函数的执行方式。它创建一个立即执行的函数通常用于避免全局作用域的污染。在打包工具中IIFE 格式通常用于生成一个可以直接在浏览器中运行的自包含脚本。
CommonJS (CJS)这是 Node.js 使用的模块系统。它使用 require() 来导入模块module.exports 或 exports 来导出。它是动态的可以在运行时加载模块但不支持 tree-shaking。
AMD (Asynchronous Module Definition)这种格式主要用于浏览器支持异步加载和依赖管理。它使用 define() 函数来定义模块。
UMD (Universal Module Definition)这种格式旨在兼容 AMD 和 CommonJS同时还能在全局变量中运行。它通常用于让库能在各种环境中运行包括浏览器和 Node.js。
SystemJS这是一个动态模块加载器可以在浏览器中加载各种模块格式包括 ES6、AMD、CommonJS 和全局脚本。
ES Modules (ESM)这是 ECMAScript 6 (ES6) 引入的官方标准格式。它支持导入和导出语句以及静态分析和 tree-shaking。它是唯一的静态模块系统意味着你可以在编译时确定导入和导出的内容。
历史课上一上
直接定义依赖 (1999): 由于当时 js 文件非常简单模块化方式非常简单粗暴 —— 通过全局方法定义、引用模块。这种定义方式与现在的 commonjs 非常神似区别是 commonjs 以文件作为模块而这种方法可以在任何文件中定义模块模块不与文件关联。
闭包模块化模式 (2003): 用闭包方式解决了变量污染问题闭包内返回模块对象只需对外暴露一个全局变量。
模版依赖定义 (2006): 这时候开始流行后端模版语法通过后端语法聚合 js 文件从而实现依赖加载说实话现在 go 语言等模版语法也很流行这种方式写后端代码的时候不觉得回头看看还是挂在可维护性上。
注释依赖定义 (2006): 几乎和模版依赖定义同时出现与 1999 年方案不同的不仅仅是模块定义方式而是终于以文件为单位定义模块了通过 lazyjs 加载文件同时读取文件注释继续递归加载剩下的文件。
外部依赖定义 (2007): 这种定义方式在 cocos2d-js 开发中普遍使用其核心思想是将依赖抽出单独文件定义这种方式不利于项目管理毕竟依赖抽到代码之外我是不是得两头找呢所以才有通过 webwpack 打包为一个文件的方式暴力替换为 commonjs 的方式出现。
Sandbox模式 (2009): 这种模块化方式很简单暴力将所有模块塞到一个 sanbox 变量中硬伤是无法解决明明冲突问题毕竟都塞到一个 sandbox 对象里而 Sandbox 对象也需要定义在全局存在被覆盖的风险。模块化需要保证全局变量尽量干净目前为止的模块化方案都没有很好的做到这一点。
依赖注入 (2009): 就是大家熟知的 angular1.0依赖注入的思想现在已广泛运用在 react、vue 等流行框架中。但依赖注入和解决模块化问题还差得远。
CommonJS (2009): 真正解决模块化问题从 node 端逐渐发力到前端前端需要使用构建工具模拟。
Amd (2009): 都是同一时期的产物这个方案主要解决前端动态加载依赖相比 commonJs体积更小按需加载。
Umd (2011): 兼容了 CommonJS 与 Amd其核心思想是如果在 commonjs 环境存在 module.exports不存在 define将函数执行结果交给 module.exports 实现 Commonjs否则用 Amd 环境的 define实现 Amd。
Labeled Modules (2012): 和 Commonjs 很像了没什么硬伤但生不逢时碰上 Commonjs 与 Amd那只有被人遗忘的份了。
YModules (2013): 既然都出了 Commonjs Amd文章还列出了此方案一定有其独到之处。其核心思想在于使用 provide取代 return可以控制模块结束时机处理异步结果拿到第二个参数 module修改其他模块的定义虽然很有拓展性但用在项目里是个搅屎棍。
ES2015 Modules (2015): 就是我们现在的模块化方案还没有被浏览器实现大部分项目已通过 babel 或 typescript 提前体验。
这张图看的比较清晰 一个个拉出来溜溜
1. commonjs
cjs 是 Node 中的模块规范导入和导出的 API 为
equireexports
在服务端被广泛使用。CJS 可以通过使用 require() 函数和 module.exports 来识别。require() 是一个可用于从另一个模块导入 symbols 到当前作用域的函数。 module.exports 是当前模块在另一个模块中引入时返回的对象。
API 天生是同步的。在源文件中按 require 的顺序瞬时加载模块。CJS 模块不能在浏览器端使用除非它被转译器打包。像 Babel 和 Traceur 那样的转译器如果环境原生不支持新版本的 JavaScript转译器将它们编译成支持的 JS 版本。
2. 异步模块定义AMD 异步模块定义AMD是一种JavaScript模块的定义规范它支持模块的异步加载解决了传统同步加载方式下的诸多问题。AMD规范通过定义清晰的接口让模块可以被异步加载和组织这使得模块间的依赖关系可以明确提高了代码的可维护性和可扩展性。 通过两个主要的函数——define和require来完成模块的定义和加载。这种方式不仅支持模块的异步加载还允许开发者在浏览器中有效地组织和管理模块依赖提升了项目的模块化和代码的复用性。 define函数的基本语法
define(id?, dependencies?, factory);参数说明 id 是一个可选参数用于指定模块的唯一标识符。通常不推荐在代码中显式指定 id 因为模块系统会根据文件路径自动生成模块标识符。 dependencies 是一个数组列出当前模块依赖的其他模块。如果当前模块依赖于其他模块需要在这个数组中按照依赖顺序列出这些模块的标识符。 factory 是一个函数返回模块的导出内容。这是一个关键参数定义了模块的实现逻辑。工厂函数可以有三种形式 无参数工厂函数返回模块的导出对象或值。单参数工厂函数工厂函数接收一个参数通常是一个依赖模块的数组。多参数工厂函数工厂函数可以接收多个参数每个参数对应一个依赖模块。
define([jquery, underscore], function($, _) {return {name: Module A,sayHello: function() {console.log(Hello from Module A!);}};
});requirequire 函数
用于加载一个或多个AMD模块其基本语法如下
require([dependencies], callback);dependencies 参数一个数组包含了所有需要加载的模块标识符。callback 参数一个函数依赖模块加载完成后执行的回调函数。回调函数的参数对应于dependencies 数组中的模块。
AMD 脱胎于 CJS支持异步模块加载。AMD 和 CJS 的主要区别在于它是否支持异步模块加载。RequireJS 使用 AMD 在浏览器端工作。
可以顺便了解下CMD
3. 通用模块定义UMD
UMDUniversal Module Definition是一种通用的模块定义规范旨在使同一个模块能够在不同的环境中使用包括浏览器、Node.js 等。它采用一种灵活的方式既支持类似 CommonJS 的模块加载方式也支持类似 AMD 的异步加载方式同时兼容浏览器全局变量的使用。
UMD 模块通常通过一定的判断逻辑来确定当前的模块加载环境从而决定采用何种加载方式。
看一个网上的示例了解下
(function (root, factory) {if (typeof define function define.amd) {// AMDdefine([dependency], factory);} else if (typeof define function define.cmd) {// CMD 环境define(function (require, exports, module) {module.exports factory(require(dependency));});} else if (typeof exports object) {// Node.js/CommonJSmodule.exports factory(require(dependency));} else {// Browser globalsroot.YourModule factory(root.Dependency);}
})(typeof self ! undefined ? self : this, function (Dependency) {// 你的模块代码return YourModule; // 暴露模块
});
4. ESM ESM允许开发者将代码拆分为多个独立的文件这些文件可以相互引用和依赖。每个文件都可以导出一个或多个值如函数、对象或基本类型并且可以从其他文件导入这些值。 1.导出Export
在ESM中你可以使用export关键字来导出模块中的值。有两种主要的导出方式命名导出和默认导出。
命名导出允许你导出多个值并且每个值都有一个唯一的名称。
// math.js
export const add (a, b) a b;
export const subtract (a, b) a - b;默认导出每个模块都可以有一个默认导出。当其他模块导入该模块时默认导出将作为默认的值被导入。
// greeting.js
const greet (name) Hello, ${name}!;
export default greet;2.导入Import
导入命名导出你可以使用花括号来导入特定的命名导出。
// app.js
import { add, subtract } from ./math.js;
console.log(add(1, 2)); // 输出 3
console.log(subtract(3, 1)); // 输出 2导入默认导出你可以为默认导出指定任何名称。通常这个名称是默认导出所在模块的名称或一个与该模块功能相关的名称。
// app.js
import greet from ./greeting.js;
console.log(greet(World)); // 输出 Hello, World!导入所有导出你还可以使用星号*作为通配符来导入模块中的所有导出。这将返回一个包含所有导出的对象。然而这种用法并不常见因为它可能导致命名冲突并使代码难以维护。但在某些场景下如模块重新导出时它可能是有用的。
// app.js
import * as math from ./math.js;
console.log(math.add(1, 2)); // 输出 3
console.log(math.subtract(3, 1)); // 输出 23.静态导入和动态导入
在ESM中导入是静态的这意味着导入操作在编译时而不是运行时进行。这有助于进行诸如静态分析和代码拆分等优化。然而有时你可能需要在运行时动态地导入模块。为此你可以使用import()函数它返回一个Promise对象该对象在模块加载完成时解析为模块对象。
import(./dialog.js).then((dialogModule) {dialogModule.openDialog();}).catch((error) {console.error(Error loading dialog module:, error);});
4.顶级await
ESM还支持顶级await表达式允许你在模块的顶层代码中等待异步操作完成。这对于需要在模块初始化时加载资源或获取配置的场景非常有用。
import {getUser} from ‘. /data/User’
let userawait getUser();5.Tree Shaking Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination 技术它会在运行过程中静态分析模块之间的导入导出确定 ESM 模块中哪些导出值未曾其它模块使用并将其删除以此实现打包产物的优化。Tree Shaking 较早前由 Rich Harris 在 Rollup 中率先实现Webpack 自 2.0 版本开始接入至今已经成为一种应用广泛的性能优化手段。 5. 系统模块SystemJs
SystemJS是一个通用的模块加载器支持多种模块规范包括CommonJS、AMD、全局模块对象和ES6模块。通过使用插件它还可以加载CoffeeScript和TypeScript。这使得开发者可以在项目中灵活使用不同的模块规范而无需担心兼容性问题。
有兴趣的看他的官网https://github.com/systemjs/systemjs.git
6. 函数表达式IIFE
IIFE立即执行函数表达式是一种在定义时立即执行的 JavaScript 函数。这种函数形式非常有用特别是当需要创建一个新的作用域以避免污染全局作用域或需要执行一段代码但不希望这段代码之后再被引用或重用。
(function() {// 函数体
})();/*或者箭头函数*/
(() {// 函数体
})();有没有想起 “闭包”
了解它了有啥用
写出来的脚本框架是要给人使用的既然要使用就需要关注在哪里使用环境要不然白白浪费时间这上面的概念你或许从不关注那是因为webspack vite这种打包工具帮你干了若你要发布自己的脚手架项目不了解怎么能行多读书不然老是被人骗…
好了到这里吧. stop! 有时间说一说 vite中怎么实现以上场景
