javascript - 使用循环或在 new 构造函数中进行 DOM 操作？

Question

我有几个 <div>与 data-bg-color属性。我创建了一个函数，可以使用 querySelectorAll 获取所有这些内容。并根据 data-bg-color 中的值设置背景颜色。我对 JS 中的构造函数方法相当陌生，所以我的问题是:操作这些元素的更好方法是什么？

有两种选择:

一种是一次性获取所有元素并在构造函数中循环遍历它们:

var Background = function (selector) {
    this.elements = (selector) ? document.querySelectorAll(selector) : document.querySelectorAll("[data-bg-color]");
    if(this.elements.length) this.setColor();
};

Background.prototype.setColor = function () {
    Array.from(this.elements, function (element) {
        element.style.backgroundColor = element.getAttribute("data-bg-color");
    });
};

var bg = new Background();

二是在循环中为每个 data-bg-color 元素创建新的构造函数:

var Background = function (element) {
    this.element = element;
    this.setColor();
};

Background.prototype.setColor = function () {
    this.element.style.backgroundColor = this.element.getAttribute("data-bg-color");
};

for( var i=0; i<document.querySelectorAll("[data-bg-color]").length; i++ ){
    new Background( document.querySelectorAll("[data-bg-color]")[i] );
}

在第一种情况下，我想简化流程，因此只需 new Background()是必须的。它会自动获取所有data-bg-color页面上的元素并设置它们的颜色。此外，如果用户只想定位所需的元素，他可以使用 new Background("#modal [data-bg-color]") 来完成。 。

这是一个辅助函数，所以原型(prototype)方法可能不适合这个，但如果它变得更大，我想避免意大利面条代码。

Answer 1

看起来(至少从第二个版本来看)一旦构建了 Background 实例，您就不再需要它们了。 new Background 返回的值未被使用(并最终被垃圾收集)，因此为此任务定义一个构造函数似乎有些过分了。

构造函数更适合当您需要保留状态并需要稍后可以在该状态上调用的方法时。

在这种情况下，我只会坚持使用一个简单的函数来完成这项工作:

function applyBackground(selector = "[data-bg-color]") {
    Array.from(document.querySelectorAll(selector), 
               elem => elem.style.backgroundColor = elem.getAttribute("data-bg-color"));
}

另请注意参数默认值的使用。这里使用箭头函数是有争议的；我只是提供它作为替代方案。