javascript - 关于 MDN 文档中关闭示例的适当性

Question

关于 MDN topic for closures,他们将此示例作为“真实世界”应用程序展示。

    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; 那样直接分配大小不是更简单吗？ (因此这是一个不好的例子？)这里完成的方式看起来非常像 rube-goldberg。

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

document.getElementById(这里有一些函数可以监听点击并注册被点击元素的 id)。onclick = makeSizer(一些正则表达式来解析文本大小的 id )

这有可能吗？如果是这样，这是否被认为是最佳实践？

Answer 1

My question is: would it not have been simpler to eliminate the closure altogether and assign the sizes directly as in 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);

这个例子的重点是当你使用闭包时，你可以带参数给一个完整的函数赋值。

---

[...] have the document element retrieve the text size directly from the id of the element, [...]

当然，那是可能的，但是你不再需要闭包了，因为函数可以自己找出上下文:

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;