当前位置:实例文章 » HTML/CSS实例» [文章]ES6 模块编程(新思路方便复习笔记)

ES6 模块编程(新思路方便复习笔记)

发布人:shili8 发布时间:2025-03-07 02:12 阅读次数:0

**ES6 模块编程**

模块是 JavaScript 的一个基本概念,它允许我们将代码组织成独立的文件,避免全局变量冲突等问题。ES6 引入了新的模块系统,使得开发更加方便和高效。

###1. 模块导入在 ES6 中,我们可以使用 `import` 关键字来导入其他模块中的内容。

javascript// myModule.jsexport function add(a, b) {
 return a + b;
}

export const PI =3.14;

// main.jsimport { add, PI } from './myModule.js';

console.log(add(2,3)); // 输出:5console.log(PI); // 输出:3.14


###2. 模块导出模块导出是将内容暴露给其他模块使用的关键步骤。

javascript// myModule.jsexport function add(a, b) {
 return a + b;
}

export const PI =3.14;

// main.jsimport { add, PI } from './myModule.js';

console.log(add(2,3)); // 输出:5console.log(PI); // 输出:3.14


###3. 模块重命名有时,我们需要将导入的内容重命名,以避免名称冲突。

javascript// myModule.jsexport function add(a, b) {
 return a + b;
}

export const PI =3.14;

// main.jsimport { add as myAdd, PI } from './myModule.js';

console.log(myAdd(2,3)); // 输出:5console.log(PI); // 输出:3.14


###4. 模块默认导出如果我们只需要从一个模块中导入一个内容,可以使用 `default` 关键字。

javascript// myModule.jsexport default function add(a, b) {
 return a + b;
}

// main.jsimport add from './myModule.js';

console.log(add(2,3)); // 输出:5


###5. 模块导入所有内容有时,我们需要从一个模块中导入所有内容,可以使用 `*` 符号。

javascript// myModule.jsexport function add(a, b) {
 return a + b;
}

export const PI =3.14;

// main.jsimport * as myModule from './myModule.js';

console.log(myModule.add(2,3)); // 输出:5console.log(myModule.PI); // 输出:3.14


###6. 模块导入子模块如果我们有一个大型的项目,可能需要将代码组织成多个子模块。

javascript// myModule.jsexport function add(a, b) {
 return a + b;
}

export const PI =3.14;

// subModule.jsimport { add } from './myModule.js';

export function multiply(a, b) {
 return a * b;
}

// main.jsimport { add, PI } from './myModule.js';
import { multiply } from './subModule.js';

console.log(add(2,3)); // 输出:5console.log(multiply(4,5)); // 输出:20


###7. 模块导入子模块中的内容如果我们需要从一个子模块中导入另一个子模块中的内容,可以使用 `import` 关键字。

javascript// myModule.jsexport function add(a, b) {
 return a + b;
}

export const PI =3.14;

// subModule.jsimport { add } from './myModule.js';

export function multiply(a, b) {
 return a * b;
}

// grandChildModule.jsimport { multiply } from './subModule.js';

export function divide(a, b) {
 return a / b;
}

// main.jsimport { add, PI } from './myModule.js';
import { multiply } from './subModule.js';
import { divide } from './grandChildModule.js';

console.log(add(2,3)); // 输出:5console.log(multiply(4,5)); // 输出:20console.log(divide(10,2)); // 输出:5


###8. 模块导入子模块中的内容并重命名有时,我们需要从一个子模块中导入另一个子模块中的内容,并将其重命名。

javascript// myModule.jsexport function add(a, b) {
 return a + b;
}

export const PI =3.14;

// subModule.jsimport { add } from './myModule.js';

export function multiply(a, b) {
 return a * b;
}

// grandChildModule.jsimport { multiply as myMultiply } from './subModule.js';

export function divide(a, b) {
 return a / b;
}

// main.jsimport { add, PI } from './myModule.js';
import { myMultiply } from './grandChildModule.js';

console.log(add(2,3)); // 输出:5console.log(myMultiply(4,5)); // 输出:20


###9. 模块导入子模块中的内容并重命名为默认导出有时,我们需要从一个子模块中导入另一个子模块中的内容,并将其重命名为默认导出。

javascript// myModule.jsexport function add(a, b) {
 return a + b;
}

export const PI =3.14;

// subModule.jsimport { add } from './myModule.js';

export function multiply(a, b) {
 return a * b;
}

// grandChildModule.jsimport { multiply as myMultiply } from './subModule.js';
export default myMultiply;

// main.jsimport { add, PI } from './myModule.js';
import myMultiply from './grandChildModule.js';

console.log(add(2,3)); // 输出:5console.log(myMultiply(4,5)); // 输出:20


###10. 模块导入子模块中的内容并重命名为默认导出并使用有时,我们需要从一个子模块中导入另一个子模块中的内容,并将其重命名为默认导出,并使用。

javascript// myModule.jsexport function add(a, b) {
 return a + b;
}

export const PI =3.14;

// subModule.jsimport { add } from './myModule.js';

export function multiply(a, b) {
 return a * b;
}

// grandChildModule.jsimport { multiply as myMultiply } from './subModule.js';
export default myMultiply;

// main.jsimport { add, PI } from './myModule.js';
import myMultiply from './grandChildModule.js';

console.log(add(2,3)); // 输出:5console.log(myMultiply(4,5)); // 输出:20


以上就是关于 ES6 模块编程的笔记,希望对你有所帮助。

其他信息

其他资源

Top