DOM манипуляции с циклом или внутри нового конструктора? - PullRequest
Новая
       5

DOM манипуляции с циклом или внутри нового конструктора?

0 голосов
/ 11 февраля 2019

У меня есть пара <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]").

Это скорее вспомогательная функция, так что, возможно, подход прототипа не подходит для этого, но я хотел бы избежать спагетти-кода, если он станет больше.

1 Ответ

0 голосов
/ 11 февраля 2019

Кажется (по крайней мере из второй версии), что у вас нет использования для Background экземпляров, после их создания.Значение, возвращаемое new Background, не используется (и, в конечном итоге, собирается мусором), и поэтому кажется, что излишне даже определять конструктор для этой задачи.

Конструкторы лучше подходят для случаев, когда вам нужно сохранить состояние и нужны методы, которые могут быть вызваны позже в этом состоянии.

В этом случае, однако, я бы просто использовал простую функцию, которая выполняетjob: 

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

Обратите внимание также на использование значения по умолчанию для аргумента.Использование функции стрелки здесь спорно;Я просто предоставляю это как альтернативу.

...