javascript - 如何在单击按钮时重复向变量添加 +1？

Question

我已经定义了一个 function plusOne()，它应该将 +1 添加到一个变量(然后将一个元素的 innerHTML 设置为该变量)。单击按钮时将调用该函数。

但是，+1 的加法只起作用一次。我必须如何更改我的函数才能在每次单击按钮时向变量添加 +1？

这是我的函数和 HTML 以及 JSFiddle 现在的样子:

function plusOne() {
  var number = 1;
  var count = document.getElementById('count');

  number++;
  count.innerHTML = number;
}

<div>
  <span id="count">1</span>
</div>

<div>
  <button onclick="plusOne()">
    +
  </button>
</div>

JSFiddle 链接:https://jsfiddle.net/johschmoll/hLymhak7/1/

Answer 1

最简单的解决方案:将状态变量移到点击处理程序的范围之外

更改您的 JavaScript 以将 number 变量放在点击处理程序之外。否则，每次调用点击处理程序时，您都会将 number 变量重置为 1。

var number = 1;

function plusOne() {
  var count = document.getElementById('count');

  number++;
  count.textContent = number.toString();
}

示例:https://jsfiddle.net/hLymhak7/6/

将元素引用移出点击处理程序的范围

如果元素永远不会被销毁，那么将元素引用保持在点击处理程序范围之外也是一个好主意。

var number = 1;
var count = document.getElementById('count');

function plusOne() {
  number++;
  count.textContent = number.toString();
}

如今，DOM 查询查询很便宜，但其中很多会对应用的性能产生负面影响。

示例:https://jsfiddle.net/hLymhak7/8/

使元素依赖显式

我们甚至可以将 count 元素传递给点击处理程序，以便于测试。

JavaScript

var number = 1;

function plusOne(count) {
  number++;
  count.textContent = number.toString();
}

HTML

<div>
  <span id="count">1</span>
</div>

<div>
  <button onclick="plusOne(count)">
    +
  </button>
</div>

span 元素实际上被分配给一个全局变量，该变量在 button 元素的范围内，就像 plusOne 点击处理程序一样。这意味着在所有示例中，我们可以很容易地使用 count 或 window.count 来访问 span 元素。

示例:https://jsfiddle.net/hLymhak7/12/

最佳实践:添加为事件监听器

不建议使用 button 元素的 onclick 属性来绑定(bind)点击处理程序。原因之一是我们只允许添加一个 onclick 处理程序，而 Element#addEventListener 则不是这样。

HTML

<div>
  <span id="count">1</span>
</div>

<div>
  <button id="incrementor">
    +
  </button>
</div>

JavaScript

var number = 1;
var count = document.getElementById('count');
var incrementor = document.getElementById('incrementor');
incrementor.addEventListener('click', plusOne);

function plusOne() {
  number++;
  count.textContent = number.toString();
}

See more discussions about onclick

示例:https://jsfiddle.net/hLymhak7/13/

将最佳实践与显式元素依赖相结合

我们可以添加一个点击监听器，它也将 count 元素显式传递给 plusOne 函数。

var number = 1;
var count = document.getElementById('count');
var incrementor = document.getElementById('incrementor');
incrementor.addEventListener('click', function onClick() {
    plusOne(count);
});

function plusOne(count) {
  number++;
  count.textContent = number.toString();
}

现在我们距离易于测试的可维护代码又近了一步。

示例:https://jsfiddle.net/hLymhak7/14/

可维护且易于测试的最终解决方案

我们可以通过使第二个依赖项显式化来完成我们的解决方案，即 number 状态变量。

当我们将此变量传递给 plusOne 函数时，我们现在有一个 pure function这使得测试和推理变得容易。

HTML

<div>
  <span id="count">1</span>
</div>

<div>
  <button id="incrementor">
    +
  </button>
</div>

JavaScript

var number = 1;
var count = document.getElementById('count');
var incrementor = document.getElementById('incrementor');
incrementor.addEventListener('click', function onClick() {
    number = plusOne(count, number);
});

function plusOne(count, number) {
  number++;
  count.textContent = number.toString();
  
  return number;
}

虽然这比较冗长，但依赖关系很清楚，实际的业务逻辑，即 plusOne 函数，可以提取到一个单独的文件中并进行单元测试以验证它是否按照预期进行到。

测试套件

import { plusOne } from './plus-one';

describe('plusOne', () => {
  let countElement;
  let initialState;
  let state;

  beforeEach(() => {
    initialState = 1;
    state = initialState;
    countElement = {
      textContent: initialState.toString(),
    };
  })

  it('returns an incremented state', () => {
    state = plusOne(countElement, state);
    expect(state).toBe(initialState + 1);
  });

  it('does not mutate the state', () => {
    plusOne(countElement, state);
    expect(state).toBe(initialState);
  })

  it('reflects the state in the count element', () => {
    state = plusOne(countElement, state);
    expect(countElement.textContent).toEqual(state.toString());
  });
});

示例:https://jsfiddle.net/hLymhak7/15/

测试套件示例:https://stackblitz.com/edit/stack-overflow-javascript-jquery-repeatedly-add-1-to-variable-o?file=src%2Fplus-one.spec.ts

反模式:在 DOM 中保持状态

许多网络应用程序将状态保存在 DOM 中。虽然这很容易，而且我们的代码中的可变状态较少，但通常我们希望在应用的多个位置访问状态。

必须在我们需要的所有地方从 DOM 中提取状态，这是不应该的。我们应该将我们的业务逻辑保留在 JavaScript 中，并让 DOM 反射(reflect)状态，而不是相反。

它还增加了与 DOM 的紧密耦合，使其更难维护和测试。

// Keeping state in DOM is NOT recommended, but here we go...
var count = document.getElementById('count');

function plusOne() {
  var number = Number(count.textContent);
  number++;
  count.textContent = number.toString();
}

示例:https://jsfiddle.net/hLymhak7/9/