@lppx/nlearn 1.1.0

package/dist/src/demo/esm/03-/345/257/274/345/205/245/350/257/255/346/263/225.js

@@ -0,0 +1,366 @@
+"use strict";
+/**
+ * ESM 导入语法
+ * ============
+ * 本文件详细介绍 ESM 的各种导入方式
+ * 包括命名导入、默认导入、动态导入等
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+// #region 示例1: 命名导入（Named Imports）
+/**
+ * 命名导入：导入模块的命名导出
+ * 必须使用花括号，名称必须与导出的名称匹配
+ */
+function demonstrateNamedImports() {
+    console.log(`=== 命名导入 ===
+
+语法形式1: 导入单个命名导出
+  import { name } from "./module.js";
+
+语法形式2: 导入多个命名导出
+  import { name1, name2, name3 } from "./module.js";
+
+语法形式3: 导入时重命名
+  import { originalName as newName } from "./module.js";
+
+语法形式4: 导入所有命名导出为命名空间对象
+  import * as moduleName from "./module.js";
+
+示例代码：
+---
+// math.js 导出
+export const PI = 3.14159;
+export function add(a, b) { return a + b; }
+
+// 导入方式1: 导入特定的导出
+import { PI, add } from "./math.js";
+console.log(PI);        // 3.14159
+console.log(add(2, 3)); // 5
+
+// 导入方式2: 重命名避免冲突
+import { PI as MathPI } from "./math.js";
+const PI = 3.14;  // 本地变量
+console.log(MathPI);  // 3.14159
+
+// 导入方式3: 命名空间导入
+import * as Math from "./math.js";
+console.log(Math.PI);        // 3.14159
+console.log(Math.add(2, 3)); // 5
+---
+
+特点：
+  ✓ 明确知道导入了哪些内容
+  ✓ 支持 Tree Shaking
+  ✓ 可以重命名避免命名冲突
+  ✓ 命名空间导入会创建一个对象包含所有导出
+`);
+}
+// #endregion
+// #region 示例2: 默认导入（Default Import）
+/**
+ * 默认导入：导入模块的默认导出
+ * 不使用花括号，可以使用任意名称
+ */
+function demonstrateDefaultImport() {
+    console.log(`=== 默认导入 ===
+
+语法：
+  import myName from "./module.js";
+
+示例代码：
+---
+// calculator.js 导出
+export default class Calculator {
+  add(a, b) { return a + b; }
+}
+
+// 导入（可以使用任意名称）
+import Calculator from "./calculator.js";
+import Calc from "./calculator.js";  // 也可以
+import MyCalc from "./calculator.js"; // 也可以
+
+const calc = new Calculator();
+console.log(calc.add(2, 3));  // 5
+---
+
+特点：
+  ✓ 不使用花括号
+  ✓ 可以使用任意名称
+  ✓ 每个模块只能有一个默认导出
+  ✓ 适合导入模块的主要功能
+`);
+}
+// #endregion
+// #region 示例3: 混合导入
+/**
+ * 混合导入：同时导入默认导出和命名导出
+ */
+function demonstrateMixedImports() {
+    console.log(`=== 混合导入 ===
+
+语法：
+  import defaultExport, { named1, named2 } from "./module.js";
+
+示例代码：
+---
+// utils.js 导出
+export const VERSION = "1.0.0";
+export function helper() { return "help"; }
+export default class Utils {
+  static main() { return "main"; }
+}
+
+// 导入
+import Utils, { VERSION, helper } from "./utils.js";
+
+console.log(Utils.main());  // "main"
+console.log(VERSION);       // "1.0.0"
+console.log(helper());      // "help"
+---
+
+注意：
+  - 默认导入必须写在前面
+  - 命名导入使用花括号包裹
+  - 两者之间用逗号分隔
+`);
+}
+// #endregion
+// #region 示例4: 动态导入（Dynamic Import）
+/**
+ * 动态导入：在运行时按需加载模块
+ * 返回一个 Promise，支持异步加载
+ */
+async function demonstrateDynamicImport() {
+    console.log(`=== 动态导入 ===
+
+语法：
+  const module = await import("./module.js");
+
+特点：
+  1. 运行时加载：可以在任何地方使用
+  2. 返回 Promise：支持异步操作
+  3. 按需加载：只在需要时才加载模块
+  4. 条件加载：可以根据条件决定是否加载
+
+示例1: 基本用法
+---
+// 使用 await
+async function loadModule() {
+  const module = await import("./math.js");
+  console.log(module.add(2, 3));
+}
+
+// 使用 .then()
+import("./math.js").then(module => {
+  console.log(module.add(2, 3));
+});
+---
+
+示例2: 条件加载
+---
+async function loadFeature(featureName) {
+  if (featureName === "advanced") {
+    const module = await import("./advanced.js");
+    return module.default;
+  } else {
+    const module = await import("./basic.js");
+    return module.default;
+  }
+}
+---
+
+示例3: 访问导出内容
+---
+const module = await import("./utils.js");
+
+// 访问默认导出
+const DefaultExport = module.default;
+
+// 访问命名导出
+const { VERSION, helper } = module;
+// 或
+console.log(module.VERSION);
+console.log(module.helper());
+---
+
+使用场景：
+  - 代码分割：减少初始加载时间
+  - 按需加载：只在需要时加载功能
+  - 条件加载：根据用户操作或环境加载
+  - 懒加载：延迟加载非关键资源
+`);
+}
+// #endregion
+// #region 示例5: 仅执行导入（Side Effect Import）
+/**
+ * 仅执行导入：导入模块但不使用其导出
+ * 用于执行模块的副作用（如注册、初始化等）
+ */
+function demonstrateSideEffectImport() {
+    console.log(`=== 仅执行导入 ===
+
+语法：
+  import "./module.js";
+
+示例代码：
+---
+// polyfill.js
+if (!Array.prototype.includes) {
+  Array.prototype.includes = function(item) {
+    return this.indexOf(item) !== -1;
+  };
+}
+console.log("Polyfill loaded");
+
+// main.js
+import "./polyfill.js";  // 执行 polyfill，但不导入任何内容
+
+// 现在可以使用 includes 方法
+console.log([1, 2, 3].includes(2));
+---
+
+使用场景：
+  - 加载 polyfills
+  - 注册全局组件或插件
+  - 执行初始化代码
+  - 导入 CSS 文件（在构建工具中）
+
+注意：
+  - 模块会被执行，但不会导入任何绑定
+  - 模块的副作用会生效
+  - 适合只需要执行代码，不需要导出的场景
+`);
+}
+// #endregion
+// #region 示例6: 导入的注意事项
+function importCaveats() {
+    console.log(`=== 导入的注意事项 ===
+
+1. 导入路径必须是字符串字面量：
+---
+// ❌ 错误：不能使用变量
+const modulePath = "./math.js";
+import { add } from modulePath;  // SyntaxError
+
+// ✓ 正确：使用动态导入
+const modulePath = "./math.js";
+const module = await import(modulePath);
+---
+
+2. 导入语句会被提升（Hoisting）：
+---
+console.log(add(2, 3));  // 可以在导入前使用
+import { add } from "./math.js";
+
+// 实际执行顺序：
+// 1. 先执行 import
+// 2. 再执行 console.log
+---
+
+3. 导入的绑定是只读的：
+---
+import { count } from "./counter.js";
+count = 10;  // TypeError: Assignment to constant variable
+
+// 但如果导出的是对象，可以修改对象的属性
+import { config } from "./config.js";
+config.debug = true;  // ✓ 可以修改属性
+---
+
+4. 导入语句必须在顶层：
+---
+// ❌ 错误：不能在条件语句中导入
+if (condition) {
+  import { add } from "./math.js";  // SyntaxError
+}
+
+// ✓ 正确：使用动态导入
+if (condition) {
+  const { add } = await import("./math.js");
+}
+---
+
+5. 文件扩展名：
+---
+// Node.js ESM 要求完整的文件扩展名
+import { add } from "./math.js";     // ✓ 正确
+import { add } from "./math";        // ❌ 错误（Node.js）
+
+// 浏览器和构建工具可能有不同的要求
+// 建议始终包含扩展名以保持一致性
+---
+
+6. 循环依赖：
+---
+// a.js
+import { b } from "./b.js";
+export const a = "a";
+console.log(b);  // undefined (b 还未初始化)
+
+// b.js
+import { a } from "./a.js";
+export const b = "b";
+console.log(a);  // undefined (a 还未初始化)
+
+// 避免循环依赖，或使用函数延迟访问
+---
+`);
+}
+// #endregion
+// 运行所有示例的函数
+async function runAllExamples() {
+    console.log(`
+${'='.repeat(50)}
+运行所有示例
+${'='.repeat(50)}
+`);
+    demonstrateNamedImports();
+    console.log('\n' + '-'.repeat(50) + '\n');
+    demonstrateDefaultImport();
+    console.log('\n' + '-'.repeat(50) + '\n');
+    demonstrateMixedImports();
+    console.log('\n' + '-'.repeat(50) + '\n');
+    await demonstrateDynamicImport();
+    console.log('\n' + '-'.repeat(50) + '\n');
+    demonstrateSideEffectImport();
+    console.log('\n' + '-'.repeat(50) + '\n');
+    importCaveats();
+    console.log('\n' + '='.repeat(50));
+}
+// 主函数：根据参数运行指定示例
+if (require.main === module) {
+    const args = process.argv.slice(2);
+    const exampleNum = args[0] ? parseInt(args[0]) : 0;
+    const examples = [
+        { name: '所有示例', fn: runAllExamples },
+        { name: '命名导入', fn: demonstrateNamedImports },
+        { name: '默认导入', fn: demonstrateDefaultImport },
+        { name: '混合导入', fn: demonstrateMixedImports },
+        { name: '动态导入', fn: demonstrateDynamicImport },
+        { name: '仅执行导入', fn: demonstrateSideEffectImport },
+        { name: '导入的注意事项', fn: importCaveats }
+    ];
+    if (exampleNum === 0) {
+        void runAllExamples();
+    }
+    else if (exampleNum > 0 && exampleNum < examples.length) {
+        console.log(`\n运行示例 ${exampleNum}: ${examples[exampleNum].name}\n`);
+        console.log('='.repeat(50));
+        // 动态导入示例是异步的
+        if (exampleNum === 4) {
+            void examples[exampleNum].fn().then(() => {
+                console.log('='.repeat(50));
+            });
+        }
+        else {
+            examples[exampleNum].fn();
+            console.log('='.repeat(50));
+        }
+    }
+    else {
+        console.log(`可用的示例：
+${examples.slice(1).map((ex, idx) => `  ${idx + 1}. ${ex.name}`).join('\n')}
+
+使用方法: ts-node 03-导入语法.ts [示例编号]`);
+    }
+}