javascript模块化如何实现_如何使用import和export？

JavaScript模块化通过import和export实现代码拆分、复用与作用域隔离，核心是按需导出引入以避免全局污染；支持命名导出（多个，名字需一致）、默认导出（每个模块至多一个，导入名可自定义）及混合导入；import/export必须在顶层，浏览器需script加type="module"，Node.js需.mjs或package.json设"type": "module"。

JavaScript模块化通过import和export实现代码的拆分、复用与作用域隔离，核心是把功能按需导出、按需引入，避免全局污染和依赖混乱。

export：怎么把东西“亮出来”？

一个模块（.js文件）默认不对外暴露任何内容，必须显式用export声明哪些变量、函数或类可以被其他模块使用。

• 命名导出（Named Export）：可导出多个，名字必须和导入时一致
  math.js
  

  export const PI = 3.14;<br>export function add(a, b) { return a + b; }<br>export class Calculator { ... }

  登录后复制
• 默认导出（Default Export）：每个模块最多一个，导入时可自定义名字
  utils.js
  export default function debounce(fn, delay) { ... }
• 混合导出也允许，但默认导出不能用export default const x = 1这种写法，得先声明再导出，或用export default后接表达式

import：怎么把东西“拿进来”？

导入语法要和导出方式匹配，路径必须是相对或绝对的（如./math.js），不能是纯模块名（Node.js里除外，需配置）。

• 导入命名导出：用大括号，名字必须完全一致
  import { PI, add, Calculator } from './math.js';
• 导入默认导出：不用大括号，名字任意
  

  import debounce from './utils.js'; // ✅<br>import myDebounce from './utils.js'; // ✅ 也可以

  登录后复制
• 同时导入默认 + 命名：
  import debounce, { PI, add } from './mathAndUtils.js';
• 整体导入（namespace import）：把所有命名导出挂在一个对象下
  

  import * as math from './math.js';<br>console.log(math.PI, math.add(2, 3));

  登录后复制

常见注意事项

• import和export只能出现在模块顶层，不能在if或函数里——它们是编译时静态解析的
• 浏览器中使用模块，<script></script>标签必须加type="module"，否则会报错
  
• Node.js默认不支持ES模块，需把文件后缀改为.mjs，或在package.json中设置"type": "module"
• 路径别名（如@/components）不是原生支持的，需要构建工具（Vite、Webpack等）配置别名解析

一个最小可运行例子

utils.js

export function greet(name) { return `Hello, ${name}`; }<br>export default function log(msg) { console.log('[LOG]', msg); }

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

云模块网站管理系统3.1.03

云模块_YunMOK网站管理系统采用PHP+MYSQL为编程语言，搭载自主研发的模块化引擎驱动技术，实现可视化拖拽无技术创建并管理网站！如你所想，无限可能，支持创建任何网站：企业、商城、O2O、门户、论坛、人才等一块儿搞定！永久免费授权，包括商业用途； 默认内置三套免费模板。PC网站+手机网站+适配微信+文章管理+产品管理+SEO优化+组件扩展+NEW Login界面.....目测已经遥遥领先..

0

查看详情

main.js

import log, { greet } from './utils.js';<br>log(greet('Alice'));

在HTML中引入：

基本上就这些。不复杂但容易忽略细节，比如路径写错、大小写不一致、漏掉type="module"——跑不通时优先检查这几处。

以上就是javascript模块化如何实现_如何使用import和export？的详细内容，更多请关注php中文网其它相关文章！