Question

我有几个university，属性为<div>。我创建了一个函数，该函数使用data-bg-color获取所有参数，并根据querySelectorAll中的值设置背景色。我对JS中的构造方法很陌生，所以我的问题是：操纵这些元素的更好方法是什么？

有两种选择：

一种方法是一次性获取所有元素并在构造函数中循环遍历：

data-bg-color

二是在循环中为每个data-bg-color元素创建新的Constructor：

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

在第一种情况下，我想简化该过程，因此仅需要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完成。

这是一个辅助函数，所以也许原型方法对此不利，但是如果要变大，我想避免使用意大利面条式的代码。

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

还请注意使用默认值作为参数。此处使用箭头功能值得商;。我只是提供它作为替代。

使用循环或在新的Constructor内部进行DOM操作？

1 个答案: