мысли вслух ...
<!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>