export/import

合集 - 自说自化(31)

1.2024.1.112024-01-112.2024.1.102024-01-103.2024.1.122024-01-124.2024.1.132024-01-135.2024.1.152024-01-156.2024.1.182024-01-197.2024.1.192024-01-198.40 个拓展思维的概念/一位 44 岁老人的人生经验2024-01-229.bigfrontend/usehooks2024-01-2310.React 面试题/Hooks CheatSheet2024-01-2411.zustand/useWhyDidYouUpdate/HTTP 缓存2024-01-2512.react tips/webpack热更新原理/webpack优化性能/超级蔬菜配比2024-01-3013.延迟Promise/单项目多npm版本/webpack好处/webpack5构建速度2024-02-0214.钝感力/孤独力/antd低代码2024-02-0615.ReadableStream/TransformStream/HMR/软件设计哲学/SSR 条件渲染/CSS.escape/Copilot2024-02-2016.写少一点/ARCHITECTURE/JavaScript类型转换/Logitech Options一直转圈2024-03-0117.prompt生成器/为什么需要react服务器组件/建议2024-03-2318.ts using/核心技能/三个我/日志/如何做好工作/多写/写简单的代码2024-04-0319.tailwindcss/React 性能优化2024-04-1220.一次性初始化/重新挂载/便捷类型/优化技巧2024-04-1921.DoD2024-04-1922.三角不等式/react ts 速查表2024-04-1923.delete/声明语句/赋值操作2024-04-2224.在macOS上管理MongoDB：服务和手动后台进程2024-04-22

25.export/import2024-04-25

26.深入解析JavaScript的块级作用域和for循环的性能考量2024-04-2527.常用术语2024-05-0728.停车场的投币器/return/throw/动画方案/疑难杂症/GetValue/Empty/引用解析与执行顺序/+ 和 - /双点语法2024-06-0629.new/类/null/+/PrimitiveValue/valueOf/toString/环境/HTML 脚本元素属性2024-06-0730.实时字幕/Suspense/ref的妙用/MutationObserver2024-06-2131.zustand Auto Generating Selectors/ts-pattern/swr/TypeScript在monorepo项目中实现即时更新/monorepo docker/turb 使用2024-07-05

收起

JavaScript 模块的导出与导入：静态特性解析

在这篇博客中，我们将探讨 JavaScript 中的 export 和 import 语句的使用，这些语句如何静态地处理代码，以及这种处理方式带来的优势。此外，我们也会探讨不同的函数声明方式，包括匿名函数和具名函数表达式的使用场景和它们的可见性区别。

静态导出和导入

JavaScript 的模块系统允许开发者通过多种方式导出和导入代码，例如变量、函数、类等。这些功能通过 export 和 import 语句实现，并且这些语句是在编译时处理的，而非运行时。

好处

1. 优化：编译器可以在编译阶段分析模块结构，进行更有效的代码优化，如摇树优化（tree shaking），即移除未被使用的代码。
2. 快速解析：由于导入和导出的绑定在编译时已经确定，加载模块时的依赖解析可以更迅速，减少运行时解析带来的性能开销。
3. 工具友好：打包工具、类型检查器等可以利用这些静态信息更准确地分析代码结构，进行代码检查和捆绑。

示例

// 导出变量
export let name = 'OpenAI';
export const pi = 3.14159;
export var age = 25;

// 导出函数
export function multiply(x, y) {
  return x * y;
}

// 导出类
export class Rectangle {}

// 重命名导出
export { name as Company };

// 默认导出和聚合导出
export default function() {
  console.log("Default export function");
}
export * from './moduleA'; // 重新导出 moduleA 中的所有成员
export { default as User } from './user.js'; // 重新导出并重命名

函数的声明方式

JavaScript 提供了匿名函数和具名函数表达式两种声明方式，适用于不同的使用场景。

匿名函数表达式

let x = function() {
    console.log("Hello, I am anonymous!");
};

具名函数表达式

var x1 = function x2() {
    if (typeof x2 === 'function') {
        console.log('x2 is visible inside the function.');
    }
};

x1(); // 输出 "x2 is visible inside the function."
console.log(typeof x2); // 输出 "undefined"，因为 x2 只在函数内部可见

区别和用途

• 匿名函数：通常用于一次性的功能实现，如立即调用的函数表达式（IIFE）或事件监听器。
• 具名函数表达式：更适用于需要自引用的场景，如递归或当函数需要在运行时被标识时。