Javascript 关于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>

正文{
字体系列：Helvetica、Arial、无衬线字体；
字体大小：12px；
}
h1{
字号：1.5em；
}
氢{
字体大小：1.2米；
}
函数makeSizer（大小）{
返回函数（）{
document.body.style.fontSize=大小+'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；

我的问题是：如果完全消除闭包并像document.getElementById（'size-12'）.onclick=12；，那么直接分配大小不是更简单吗；？（因此这是一个糟糕的例子？）这里的做法看起来很像鲁布·戈德伯格

进一步扩展，我觉得一个更突出的例子是保留闭包，但是让document元素直接从元素的id检索文本大小，因此我们只需要一个语句，而不是三个语句（每个文本大小一个）。我不确定它是如何实现的，但可能类似于

document.getElementById（此处的一些函数用于侦听单击并注册已单击元素的id）。onclick=makeSizer（一些正则表达式用于解析文本大小的id）

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

我的问题是：如果完全消除闭包，并像

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);
};

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

该示例的要点是，当您使用闭包时，可以指定一个带有参数的完整函数


[…]让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;

这是一个极小的例子。当然，他们可以给你一个真实世界的例子，在这个例子中，处理程序非常大，因此可以从这个方法中获得更多好处，以避免代码的重复，但是这个例子说明了这一点。是的，他们可以从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;