如何在不使用全局變量的情況下跟蹤正在變化的游戲數據？ [網絡包]

Question

我有一個簡單的 Rock Paper Scissors 游戲，我使用全局變量來跟蹤游戲數據，例如玩家得分、計算機得分、游戲的 state（正在進行 = true/false）等。

我最近學習了如何使用 webpack，所以我將我的代碼捆綁到模塊中以使用這種格式進行練習，現在我無法訪問我在 dist/index.js 文件中聲明的變量或對象。

我想我明白為什么我無法訪問它們，但我的問題是：我應該如何更新游戲的 state 而不會將該數據存儲在 memory 的任何位置？ 還是我錯了，這些數據實際上是否存儲在某個地方？ 如果你能給我一個關於如何實現這一點的高級概述，或者如果有一些我可以查看使用捆綁的示例代碼，那就太好了。

抱歉，如果這是一個新手問題，我用谷歌搜索了幾個小時，但找不到我想要的東西。

Answer 1

有很多方法可以做到這一點。 一種方法是使用一個模塊來管理整個項目需要訪問的 state。 你可以有：

// state.js
let state = { playerWinCount: 0 }; // you can add desired properties here
export const getState = () => state;
export const setState = (newState) => {
  state = newState;
};

每當您需要設置某些內容時，要么導入並調用setState ，要么調用getState並改變 state。

export const handlePlayerWin = () => {
  const state = getState();
  setState({ ...state, playerWinCount: state.playerWinCount + 1 });
};
// or
export const handlePlayerWin = () => {
  const state = getState();
  state.playerWinCount++;
};

另一種方法是，從您的入口點附近的某個地方，不斷傳遞在您的應用程序模塊之間共享的 object。

// index.js
const state = { playerWinCount: 0 };
doSomething(state);
doSomethingElse(state);

然后只需訪問這些函數中的 state 參數，並在需要時繼續將其傳遞給其他函數。

const doSomething = (state) => {
  // ...
  state.playerWinCount++;
};

const doSomethingElse = (state) => {
  // ...
  console.log(state.playerWinCount);
};

另一種方法（我不推薦）是顯式創建一個全局變量：

// index.js
window.state = { playerWinCount: 0 };

// in other modules, you can now reference window.state

但這違背了使用模塊的目的。