JavaScript模块化开发能够将代码分割成可复用、易维护的片段,有效封装代码并实现不同文件或代码段间的代码共享。
JavaScript模块是一个JS文件,它通过export导出代码(如变量、函数、类),并可被其他模块通过import导入使用。
ES6 (ES2015)原生支持模块化,现已被主流浏览器和Node.js广泛支持。
使用export关键字导出代码。
立即学习“Java免费学习笔记(深入)”;
// math.js export const add = (a, b) => a + b; export const subtract = (a, b) => a - b;
// greet.js export default function greet(name) { console.log(`Hello, ${name}!`); }
使用import关键字导入代码。
import { add, subtract } from './math.js'; console.log(add(5, 3)); // 8 console.log(subtract(5, 3)); // 2
import greet from './greet.js'; greet('Alice'); // Hello, Alice!
import { add as addition } from './math.js'; console.log(addition(5, 3)); // 8
import * as mathOperations from './math.js'; console.log(mathOperations.add(5, 3)); // 8 console.log(mathOperations.subtract(5, 3)); // 2
动态导入允许按需加载模块,提高性能。
import('./math.js').then((mathOperations) => { console.log(mathOperations.add(5, 3)); // 8 });
async function loadModule() { const mathOperations = await import('./math.js'); console.log(mathOperations.add(5, 3)); // 8 } loadModule();
Node.js传统上使用CommonJS模块系统,使用require导入模块,module.exports导出模块。
// math.js module.exports = { add: (a, b) => a + b, subtract: (a, b) => a - b, };
const mathOperations = require('./math.js'); console.log(mathOperations.add(5, 3)); // 8
特性 | ES6模块 | CommonJS |
---|---|---|
语法 | import/export | require/module.exports |
加载方式 | 静态 | 动态 |
使用场景 | 现代JavaScript (浏览器, Node.js) | 主要用于Node.js |
默认导出支持 | 支持 | 不直接支持 |
使用模块时,Webpack、Rollup或Parcel等打包器可将多个模块打包成单个文件用于部署。
npm install webpack webpack-cli --save-dev
export default function calculate() { ... }
JavaScript模块对于构建可扩展、易维护且高效的应用至关重要。
作者:Abhay Singh Kathayat
全栈开发工程师,精通前端和后端技术,擅长使用多种编程语言和框架构建高效、可扩展且用户友好的应用程序。
联系邮箱:kaashshorts28@gmail.com
以上就是了解 JavaScript 模块:轻松导出和导入代码的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号