Оглавление
Доброго времени суток друзья. Сегодня, специально для любителей попилить на нативном javascript я написал эту небольшую статью как мини туториал по написанию своей собственной jquery (на примере реализации нескольких функций). Давайте же приступим к практике. Поехали.
Требования при чтение данной статьи:
— знания основ ООП
— знание this (контекста вызова)
— collback
С чего начать?
Начну я с истории того для чего же была вообще создана jquery. На заре программирования на js нужно было постоянно работать с наборами объектов в DOM и приходилось постоянно использовать циклы через которые мы проходились по массиву объектов нашего «дерева» DOM
навешивая на него нужно событие. Это было очень не удобно и специально для этого была разработана первая версия jquery Джоном Резигом который решил эту «боль» для тысяч веб разработчиков. Наконец то не нужно было получать массив объектов, а потом в цикле начинать с ними работать. Теперь все стало гораздо проще. Мы просто ссылались на нужную группу объектов и могли с помощью методов быстро начать с ней работать. Не правда ли удобно? Сейчас конечно в современном js уже реализована нативно большая часть методов которые в то время были только в jquery и вряд ли у вас могут возникнуть такие проблема. Но тогда зачем мы будем писать свою jquey спросите вы у меня? Я искренне считаю что если вы хотите быть лучшим программистом чем другие и разбираться в работе библиотек и фремворков то нужно самому писать свои подобия что бы пройти все возможные этапы проблем при их реализации. Как результат такой разработки вы начнете более лучше понимать работу js и вам будет легче работать с такими популярными на сегодняшний день библиотеками и фремворками как React.js, Redux, Backbone.js, Vue.js, AngularJS и т.к.
Метод .on
Давайте начнем с того что напишем свой универсальный метод работы с любым событием для группы объектов. Что бы написать нашу мини «библиотечку» мы будем использовать ООП.
Создадим новый класс MyJquery. У класса будет свойство которое будет принимать наш массив объектов.
function MyJquery(element){
this.element = element;
}
Давайте напишем метод .on
function MyJquery(element){
this.element = element;
this.on = function (eventname, f){
for(var i = 0; i < this.element.length; i++){
this.element[i].addEventListener(eventname, f)
}
return this;
}
}
В этом методе мы передаем два параметра. eventname, f.
eventname — название нашего события
f — наш колбэк через который мы будем привязывать само событие
Далее в цикле мы получаем нужный нам массив и «навешиваем» на него события через метод addEventListener и в конце мы просто возвращяем наш массив.
Что бы протестировать наш работу нашего метода нужно будет добавить в html небольшой кусок верстки в виде враппера с классом .wrapper и инутов в виде кнопки.
<div class="wrapper">
<div class="item">Test 1</div>
<div class="item">Test 2</div>
<div class="item">Test 3</div>
<div class="item">Test 4</div>
</div>
Теперь мы можем выбрать нашь набор элементов и применить на нем метод .on
var images = document.querySelectorAll('.wrapper img');
new MyJquery(images).on('click',function(){
console.log('click');
})
В результате при клике на элемент дерева у нас будет происходить вызов консоли со значением «click». Что бы еще более сделать нашу библиотеку похожа на на jquery мы напишем свою функцию обертку для красивой инициализации объектов с помощью $ которая скроете на конструктор.
function $(selector){
var elements = document.querySelectorAll(selector);
return new MyJquery(elements);
}
И сможем написать теперь так.
$('.wrapper input').on('click',function(){
console.log('click');
})
Метод .addClass
Один метод готов. Давайте напишем еще один что бы наша картина была более полной. Принцип написания метода останется прежнем.
this.addClass = function (name){
for(var i = 0; i < this.element.length; i++){
this.element[i].classList.add(name);
}
return this;
}
Мы добавили метод addClass в нашем классе который будет проходится по массиву объектов и с помощью метода classList.add() добавлять нужный нам класс на элементы дом приходящего массива.
Заключение
В этой статье я постарался дать вам основу того как пишутся такие библиотеки как jquery. Конечно то что было написано имеет упрощенную форму оригинальной библиотеки, но общая логика остается такой же. Удачно вам покодить!)
