如何取得導入時「匯出預設」的回傳值？

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());

預設匯出也可以這樣使用-
這很有用，因為我們可以使用任何名稱來娛樂，因為它是帶有名稱的預設導出（因此我們可以記住該名稱）並使用任何名稱匯入。

// 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());