如何从导入中获取“导出默认值”的返回值？

Question

简而言之，我有一个js文件，默认导出返回一个对象。

// x.js
export default ()=>({
  text: 'text'
})

我想将它导入另一个js文件并将它与其数据合并（有点扩展它）。 现在我这样做：

// y.js
import x from './x.js';
const obj = x()
export default ()=>({
  ...obj,
  text2: "text2"
})

它正在工作但不干净。 有没有更简单的方法来做到这一点？

Answer 1

从“我想使用干净的方法” ，我假设，一种易于理解的方法。 因此，以下方法可能有用 -

1.默认导出-
这对于仅导出单个对象、函数或变量很有用。 在导入的时候，我们可以使用任意名称来导入。

// x.js
export default function xFunc() {
    return { text: "text" };
}

//y.js
import xFunc from "./x.js";
export default function yFunc() {
    return {
        ...xFunc(),
        text2: "text2",
    };
}

// import y in any file
import yFunc from "./y";
console.log(yFunc());

Default Exports也可以这样使用——
这很有用，因为我们可以使用任何名称来取乐，因为它是一个带有名称的默认导出（这样我们可以记住名称）并使用任何名称导入。

// x.js
function xFunc() {
  return { text: "text" };
}
export { xFunc as default };

// y.js
import anyName from "./x.js";
function yFunc() {
  return {
    ...anyName(),
    text2: "text2",
  };
}
export { yFunc as default };

// import y in any file
import anyName from "./y";
console.log(anyName());

2. 命名导出（推荐）-
这对于导出多个值很有用。 在导入过程中，必须使用相同的名称，以避免混淆导出名称和导入名称。

// x.js
export const xFunc = () => { text: "text" };

//y.js
import { xFunc } from "./x.js";
export const yFunc = () => {
  return {
    ...xFunc(),
    text2: "text2",
  };
};

// import y in any file
import { yFunc } from "./y";
console.log(yFunc());

编辑 -

命名导出也可以这样使用（不使用 const 和箭头函数）

// x.js
function xFunc() {
  return { text: "text" };
}
export { xFunc };

//y.js
import { xFunc } from "./x.js";
function yFunc() {
  return {
    ...xFunc(),
    text2: "text2",
  };
}
export { yFunc };

// import y in any file
import { yFunc } from "./y";
console.log(yFunc());