MDN文档关闭示例的适当性

Question

在闭包的MDN主题，上，他们将此示例表示为“真实世界”应用程序。

    body {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 12px;
    }

    h1 {
      font-size: 1.5em;
    }
    h2 {
      font-size: 1.2em;
    }

    function makeSizer(size) {
      return function() {
        document.body.style.fontSize = size + 'px';
      };
    }

    var size12 = makeSizer(12);
    var size14 = makeSizer(14);
    var size16 = makeSizer(16);


document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

<a href="#" id="size-12">12</a>
<a href="#" id="size-14">14</a>
<a href="#" id="size-16">16</a>

我的问题是:完全消除闭包并直接分配大小，就像在document.getElementById('size-12').onclick =12中那样，不是更简单吗？(因此，这是一个糟糕的例子？)这里的做法看上去很老套--戈德伯格。

进一步扩展，我觉得一个更突出的例子是保持闭包，但是让document元素直接从元素的id检索文本大小，所以我们只需要一个语句，而不是三个语句(每个文本大小一个)。我不知道它是如何实现的，但也许类似于

Document.getElementById(这里有一些函数用于侦听单击和注册元素的id，单击).onclick=makeSizer(一些正则表达式用于解析文本大小的id )

这有可能吗？如果是，这是否被认为是最佳做法？

Answer 1

我的问题是:完全消除闭包并像在document.getElementById('size-12').onclick = 12;中那样直接分配大小不是更简单吗？

不完全是。你得重复一遍：

document.getElementById('size-12').onclick = function () {
    document.body.style.fontSize = '12px';
};
document.getElementById('size-14').onclick = function () {
    document.body.style.fontSize = '14px';
};
document.getElementById('size-16').onclick = function () {
    document.body.style.fontSize = '16px';
};

所以首先让我们建立一个独立于争论的函数.

var resize = function (size) {
    document.body.style.fontSize = size + 'px';
};

但仅凭这一点，你就不会有多大的进步：

document.getElementById('size-12').onclick = function () {
    resize(12);
};
document.getElementById('size-14').onclick = function () {
    resize(14);
};
document.getElementById('size-16').onclick = function () {
    resize(16);
};

闭包允许您保留单个实现，同时保留单个函数调用的上下文(在本例中是“事件处理程序的调用”)：

function makeSizer(size) {
    return function () {
        document.body.style.fontSize = size + 'px';
    };
}

document.getElementById('size-12').onclick = makeSizer(12);
document.getElementById('size-14').onclick = makeSizer(14);
document.getElementById('size-16').onclick = makeSizer(16);

该示例的要点是，在使用闭包时，可以使用参数分配一个完整的函数。

..。让document元素直接从元素的id检索文本大小，.

当然，这是可能的，但是这样您就不再需要闭包了，因为函数可以自己找出上下文：

var resize = function () {
    var size = this.id.split('-').pop();
    document.body.style.fontSize = size + 'px';
};

document.getElementById('size-12').onclick = resize;
document.getElementById('size-14').onclick = resize;
document.getElementById('size-16').onclick = resize;