Question

在MDN topic for closures,上，他们将这个例子作为一个现实世界＆＃34;应用。

    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（＆＃39; size-12＆＃39;）中一样简单.onclick = 12;？（因此这是一个不好的例子吗？）在这里完成它的方式似乎很像rube-goldberg。

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

document.getElementById（这里的一些函数用于侦听点击的元素和注册的元素）。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);

示例的要点是，当您使用闭包时，可以使用参数分配完整的函数。

[...]文档元素直接从元素的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;

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

1 个答案: