24.09.2017, 17:46
|
|
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
Перенести методы в прототип оказалось просто:
Шаблон:
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');
А вот избавиться от циклов пока не получается.
Как думаете вообще, можно ли такой подход уже использовать где-нибудь на личном проекте? Или тут еще есть серьезные дефекты?
Последний раз редактировалось void(), 24.09.2017 в 17:51.
|
|
24.09.2017, 18:19
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Сообщение от void()
|
А вот избавиться от циклов пока не получается.
|
цикл можно заменить на делегирование(но нужно ли?), или вам известен другой способ?
|
|
24.09.2017, 18:31
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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>
Последний раз редактировалось рони, 24.09.2017 в 18:37.
|
|
24.09.2017, 18:42
|
|
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
рони,
Это то, что я пытался сделать) Не получалось, похоже, из-за того что я упустил такую штуку:
.call
Спасибо! Пойду писать свою библиотеку
P.S. Вот интересно, сколько лет вы уже программируете?
|
|
24.09.2017, 18:46
|
Профессор
|
|
Регистрация: 17.06.2016
Сообщений: 509
|
|
Сообщение от void()
|
Как думаете вообще, можно ли такой подход уже использовать где-нибудь на личном проекте?
|
es6 без транспайлера никак
|
|
24.09.2017, 19:12
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
void(),
1. Стоит отличать ES6 от ES5, где объяснены различия я уже писал, ES6 это новый стандарт ему 2 года всего (ES5 - 8 лет), и в нем произошло значительное число нововведений, например конструкция class, поэтому если это не учебный проект, то на кросс-браузерность особо рассчитывать не стоит, либо придется ограничить число поддерживаемых браузеров таблицей совместимости, если все же хочется писать на новом стандарте реальные проекты со старой поддержкой, то используют специальные инструменты/сборщики для конвертирования исходного кода ES6 в ES5.
2. Итератор/цикл обычно делают отдельным статичным методом, например по аналогии с моим Lib.each = function() {} твой будет выглядеть так static each() {}.
|
|
24.09.2017, 19:53
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
void(),
вот такая еще библиотека есть с разными интересными функциями, можешь капнуть исходники для саморазвития.
|
|
24.09.2017, 20:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
|
24.09.2017, 21:49
|
|
Профессор
|
|
Регистрация: 11.08.2017
Сообщений: 208
|
|
Rise, спасибо, все понял. Буду разбираться дальше. Конечно же, проект учебный, но хочется его подключать на других учебных проектах, так что... Даже не знаю. Наверно как Rasy советует, буду прогонять через транспайлер пока что. А вообще главное - чтобы было что подключать!
рони, спасибо, как раз я такую мини-урезанную версию и хотел сделать для начала. Причем задумка в том, чтобы можно было отключить от проекта реальную jQuery, подключить свою и чтобы все при этом работало. То есть чтобы были основные функции jQuery с таким же синтаксисом.
|
|
24.09.2017, 22:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
void(),
в jQuery модульная система, можно грузить только нужные блоки.
|
|
|
|