在 ES6 模块中导入同名函数的最佳方法

Question

我需要从 ES6 中的两个不同模块导入同名函数。我应该在导入时使用 as 别名重命名每个函数还是使用 Reveal Module Pattern？或者也许有更好的方法？

带别名的解决方案

projects.module.js

    function init() {
      console.log("projects module initiated!");
    }

    export { init };

projects_steps.module.js

    function init() {
      console.log("project steps module initiated!");
    }

    export { init };

index.js

    import { init as projectsInit } from "./projects.module.js";
    import { init as projectStepsInit } from "./project_steps.module.js";

    projectsInit();
    projectStepsInit();

显示模块模式的解决方案

projects.module.js

var projects = (() => {
  function init() {
    console.log("projects module initiated!");
  }

  return {
    init: init
  };
})();

export { projects };

project_steps.module.js

var projectSteps = (() => {
  function init() {
    console.log("project steps module initiated!");
  }

  return {
    init: init
  };
})();
export { projectSteps };

index.js

import { projects } from "./projects.module.js";
import { projectSteps } from "./project_steps.module.js";

projects.init();
projectSteps.init();

补充一下，以后会在这些模块中加入更多的功能。

提前致谢！

Answer 1

Revealing Module Pattern 是一种早于 ES6 模块的旧模式。它的目的是在私有函数范围内隐藏 "module" 的细节并防止全局范围的污染。

对于 ES6 模块，这是完全没有必要的。您的问题实际上是关于导出单个函数与单个接口的优缺点。

考虑改用以下方法：

projects.module.js

function init() {
  console.log("projects module initiated!");
}

function foo() {
}

// export an object as the default, which will act as your interface
export default { init, foo };

projects_steps.module.js

function init() {
  console.log("project steps module initiated!");
}

function foo() {
}

// you can still export individual functions where it makes sense
export function projectStepsThing() {
}

// if you don't want to export a default, then just set an object like so:
export const projectSteps = { init, foo };

index.js

import projects from "./projects.module.js";
import { projectSteps, projectStepsThing } from "./project_steps.module.js";

projects.init();
projects.foo();
projectSteps.init();
projectSteps.foo();

projectStepsThing();

在 ES6 模块中导入同名函数的最佳方法

best aproach for importing same name functions in ES6 modules

javascript

es6-modules

带别名的解决方案

显示模块模式的解决方案