Форум

void() · #1 (**permalink**) 23.09.2017, 14:31

Шаблон для своей jQuery:

function $(s){ return new Q(document.querySelectorAll(s)); }

function Q(x){
    this.x = x;
    this.toggle = function(v, c){
        for(var i = 0; i < this.x.length; i++){
            this.x[i].addEventListener(v, function(){
                this.classList.toggle(c);
            });
        }
        return this;
    }
}

Используется так:

$('.class').toggle('click', 'class-active');

Остается только добавить методов. Например:

this.on = function(v, f){
        for(var i = 0; i < this.x.length; i++){
            this.x[i].addEventListener(v, f);
        }
        return this;
    }

Теперь можно использовать так:

$('.class').toggle('click', 'class-active').on('click', function(){alert('1');});

рони · #2 (**permalink**) 23.09.2017, 14:34

void(),
https://javascript.ru/forum/project/...tml#post438821

void() · #3 (**permalink**) 23.09.2017, 14:43

рони,
Ничеси, надо разобраться)

void() · #4 (**permalink**) 23.09.2017, 22:44

Rise,
Спасибо за подсказку. Попробую переделать через прототипы и еще поизучаю вашу библиотеку на предмет каких-то идей. Еще я думаю, тут есть проблема с циклами, которые будут все время копироваться, почти в каждом методе, что не очень круто. И, наверно, не лучшая кроссбраузерность. Хотя последний фактор меня пока трогает мало.

Rasy · #5 (**permalink**) 24.09.2017, 00:00

Rise,
а какой паттерн в твоей либе?

Rasy · #6 (**permalink**) 24.09.2017, 00:19

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

паттерн чего?

кода. В своей либе использую паттерн "Модуль".

Rasy · #7 (**permalink**) 24.09.2017, 08:32

Rise,
Design Pattern

void() · #8 (**permalink**) 24.09.2017, 17:46

Перенести методы в прототип оказалось просто:
Шаблон:

function $(selector){ return new Q(document.querySelectorAll(selector)); }

class Q { 
	constructor(selector){ this.selector = selector; }

	toggle(event, newSelect){
		for(var i = 0; i < this.selector.length; i++){
			this.selector[i].addEventListener(event, function(){
				this.classList.toggle(newSelect);
			});
		}
		return this;
	}
}

Как использовать:

$('#wrapper .class').toggle('click', 'class-active');

А вот избавиться от циклов пока не получается.
Как думаете вообще, можно ли такой подход уже использовать где-нибудь на личном проекте? Или тут еще есть серьезные дефекты?

рони · #9 (**permalink**) 24.09.2017, 18:19

Сообщение от void()

А вот избавиться от циклов пока не получается.

цикл можно заменить на делегирование(но нужно ли?), или вам известен другой способ?

рони · #10 (**permalink**) 24.09.2017, 18:31

void(),
вынос цикла в отдельный метод ... может кто-то предложит свой вариант ...

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hot.class-active{
    background-color: #3366FF;
  }
  .red {
    background-color: #FF0000;
  }

   .hot{
         border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
    }
  </style>


</head>

<body> <style type="text/css">


  </style>
 <div class="hot">test</div>
 <div class="hot red">test</div>
 <div class="hot">test</div>
<script>
"use strict"
function $(selector){ return new Q(document.querySelectorAll(selector)); }

class Q {
constructor(selector){ this.selector = selector; }

toggleClass(newSelect,event) {
    var fn = function() {
        this.classList.toggle(newSelect)
    };
    return this.forEach(fn, event)
};

forEach(fn, event) {
    [].forEach.call(this.selector, function(item) {
        event ? item.addEventListener(event, fn.bind(item)) : fn.bind(item)()
    });
    return this
};

css(data, event) {
    var fn = function() {
        var item = this;
        Object.keys(data).forEach(function(key) {
            item.style[key] = data[key]
        })
    };
    return this.forEach(fn, event)
};


}
$('.hot').toggleClass('red').css({"color" : "#66FF00", width : "200px"}).toggleClass('class-active','click');
  </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript