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

二，是在循环为每个数据-BG-色元素来创建新的构造函数：

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]")做只想要的元素。

这相当一个辅助功能，所以也许原型的做法是不好的，但我想避免意大利面条代码，如果这个变大。

Answer 1

看来（至少从第二版），您不必为Background实例（S），一旦它们被建造的使用。通过new Background返回的值不使用（并最终收集的垃圾），因此它似乎矫枉过正，甚至定义此任务的构造函数。

当你需要保持状态和需要，以后可以在该状态下调用的方法构造更适合。

在这种情况下，但是我只想坚持一个简单的函数，它的工作：

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

还要注意使用该参数的默认值的。使用此箭头的功能是值得商榷的;我只是将它作为替代。