做网站广告公司郴州免费招聘网站

做网站广告公司,郴州免费招聘网站,陕西网站开发价格,短视频代运营费用明细概述在 JavaScript 模块化发展历程中#xff0c;为解决全局变量污染#xff0c;代码依赖管理等问题#xff0c;先后出现了 CommonJS#xff08;CJS#xff09;、AMD、CMD、UMD、ES6 Module#xff08;ESM#xff09;五大主流方案。不同方案因设计目标、运行环境#xf…概述在 JavaScript 模块化发展历程中为解决全局变量污染代码依赖管理等问题先后出现了 CommonJSCJS、AMD、CMD、UMD、ES6 ModuleESM五大主流方案。不同方案因设计目标、运行环境浏览器 / Node的差异形成了各自的语法特性与生态定位。其中ES6 Module是 ES6 官方定义的标准化模块化方案旨在统一浏览器与服务器端的模块化语法解决传统模块化方案如 CommonJS、AMD的碎片化问题。核心特性静态化设计模块的导入import与导出export声明必须在模块顶层且导入导出的模块标识符如文件路径需是静态字符串不能动态拼接如 ·import(./ path)· 是不允许的。这一特性让 JavaScript 引擎在编译阶段就能分析模块依赖关系实现 Tree-Shaking摇树优化剔除未使用的代码。独立模块作用域每个 ESM 模块都是一个独立的作用域模块内声明的变量、函数、类默认不对外暴露需通过export显式导出后其他模块才能通过import导入使用这样可以避免全局变量污染。值引用特性ESM 导入的模块成员是 “值的引用”而非 CommonJS 的值的拷贝若导出模块修改了导出的变量如导出一个 let 声明的变量并后续修改导入模块会同步感知到变化需注意基础类型值若用const声明因不可修改不会有此特性。异步加载在浏览器环境中ESM 默认通过 script typemodule 标签异步加载相当于给 script 加了defer属性不会阻塞 HTML 解析且模块加载完成后会按依赖顺序执行。基础语法导出export命名导出导出多个独立的模块成员导入时需用相同的名称接收可通过as重命名默认导出每个模块最多只能有一个默认导出导入时可自定义接收名称无需加大括号。// 模块AmoduleA.js// 1. 命名导出方式1声明时导出export const name ES6 Module;export function add(a, b) {return a b;}// 2. 命名导出方式2集中导出const age 6;const multiply (a, b) a * b;export { age, multiply as multiplyFn }; // as重命名导出// 3. 默认导出方式1直接导出export default class ModuleClass {constructor() {this.version 1.0.0;}}// 4. 默认导出方式2先声明后导出const defaultObj { type: module };export default defaultObj;导入语法import导入命名成员需用大括号包裹导入的成员名称与导出名称一致可通过as重命名导入默认成员无需大括号可自定义接收名称整体导入用 * as 模块名 导入整个模块的所有导出成员访问时需通过 模块名.成员名 的方式导入执行若导入模块仅需执行其代码如执行初始化逻辑无需使用其导出成员可直接使用 import ./moduleA.js。// 模块BmoduleB.js// 1. 导入命名成员原样接收import { name, add } from ./moduleA.js;console.log(name); // 输出ES6 Moduleconsole.log(add(2, 3)); // 输出5// 2. 导入命名成员重命名接收import { age, multiplyFn as multiply } from ./moduleA.js;console.log(age); // 输出6console.log(multiply(2, 3)); // 输出6// 3. 导入默认成员自定义名称import ModuleClass from ./moduleA.js; // 无需大括号const instance new ModuleClass();console.log(instance.version); // 输出1.0.0// 4. 混合导入命名成员默认成员import ModuleClass, { name as moduleName } from ./moduleA.js;console.log(moduleName); // 输出ES6 Module// 5. 整体导入import * as ModuleA from ./moduleA.js;console.log(ModuleA.name); // 输出ES6 Moduleconsole.log(ModuleA.add(2, 3)); // 输出5console.log(new ModuleA.default().version); // 输出1.0.0默认成员需通过.default访问// 6. 导入执行import ./moduleA.js; // 仅执行moduleA.js的代码不使用其导出成员模块方案对比CJSCommonJSNode.js 原生支持的模块化方案面向服务端采用运行时动态加载通过require导入、module.exports导出设计目标◦ 解决 Node.js 服务端模块依赖管理问题避免全局变量污染◦ 基于文件即模块理念每个文件是独立模块通过module.exports暴露成员require加载模块。特点运行时加载运行时动态加载代码执行到require语句时才会读取目标文件、执行模块代码、返回module.exports对象值传递基础类型是值的拷贝 对象类型则是引用传递require时会将module.exports的属性值拷贝后续导出模块修改基础类型值导入模块不会同步变化缓存模块模块首次加载后会缓存module.exports对象后续require同一模块时直接返回缓存结果避免重复执行模块代码运行环境主要用于 Node.js浏览器端需通过 Browserify、Webpack 等工具转换为全局变量或 ESM。AMDAsynchronous Module Definition面向浏览器端的异步模块化方案解决浏览器加载模块时 “阻塞页面渲染” 问题代表实现为 RequireJS设计目标解决浏览器端同步加载模块阻塞页面渲染问题通过异步方式加载模块加载完成后执行回调函数支持依赖前置提前声明所有依赖确保模块执行时依赖已加载完成。特点异步加载 通过 script 标签动态创建请求加载模块加载完成后触发回调函数不阻塞 HTML 解析与页面渲染依赖前置模块定义时需提前声明所有依赖如define([jquery], ...)RequireJS 会先加载依赖模块所有依赖加载完成后再执行当前模块的工厂函数运行环境仅支持浏览器端Node 端需通过amd-loader等工具转换支持多种路径写法支持相对路径如./moduleA、绝对路径如/js/moduleA、模块别名如jquery。UMDUniversal Module Definition通用模块定义兼容 ESM、CJS、AMD 三种方案可在浏览器与 Node 端通用主要用于第三方库发布。设计目标◦ 解决第三方库需适配多模块方案的问题使用一套代码就能够同时兼容 ESM、CJS、AMD 三种方案可在浏览器与 Node 端通用避免为不同模块方案单独发布代码降低维护成本。特点多环境适配可在Node和浏览器端使用检测方式为 typeof define function define.amd 检测 AMD 环境typeof module object module.exports 检测 CJS 环境否则降级为全局变量ESMES6 ModuleES6 官方标准化方案兼顾浏览器与 Node 端采用编译时静态加载支持 Tree-Shaking通过 import/export 语法实现。设计目标ES6 官方统一浏览器与 Node 端的模块化方案解决传统方案碎片化问题基于编译时静态加载设计支持 Tree-Shaking。特点编译时静态加载JavaScript 引擎在编译阶段分析模块依赖构建依赖树不执行模块代码因为是静态编译的时候做了分析所以很自然的支持 Tree Shaking。值的引用传递导入的成员是对导出模块成员的引用若导出模块修改非const变量导入模块会同步变化。