Javascript/Typescript：导出单个函数或 const 类有什么区别？

Question

我正在 VueJs、Typescript 和 WebPack 中开发一个 Web 应用程序，我对如何管理/拆分功能组（实用程序和服务）感到有些困惑。

我在 GitHub 的各种项目中看到一些函数是直接从文件 ex 中声明和导出的：

实用程序.ts

export function Sum(a:number, b:number):number{
    return a+b;
}

这可以与导入一起使用：

import {Sum} from "./utilities.ts"

let result = Sum(5,6);

另一个常见的解决方案是声明一个 const 类：

otherUtilities.ts

export const OtherUtilities = {
    Sum(a:number, b:number) : number => {
        return a+b;
    },
    
    Hello() : string => {
        return "Hello";
    }
}

并导入为：

import {OtherUtilities} from "./otherUtilities.ts"

let result = OtherUtilities.Sum(5,6);

有什么区别？

过去，JS 存在名称冲突问题，但现在通过 Loaders 的导出/导入技术，这个问题应该已经过时了，对吧？

谢谢

Answer 1

这个对象：

export const OtherUtilities = {
    Sum(a:number, b:number) : number => {
        return a+b;
    },

    Hello() : string => {
        return "Hello";
    }
}

包含两个完全不相关的功能。它们不需要共享this上下文，彼此不认识，并且可以完美地作为两个单独的函数导出，即使在两个单独的模块中。它们可以属于同一个对象，但没有充分的理由这样做。

另一方面，如果您将它们导出为单独的实体：

export function sum()...
export function hello()...

它们是可摇晃的。如果您的应用程序碰巧只有 import Hello()，它们Sum可以从包中删除。

现在，使用第二种策略，您更有可能遇到命名冲突。您可以使用as关键字阻止它们：

 import {Sum} from 'one';
 import {Sum as myCustomSum} from 'two';

除了摇树之外，我认为一种风格或另一种风格之间没有太大区别。您可以使用 ECMAScript 模块导出任何内容，可以是函数、字符串、数字或任何其他类型的原语、数组或对象。这在很大程度上取决于您和您团队的代码约定。

一些库曾经导出属于一个大实用程序对象的独立函数，但后来改变了样式并切换到独立命名导出，正是为了启用树摇动（有时，只有独立项目会这样做，例如lodash-es）。