Пишем свою jQuery

1 768

Доброго времени суток друзья. Сегодня, специально для любителей попилить на нативном 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. Конечно то что было написано имеет упрощенную форму оригинальной библиотеки, но общая  логика остается такой же. Удачно вам покодить!)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *