Пишем свою jQuery

2 353

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

0

Комментарии:

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

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