javascript - 是否使用闭包，John Conway 的 Game of Life

Question

我目前正在制作一个说明 John Conways 'Game of Life' 的游戏我一直在学习闭包和模块化模式，并且正在尝试用 Javascript 实现更多我正在学习的内容。 You can check out my repo here if your interested.所有这些方法都在“游戏”对象中。我让它工作，但我试图限制变量并使其尽可能发挥作用(在函数之间传递网格数组)。我想要一些关于我应该保持更高范围的变量不可变还是无关紧要的建议。

就结构而言，哪种解决方案更好？

// initial grid
// will be bigger than this but is 3x3 for this question.

let grid = [
    [1,0,0],
    [0,1,0],
    [0,0,1]
]

解决方案一:我最初的解决方法:

function nextGrid(){
  grid = applyRules(grid)
  renderGrid(grid)
}

function applyRules(grid){
  // makes changes
}

function renderGrid(grid){
  // makes changes
}

// call nextGrid() to generate subsequent new grids.

解决方案 2:更多地研究闭包，这样更好吗？

function nextGrid() {
  let prevGrid = grid;

  return function(){
    prevGrid = applyRules(prevGrid)
    renderGrid(prevGrid)
  }  
}

function applyRules(prevGrid){
  // makes changes
}

function renderGrid(grid){
  // makes changes
}

const next = nextGrid();

// call next() to generate subsequent new grids.

Answer 1

你们的两个解决方案都采用了突变。在您的第一个解决方案中，您改变了全局变量 grid。在您的第二个解决方案中，您改变了局部变量 prevGrid。一个真正的功能性程序将使用递归而不是变异。例如，这就是我要做的:

const game = /* initial game state */;

play(game);

function play(game) {
    render(game);
    setTimeout(play, 100, update(game));
}

如您所见，我们调用 play 并每 100 毫秒更新一次游戏状态，而不是改变全局变量 game。我们在第三行的初始调用 play(game) 开始游戏。如果我们将其注释掉，则不会显示任何内容。

---

这是 Conway's Game of Life 的完整示例在几行代码中:

const glyph = [" ", "■"];

document.querySelectorAll("pre.life").forEach(e => play(e, read(e.innerHTML)));

function read(text) {
    return text.split("\n").map(l => l.split("").map(c => glyph.indexOf(c)));
}

function play(pre, game) {
    pre.innerHTML = show(game);
    setTimeout(play, 100, pre, update(game));
}

function show(game) {
    return game.map(line => line.map(cell => glyph[cell]).join("")).join("\n");
}

function update(game) {
    return game.map((line, i) => line.map((cell, j) => {
        const back = game[i - 1], next = game[i + 1], h = j - 1, k = j + 1;

        const neighbors = (back && back[h] || 0)
                        + (back && back[j] || 0)
                        + (back && back[k] || 0)
                        + (line[h] || 0)
                        + (line[k] || 0)
                        + (next && next[h] || 0)
                        + (next && next[j] || 0)
                        + (next && next[k] || 0);

        switch (neighbors) {
        case 3:  return 1;
        case 2:  return cell;
        default: return 0;
        }
    }));
}

pre.life {
    line-height: 0.666;
}

<pre class="life">
                                      
                         ■            
                       ■ ■            
             ■■      ■■            ■■ 
            ■   ■    ■■            ■■ 
 ■■        ■     ■   ■■               
 ■■        ■   ■ ■■    ■ ■            
           ■     ■       ■            
            ■   ■                     
             ■■                       
                                      
                                      
                                      
                                      
                                      
                                      
                                      
                                      
                                      
                                      
                                      
                                      
                                      
                                       </pre>

上面的模式是Gosper glider gun .