使用 ES 模块增强 JavaScript 代码：导出、导入等

php中文网 2024-10-15 11:18:24

javascript 模块是一种组织和重用 javascript 代码的方法。使用模块可以将代码分解为更小的、可管理的部分，然后可以根据需要将其导入并在应用程序的其他部分中使用。这种模块化方法有助于维护干净的代码库，使其更易于调试，并增强代码的可重用性。

es 模块与 commonjs

javascript 生态系统中有不同的模块系统。 es 模块 (esm) 是 ecmascript 规范中的标准，主要在浏览器中使用，并且越来越多地在 node.js 中得到支持。 commonjs 是传统上在 node.js 中使用的另一个模块系统。

es 模块 (esm)

es模块（esm）是javascript中的标准化模块系统，在ecmascript 2015（es6）中引入。它们通过启用不同文件之间的函数、对象和原语的导入和导出来实现更好的代码组织和可重用性。该模块系统在现代 javascript 环境中得到广泛支持，包括浏览器和 node.js。

导出和导入

立即学习“Java免费学习笔记（深入）”；

export 关键字标记了应该可以从当前模块外部访问的变量和函数，从而允许它们在应用程序的其他部分中重用。 import 关键字允许从其他模块导入这些功能，从而实现模块化编程和代码重用。

命名导出允许从一个模块导出多个项目。每个项目导入时必须使用与导出时相同的名称。

//modules.js
const greet = () =&gt; {
   console.log('hello world');
};
export { greet};

导入命名导出时，需要使用与导出相同的名称。

import { greet } from './module.js';
greet(); // hello, world!

默认导出允许每个模块有一个默认导出。该项目可以用任何名称导入。

//modules.js
const greet = () =&gt; {
   console.log('hello world');
};
export default greet;

导入时默认导出，可以使用任意名称。

import message  from './module.js';
message(); // hello, world!

在 html 中使用模块

在浏览器中使用模块时，您需要将它们包含在 html 文件中。您在 <script> 标签中使用 type="module" 属性。<br> </script>




   <meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js:modules</title><script type="module" src="main.js"></script>

浏览器支持

现代浏览器原生支持 javascript 模块。这包括 chrome、firefox、safari、edge 和 opera。但是，internet explorer 等较旧的浏览器不支持模块。对于这些，您可能需要使用像 webpack 这样的捆绑器或像 babel 这样的转译器。

在 node.js 中使用模块
要在 node.js 中使用 es 模块，可以使用 .mjs 文件扩展名或在 package.json 文件中设置 "type": "module"。

// package.json
{
 "type": "module"
}

导入别名

javascript 模块中的别名允许您使用不同的名称导入和导出功能。这对于避免命名冲突或在导入它们的模块的上下文中提供更具描述性的名称非常有用。

// math.js
export function add(a, b) {
   return a + b;
}
 export function subtract(a, b) {
   return a - b;
}

您可以使用别名导入这些具有不同名称的函数：

// main.js
import { add as sum, subtract as diff } from './math.js';


console.log(sum(2, 3)); // 5
console.log(diff(5, 3)); // 2

将整个模块导入为别名

您可以将整个模块作为单个别名导入，这样您就可以访问命名空间下的所有导出。

// main.js
import * as math from './math.js';


console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 3)); // 2

动态导入

您还可以使用 import() 函数动态导入模块，该函数返回一个承诺。这对于代码分割和延迟加载很有用。

// main.js
const loadmodule = async () =&gt; {
   try {
     const module = await import('./math.js');
     console.log(module.add(2, 3));
   } catch (error) {
     console.error('loading error:', error);
   }
 };


 loadmodule();

在这个例子中，math.js 模块是在调用 loadmodule 函数时动态加载的。

commonjs (cjs)

commonjs 是一个主要用于 node.js 的模块系统。它是 es modules 标准化之前的默认模块系统，至今仍在许多 node.js 项目中广泛使用。它使用 require() 导入模块和 module.exports 或导出以从模块导出功能。

在commonjs中，module.exports和exports都用于从模块导出值。 exports 本质上是 module.exports 的简写，允许使用其中任何一个。但是，通常建议一致使用 module.exports 以避免潜在的混乱或意外行为。

在此示例中，module.exports 被分配了一个函数，因此 app.js 中的 require 调用返回该函数。

// greet.js
module.exports = function(name) {
   return `hello, ${name}!`;
};

// app.js
const greet = require('./greet');
console.log(greet('alice')); // 'hello, alice!'

在这个例子中，exports 用于向 module.exports 添加属性。 app.js 中的 require 调用返回一个带有加法和减法函数的对象。

// math.js
exports.add = function(a, b) {
   return a + b;
};
exports.subtract = function(a, b) {
   return a - b;
};

// app.js
const math = require('./math');
console.log(math.add(2, 3)); // 5
console.log(math.subtract(5, 2)); // 3

javascript 模块提供了许多好处，可以改善代码的组织、可维护性和性能。

可重复使用性
模块允许您编写可重用的代码片段，这些代码片段可以在应用程序的不同部分甚至不同的项目中导入和使用。
可维护性
通过将代码分解为更小的、独立的模块，您可以更有效地管理和维护代码库。这使得更新、重构和调试各个模块变得更加容易，而不会影响整个应用程序。
代码分割
模块启用代码分割，允许您在需要时仅加载必要的代码，从而缩短初始加载时间并提高整体性能。
改进测试
模块化代码更容易测试，因为您可以单独测试各个模块。这会带来更可靠和可维护的测试。
摇树
像 webpack 和 rollup 这样的现代模块捆绑器可以执行树摇动，这是一种从最终捆绑中删除未使用的代码的技术，从而产生更小、更高效的代码。

结论

在 javascript 开发中，es modules 的引入标志着传统 commonjs 模块系统的重大转变。 es 模块提供了一种标准化且有效的方法来管理依赖关系并提高可维护性。导出和导入语法提供了一种清晰简洁的方式来定义和使用模块，从而促进代码库更好的组织和可读性。

以上就是使用 ES 模块增强 JavaScript 代码：导出、导入等的详细内容，更多请关注php中文网其它相关文章！

本文地址： http://www.ipsmc.com/web/3955.html