Шаблон для своей jQuery
Шаблон для своей 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');});
:) |
|
рони,
Ничеси, надо разобраться) |
Rise,
Спасибо за подсказку. Попробую переделать через прототипы и еще поизучаю вашу библиотеку на предмет каких-то идей. Еще я думаю, тут есть проблема с циклами, которые будут все время копироваться, почти в каждом методе, что не очень круто. И, наверно, не лучшая кроссбраузерность. Хотя последний фактор меня пока трогает мало. |
Rise,
а какой паттерн в твоей либе? |
Цитата:
|
Rise,
Design Pattern |
Перенести методы в прототип оказалось просто:
Шаблон:
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(),
вынос цикла в отдельный метод ... может кто-то предложит свой вариант ...
<!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>
|
рони,
Это то, что я пытался сделать) Не получалось, похоже, из-за того что я упустил такую штуку: .call Спасибо! Пойду писать свою библиотеку :dance: P.S. Вот интересно, сколько лет вы уже программируете? |
Цитата:
|
void(),
Теперь 255 символов |
:write:
Rise, спасибо, все понял. Буду разбираться дальше. Конечно же, проект учебный, но хочется его подключать на других учебных проектах, так что... Даже не знаю. Наверно как Rasy советует, буду прогонять через транспайлер пока что. А вообще главное - чтобы было что подключать! рони, спасибо, как раз я такую мини-урезанную версию и хотел сделать для начала. Причем задумка в том, чтобы можно было отключить от проекта реальную jQuery, подключить свою и чтобы все при этом работало. То есть чтобы были основные функции jQuery с таким же синтаксисом. |
void(),
в jQuery модульная система, можно грузить только нужные блоки. |
| Часовой пояс GMT +3, время: 12:20. |