微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

从其他模块的工厂函数中调用函数不起作用

分类：编程问答

如何解决从其他模块的工厂函数中调用函数不起作用

我有两个模块：boardobject和displayController ...以及一个工厂函数：playerFactory ...我想用playerFactory的函数更新数组，但是出现了不是函数的错误。

const playerFactory = () => {
    const playTurn = (event) => {
        const id = boardobject.cells.indexOf(event.target);
        boardobject.boardArray[id] = currentPlayer;
        boardobject.render();
        return id;
    };

    return { playTurn   };
};

const displayController = (() => {
    const playerOne = 'X';
    const playerTwo = 'O'
    const gameBoard = document.querySelector(".game_board");
    let currentPlayer = playerOne;
    
    const switchPlayer = () => {
        currentPlayer = currentPlayer === playerOne ? playerTwo : playerOne;
    }
    
    gameBoard.addEventListener("click",(event) => {
      if (event.target.classList.contains("cell")) {
        if (event.target.textContent === "") {
          event.target.textContent = currentPlayer;
          switchPlayer();
          //   const id = boardobject.cells.indexOf(event.target);
          //   boardobject.boardArray[id] = currentPlayer;
          //   boardobject.render();
          currentPlayer.playTurn(event.target);
        }
      }
    });
})();

可能是什么问题？ 如果有人想查看所有代码，这也可能会有所帮助：

// player factory...
const playerFactory = () => {
  const playTurn = (event) => {
    const id = boardobject.cells.indexOf(event.target);
    boardobject.boardArray[id] = currentPlayer;
    boardobject.render();
  };

  return {
    playTurn
  };
};

// Gameboard object...
const boardobject = (() => {
  let boardArray = ['','',''];

  const cells = Array.from(document.querySelectorAll(".cell"));
  // displays the content of the boardArray...
  const render = () => {
    boardArray.forEach((mark,idx) => {
      cells[idx].textContent = boardArray[idx];
    });
  };

  return {
    boardArray,render,cells
  };
})();

// display controller ...
const displayController = (() => {
  const playerOne = 'X';
  const playerTwo = 'O'
  const gameBoard = document.querySelector(".game_board");
  let currentPlayer = playerOne;

  const switchPlayer = () => {
    currentPlayer = currentPlayer === playerOne ? playerTwo : playerOne;
  }

  gameBoard.addEventListener("click",(event) => {
    if (event.target.classList.contains("cell")) {
      if (event.target.textContent === "") {
        event.target.textContent = currentPlayer;
        switchPlayer();
        //   const id = boardobject.cells.indexOf(event.target);
        //   boardobject.boardArray[id] = currentPlayer;
        //   boardobject.render();

        ////////
        currentPlayer.playTurn(event); // this is the problem,dunno why?!?!?!?
      }
    }
  });
})();
*,*::before,*::after {
  Box-sizing: border-Box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto',sans-serif;
  background: #BEE9E8;
}

header {
  background: #1B4965;
  text-align: center;
  color: #62B6CB;
  padding-top: 20px;
  padding-bottom: 10px;
}

.game_board {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-rows: repeat(3,1fr);
  grid-template-columns: repeat(3,1fr);
  margin: 0 auto;
  margin-top: 40px;
  border: 5px solid #1B4965;
  border-radius: 10px;
}

.cell {
  border: 5px solid #1B4965;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #62b6cb;
  color: #1b4965;
  font-size: 4em;
  font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Tic Tac Toe</title>
  <link rel="stylesheet" href="./style.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <h1>Tic - Tac - Toe<br>The Odin Project</h1>
  </header>


  <div class="game_board">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>




  <script src="./index.js" defer></script>
</body>

</html>

解决方法

currentPlayer只是一个字符串X或O，没有playTurn()方法。

您需要调用playerFactory()来获取对象。在下面的代码中，我使用

const player = playerFactory();

我不太确定为什么首先需要这个对象。它不保持任何状态。但这也许是您打算以后添加的东西。

此外，playTurn()需要传递currentPlayer字符串，以便可以将其分配给grid元素。它是gameController中的局部变量，因此无法直接访问它。

// player factory...
const playerFactory = () => {
  const playTurn = (event,currentPlayer) => {
    const id = boardObject.cells.indexOf(event.target);
    boardObject.boardArray[id] = currentPlayer;
    boardObject.render();
  };

  return {
    playTurn
  };
};

// Gameboard object...
const boardObject = (() => {
  let boardArray = ['','',''];

  const cells = Array.from(document.querySelectorAll(".cell"));
  // displays the content of the boardArray...
  const render = () => {
    boardArray.forEach((mark,idx) => {
      cells[idx].textContent = boardArray[idx];
    });
  };

  return {
    boardArray,render,cells
  };
})();

// Display controller ...
const displayController = (() => {
  const player = playerFactory();
  const playerOne = 'X';
  const playerTwo = 'O'
  const gameBoard = document.querySelector(".game_board");
  let currentPlayer = playerOne;

  const switchPlayer = () => {
    currentPlayer = currentPlayer === playerOne ? playerTwo : playerOne;
  }

  gameBoard.addEventListener("click",(event) => {
    if (event.target.classList.contains("cell")) {
      if (event.target.textContent === "") {
        event.target.textContent = currentPlayer;
        switchPlayer();
        //   const id = boardObject.cells.indexOf(event.target);
        //   boardObject.boardArray[id] = currentPlayer;
        //   boardObject.render();

        ////////
        player.playTurn(event,currentPlayer);
      }
    }
  });
})();
*,*::before,*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Roboto',sans-serif;
  background: #BEE9E8;
}

header {
  background: #1B4965;
  text-align: center;
  color: #62B6CB;
  padding-top: 20px;
  padding-bottom: 10px;
}

.game_board {
  display: grid;
  width: 500px;
  height: 500px;
  grid-template-rows: repeat(3,1fr);
  grid-template-columns: repeat(3,1fr);
  margin: 0 auto;
  margin-top: 40px;
  border: 5px solid #1B4965;
  border-radius: 10px;
}

.cell {
  border: 5px solid #1B4965;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #62b6cb;
  color: #1b4965;
  font-size: 4em;
  font-weight: bold;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Tic Tac Toe</title>
  <link rel="stylesheet" href="./style.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
</head>

<body>
  <header>
    <h1>Tic - Tac - Toe<br>The Odin Project</h1>
  </header>


  <div class="game_board">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>




  <script src="./index.js" defer></script>
</body>

</html>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot