Question

我创建了一个模块，但是该模块不会在页面中自动呈现，我必须在控制台中手动调用Board.renderBoard（）才能显示Board。我在做什么错了？

这是完整的代码：

const Board = (() => {
  const board = document.querySelector('.board');
  const createTiles = () => {
    tile = document.createElement('div');
    tile.classList.add('tile');
    return tile;
  };
  const renderBoard = () => {
    for (let i = 0; i < 9; i++) {
      createTiles();
      board.appendChild(createTiles());
    }
  };
  return {
    renderBoard
  };
})();

Answer 1

我创建了一个模块，但是该模块不会自动在页面中呈现，我必须在控制台中手动调用Board.renderBoard（）才能显示该板。

JS不仅会调用函数，除非您告诉它调用这些函数。

您的模块仅使用方法Board定义对象renderboard。没有什么可以告诉JS调用此方法的。

您可以在声明模块后立即添加呼叫。

const Board = (() => {
  ...
})();
Board.renderBoard();

但是，如果您只是想让代码最初构建电路板，则可以：

(() => {
  const board = document.querySelector('.board');
  const createTiles = () => {
    const tile = document.createElement('div'); // please declare your variables
    tile.classList.add('tile');
    return tile;
  };
  for (let i = 0; i < 9; i++) {
    createTiles(); // what is this line for?
    board.appendChild(createTiles());
  }
})();

或

(() => {
  const board = document.querySelector('.board');
  for (let i = 0; i < 9; i++) {
    const tile = document.createElement('div');
    tile.classList.add('tile');
    board.appendChild(tile);
  }
})();

甚至

document.querySelector('.board').innerHTML = '<div class="tile"></div>'.repeat(9);

模块-IIFE不会自动调用

1 个答案: