Форум

void() · #11 (**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');

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

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

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

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

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

рони · #13 (**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>

void() · #14 (**permalink**) 24.09.2017, 18:42

рони,
Это то, что я пытался сделать) Не получалось, похоже, из-за того что я упустил такую штуку:

.call

Спасибо! Пойду писать свою библиотеку

P.S. Вот интересно, сколько лет вы уже программируете?

Rasy · #15 (**permalink**) 24.09.2017, 18:46

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

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

es6 без транспайлера никак

Rise · #16 (**permalink**) 24.09.2017, 19:12

void(),
1. Стоит отличать ES6 от ES5, где объяснены различия я уже писал, ES6 это новый стандарт ему 2 года всего (ES5 - 8 лет), и в нем произошло значительное число нововведений, например конструкция class, поэтому если это не учебный проект, то на кросс-браузерность особо рассчитывать не стоит, либо придется ограничить число поддерживаемых браузеров таблицей совместимости, если все же хочется писать на новом стандарте реальные проекты со старой поддержкой, то используют специальные инструменты/сборщики для конвертирования исходного кода ES6 в ES5.
2. Итератор/цикл обычно делают отдельным статичным методом, например по аналогии с моим Lib.each = function() {} твой будет выглядеть так static each() {}.

Rise · #17 (**permalink**) 24.09.2017, 19:53

void(),
вот такая еще библиотека есть с разными интересными функциями, можешь капнуть исходники для саморазвития.

рони · #18 (**permalink**) 24.09.2017, 20:11

void(),
Теперь 255 символов

void() · #19 (**permalink**) 24.09.2017, 21:49

Rise, спасибо, все понял. Буду разбираться дальше. Конечно же, проект учебный, но хочется его подключать на других учебных проектах, так что... Даже не знаю. Наверно как Rasy советует, буду прогонять через транспайлер пока что. А вообще главное - чтобы было что подключать!

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

рони · #20 (**permalink**) 24.09.2017, 22:20

void(),
в jQuery модульная система, можно грузить только нужные блоки.

Форум

Справочник

Discord чат

Курсы javascript