亚洲乱色熟女一区二区三区丝袜,天堂√中文最新版在线,亚洲精品乱码久久久久久蜜桃图片,香蕉久久久久久av成人,欧美丰满熟妇bbb久久久

隨著 JavaScript 向現(xiàn)代化發(fā)展，模塊化編程成為大型項目的基石。ES6 引入了原生模塊系統(tǒng)（ES Modules, ESM），為開發(fā)者提供了更加高效、規(guī)范和可優(yōu)化的模塊管理方式。

本文將系統(tǒng)講解 ES6 模塊的核心機制，并重點介紹 import.meta 以及模塊對象的結(jié)構(gòu)和用法，幫助你全面理解 ESM 在實踐中的應(yīng)用。

一、ES6 模塊核心特性

1. 靜態(tài)結(jié)構(gòu)（Static Structure）

ES6 模塊在 編譯階段 即確定模塊依賴，便于構(gòu)建工具進行優(yōu)化（如 Tree-shaking）。

import { sum } from './math.js';

相比之下，CommonJS 使用 require() 是運行時動態(tài)加載的，不利于靜態(tài)分析。

2. 模塊作用域隔離

每個模塊都有自己的作用域，定義的變量不會污染全局，也不會影響其他模塊。

3. 導出方式：命名導出與默認導出

// math.js
export const PI = 3.14;
export default function (x) {
  return x * PI;
}

// main.js
import circle, { PI } from './math.js';

二、模塊加載機制簡析

1. 瀏覽器中：

• 通過 <script type="module"> 加載；
• 模塊腳本默認嚴格模式；
• 同源策略更嚴格（默認啟用 CORS）；
• 模塊異步加載，不阻塞主線程；
• 每個模塊只會被加載和執(zhí)行一次（即使被多次引用）。

2. Node.js 中：

• 啟用 .mjs 后綴，或設(shè)置 package.json 中 "type": "module"；
• 使用文件路徑作為模塊標識；
• 默認禁用 CommonJS 的全局變量（如 __dirname），推薦使用 import.meta.url。

三、模塊對象結(jié)構(gòu)解析

當你使用 import * as mod 導入模塊時，得到的是一個模塊對象，它包含了該模塊導出的所有綁定。

// example.js
export const version = '1.0.0';
export function greet(name) {
  return `Hello, ${name}`;
}
export default 'default-export';

// main.js
import * as mod from './example.js';
console.log(Object.keys(mod)); // ['version', 'greet', 'default']

1. 模塊對象的特點：

2. 示例：live binding 的效果

// counter.js
export let count = 0;
export function inc() {
  count++;
}

// main.js
import * as counter from './counter.js';
console.log(counter.count); // 0
counter.inc();
console.log(counter.count); // 1（綁定生效）

四、如何遍歷模塊對象

你可以使用 Object.keys 或 Object.entries 遍歷模塊對象的所有導出成員：

import * as mod from './example.js';
for (const key of Object.keys(mod)) {
  console.log(`${key}:`, mod[key]);
}

或：

Object.entries(mod).forEach(([key, value]) => {
  console.log(`${key}:`, value);
});

輸出：

version: 1.0.0
greet: [Function: greet]
default: default-export

五、import.meta：模塊元信息對象

1. import.meta 是什么？

它是一個由運行時自動填充的模塊元信息對象，包含當前模塊的上下文信息。

console.log(import.meta.url); // 模塊的絕對 URL

輸出示例：

file:///Users/mlight/project/main.js

2. 瀏覽器與 Node.js 中的差異：

// Vite 自動注入
if (import.meta.env.DEV) {
  console.log('開發(fā)模式');
}

3. 與模塊對象的區(qū)別：

六、動態(tài)導入與頂層 await

1. import()：動態(tài)導入模塊

import('./math.js').then(mod => {
  console.log(mod.sum(2, 3));
});

特點：

• 返回 Promise；
• 可用于懶加載、按需加載、路由分包；
• 可用于條件導入模塊。

2. 頂層 await

在模塊中允許在頂層使用 await（無需函數(shù)封裝）：

const response = await fetch('/api/data');
const data = await response.json();
console.log(data);

?? 僅適用于 ESM 模塊，不支持普通 <script> 腳本。

七、模塊循環(huán)引用（Circular Import）

ES6 模塊支持循環(huán)引用，但不建議過度依賴。

// a.js
import { b } from './b.js';
export const a = 'A';
console.log('from b:', b);
// b.js
import { a } from './a.js';
export const b = 'B';
console.log('from a:', a);

循環(huán)引用的變量可能為 undefined，ESM 會保證模塊執(zhí)行順序正確，但需謹慎使用。

八、綜合實踐示例

// math.js
export const PI = 3.14;
export const add = (a, b) => a + b;
export default 'Math Module';

// main.js
import * as math from './math.js';
console.log('模塊對象屬性：');
for (const [k, v] of Object.entries(math)) {
  console.log(`  ${k}:`, v);
}
console.log('\nimport.meta 信息：');
console.log(`  當前模塊 URL: ${import.meta.url}`);

九、總結(jié)

轉(zhuǎn)自https://juejin.cn/post/7532425297150427171