Форум

ivanx · #1 (**permalink**) 26.09.2016, 12:23

Добрый день.

Есть метод который, который принимает html елемент или елементы и работает с ними(плагин). Проблема состоит в реализации инициализации плагина.
Небольшой примерчик

(function() {

function Test(el) {
  this.el = el;
  this.init();
}
Test.prototype.init() {
  // работает с this.el
}
Test.prototype.destroy() {
  // this.el = null
}

window.Test = Test;

})();

var obj = new Test(document.querySelector('div'));
// если нужно
obj.destroy();

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

(function() {

function _(el) {
  this.el = el;
  this.init();
}
_.prototype.init() {
  // работает с this.el
}
_.prototype.destroy() {
  // this.el = null
}

function Test(selectors, method) {
  var el = document.querySelectorAll(selectors);
  [].forEach.call(el, function(element) {
    // *1
    var obj = new _(element);
  });
}

window.Test = Test;

})();

Test('div');

*1) Надо проверить не был ли обьект уже инициализирован, в jQuery есть метода $.data, в который можно сохранить весь обьект, и если например передан метод destroy, то запустить на обьекте destroy. А как быть в случае без jquery.

Хотелось бы, чтобы сам плагин работал с одним элементом, а если элементов много то вызывался в цикле. Может есть более удачные варианты организации плагина, заранее спасибо за любые советы в этом направлении.

warren buffet · #2 (**permalink**) 26.09.2016, 13:05

Сообщение от ivanx

А если скажем елементов не один, а много, то

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

Если wrapper создать нельзя, например это разбросанные где попало элементы, то развешиваешь свой плагин на все по-отдельности.

warren buffet · #3 (**permalink**) 26.09.2016, 13:09

Цитата:

[].forEach.call(el, function(element) {

Священная вещь, да? for оскверняет. Вот так и бывает, священным вещам молиться научился, а самого тупого кода написать не можешь.

рони · #4 (**permalink**) 26.09.2016, 14:43

мысли вслух ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .slider {
         border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px
    }
    .red{
      background-color: #FF0000;
    }

  </style>


</head>

<body>
<div class="slider b"></div><div class="slider b"></div><div class="slider c"></div>
 <script>
(function() {
    function _(el) {
        this.el = [];
        this.init(el)
    }
     _.prototype.len = function() {
        return this.el.length
    };
    _.prototype.arr = function(selectors) {
        var elem = document.querySelectorAll(selectors);
        return [].slice.call(elem, 0)
    };
    _.prototype.init = function(selectors) {
        var elem = this.arr(selectors);
        var el = this.el,
            add = this.add.bind(this);
        elem.forEach(function(element, i) {
            !~el.indexOf(element) && add(element)
        })
    };
    _.prototype.add = function(elem) {
        this.el.push(elem);
        elem.innerHTML = "add";
        elem.classList.add("red")
    };
    _.prototype.destroy = function(selectors) {
        var elem = this.arr(selectors);
        this.el = this.el.map(function(element, i) {
            return elem.some(function(a) {
                return a == element
            }) ? (element.innerHTML = "null", element.classList.toggle("red"), null) : element
        }).filter(function(el) {
            return el
        })
    };

    function Test(selectors, method) {
        return new _(selectors)
    }
    window.Test = Test
})();
var a = Test(".a, .b"); console.log(a.len()) // 2  (.a нет, есть 2 .b)
window.setTimeout(function() {
    a.destroy(".b"); console.log(a.len())// 0
}, 1000);
window.setTimeout(function() {
    a.init(".b") ; console.log(a.len())//2
}, 2000);
window.setTimeout(function() {
    a.init(".c") ;a.init(".c") ;a.init(".c") ;a.init(".c") ; console.log(a.len())// 3 сработает только 1 инициализация 
}, 3000);
  </script>
</body>
</html>

ivanx · #5 (**permalink**) 26.09.2016, 14:53

Сообщение от warren buffet

Священная вещь, да? for оскверняет.

Я не совсем понял, в чем вопрос, я ведь всего лишь пример хотел привести, какая разница с for или forEach, к сути вопроса отношения же не имеет.

ivanx · #6 (**permalink**) 26.09.2016, 15:00

рони,
Спасибо за пример

warren buffet · #7 (**permalink**) 26.09.2016, 15:05

ivanx, ну я и говорю, какая разница. )

Форум

Справочник

Discord чат

Курсы javascript