Javascript без JQuery

JQuery - огромная библиотека. Она пришла приблизительно в то время, когда IE6 был браузером номер один. Тогда было много специфических моментов и разногласий, что делали процесс разработки утомительным и JQuery был идеальным инструментом для написания кроссбраузерного кода.

С тех пор, однако, веб-браузеры намного усовершенствовались. Можно с удобством использовать все возможности javascript, а также использовать API-библиотеку HTML5, которая делает работу с DOM-элементами намного приятнее. Разработчики теперь могут выбирать, что же можно оставлять из JQuery для некоторых проектов, продолжая сохранять свою производительность.

Советы
Как создать маленькую JS-библиотеку по типу jQuery
onDomReady без jQuery

Советы

Здесь представлены несколько советов, которые помогут в вашей деятельности.

Обработка события готовности документа (Document Ready)
Первое, что вы делаете, когда пишете JQuery, это упаковка своего кода в вызов $(document).ready(), для того, чтобы определить готовность DOM к манипуляциям. Без JQuery у вас есть событие DOMContentLoaded. Вот как оно используется.
```
document.addEventListener('DOMContentLoaded', function () {
    console.log('Aloha');
});
```
Для выбора элемента используются две важные API - querySelector и querySelectorAll.
Для установки и удаление слушателей событий применяются
- Метод addEventListener() добавляет обработчик события
- Метод removeEventListener() используется для удаления обработчика события, назначенного с помощью метода addEventListener().
Для получения и установки содержимого элементов JQuery имеет удобный text() и html() методы. Вместо их можно использовать свойства textContent и innerHTML.
Установка и удаление элементов. Хотя JQuery и делает все намного проще, добавление и удаление DOM-элементов невозможно без простого JavaScript.
Манипулирование именами классов элементов без JQuery было очень неудобно использовать. Но проблема была решена благодаря Атрибуты и стили.
Прохождение по DOM дереву. Любой настоящий JS-программист знает, что есть много возможностей, скрытых в DOM. По сравнению с JQuery, простые интерфейсы DOM предлагают ограниченную функциональность для выбора нескольких уровней. И тем не менее, есть множество вещей, которые Вы можете делать, путешествуя по DOM - дереву.
При переборе массивов можно использовать forEach() и map() вместо их JQuery аналогов - each() и map().
Методы анимации JQuery самым лучшим образом подходят ко всему, что Вы бы хотели «оживить», и если нужны сложные анимации из скриптов в приложении, Вы должны по-прежнему иметь дело с ней. Но благодаря всем чудесам CSS3, некоторые простые случаи можно обработать без JQuery
Ajax – это еще одна технология, которая используется при кросс-браузерном беспорядке. Теперь можно использовать один и тот же код везде

Сводная таблица jQuery - эквивалентов на чистом js

jQuery	Чистый javacript
$('.el').prev(); $('.el').next();	document.querySelector('.el').previousElementSibling; document.querySelector('.el').nextElementSibling;
var els = $('.el');	var els = document.querySelectorAll('.el');
var newEl = $('>div/<');	var newEl = document.createElement('div');
$('.el').on('event', function() { });	[].forEach.call(document.querySelectorAll('.el'), function (el) { el.addEventListener('event', function() { }, false); });
$('.el’).html();	document.querySelector('.el’).innerHTML;
$('.el').filter(':first').attr('key', 'value'); $('.el').filter(':first').attr('key');	document.querySelector('.el').setAttribute('key', 'value'); document.querySelector('.el').getAttribute('key');
$(‘.el’).offset();	document.querySelector('.el').getBoundingClientRect();
$('.el').addClass('class'); $('.el').removeClass('class'); $('.el').toggleClass('class');	document.querySelector('.el').classList.add('class'); document.querySelector('.el').classList.remove('class'); document.querySelector('.el').classList.toggle('class');
$('.el').append($('<div/>'));	document.querySelector('.el').appendChild(document.createElement('div'));
var clonedEl = $('.el').clone();	var clonedEl = document.querySelector('.el').cloneNode(true);
$('.el').remove();	remove('.el'); function remove(el) { var toRemove = document.querySelector(el); toRemove.parentNode.removeChild(toRemove); }
$("#container").empty();	document.getElementById("container").innerHTML = null; // или var c = document.getElementById("container"); while (c.lastChild) c.removeChild(c.lastChild);
$('.el').parent();	document.querySelector('.el').parentNode;
$.get('url', function (data) { ... }); $.post('url', {data: data}, function (data) { ... });	// get var xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onreadystatechange = function (data) { ... } xhr.send(); // post var xhr = new XMLHttpRequest() xhr.open('POST', url); xhr.onreadystatechange = function (data) { ... } xhr.send({data: data});

jQuery - Описание библиотеки

Как создать маленькую JS-библиотеку по типу jQuery

Для создания мини «библиотечки» мы будем использовать ООП (Объектно-Ориентированное Программирование).

Создадим новый класс MyLib. У класса будет свойство которое будет принимать наш массив объектов.

function MyLib(element){
  this.element = element;
 }

Давайте напишем 3 метода.

Метод .on()

function MyLib(element){
   this.element = element;
   this.on = function (eventname, f){
     for(var i = 0; i < this.element.length; i++){
        this.element[i].addEventListener(eventname, f,false)
      }
   return this;
  }
 }

В этом методе мы передаем два параметра. eventname, f.
eventname — название нашего события
f — наш колбэк через который мы будем привязывать само событие

Далее в цикле мы получаем нужный нам массив и «навешиваем» на него события через метод addEventListener() и в конце мы просто возвращяем наш массив.

Метод .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() добавляет нужный класс (name) на элементы приходящего массива.

Метод .html()

this.html = function (text){ 
  if (!text) return  this.element[0].innerHTML;
  this.element[0].innerHTML = text;
  return text;
 }

Метод .html() позволяет получить и изменить содержимое узла-элемента.

Что бы сделать нашу библиотеку похожей на JQuery напишем свою функцию обертку для красивой инициализации объектов с помощью $.

function $(selector){
  var elements = document.querySelectorAll(selector);
  return new MyLib(elements);
}

Пример

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>создать маленькую JS-библиотеку</title>
<style>
.new {border:6px solid red; 
 font-size:16px;
 font-weight:bold; 
 margin:25px; 
 text-align:center;
}
</style>
<script>
function MyLib(element){ this.element = element;
   this.on = function (eventname, f){
     for(var i = 0; i < this.element.length; i++){ this.element[i].addEventListener(eventname, f,false)}
     return this; }
   this.addClass = function (name){
     for(var i = 0; i < this.element.length; i++){ this.element[i].classList.add(name);}
     return this;}
  this.html = function (text){ 
    if (!text) return  this.element[0].innerHTML;
    this.element[0].innerHTML = text;
    return text; } }
function $(selector){
  var elements = document.querySelectorAll(selector); 
  return new MyLib(elements); }
</script>
</head>
<body>
<div id=m0> <span id=m1>Тест</span> <span id=m2>Mylib </span></div>
<button>Нажми на меня</button>
<script>
$('button').on('click',function() {
 $('#m0').addClass('new');
 var t1=$('#m1').html(); 
 var t2=$('#m2').html();
 $('#m1').html('Библиотека '+t2+'      ');
 $('#m2').html(t1);}
);
</script>
</body>
</html>

Комментарий

Здесь дана основа того как пишутся такие библиотеки как JQuery. Конечно то что было написано имеет упрощенную форму оригинальной библиотеки, но общая логика остается такой же.

onDomReady без jQuery

Для инициализации страницы исторически использовалось событие window.onload, которое срабатывает после полной загрузки страницы и всех объектов на ней: счетчиков, картинок и т.п.

Событие DOMContentLoaded - гораздо лучший выбор в 99% случаев.

Это событие срабатывает, как только готов DOM документ, до загрузки картинок и других не влияющих на структуру документа объектов.

Это очень удобно, т.к. картинки могут загружаться долго, а обработчик DOMContentLoaded может произвести необходимые изменения на странице и инициализацию интерфейсов тут же, не дожидаясь загрузки всего.

С помощью приведенной ниже функции DomReady можно навешивать несколько обработчиков.

(function(){ 
  var readyBound = false; 
  var bindReady=function(){ 
    if ( readyBound ) return;  // // выходим, если функция уже выполнялась
    readyBound = true;
    if (document.addEventListener) {
    document.addEventListener( "DOMContentLoaded", function(){ 
          document.removeEventListener( "DOMContentLoaded", arguments.callee, false ); 
          ready(); 
        }, false ); }
    if (window.addEventListener) window.addEventListener('load', ready, false);
    else window.onload=ready;
  } 
  var isReady=false;   // флаг, чтобы функция не исполнялась дважды
 // список функций для выполнения  после полной загрузки страницы и всех объектов на ней:
  var readyList= [];
  var ready=function() { 
    if ( !isReady ) {  
      isReady = true; 
      if ( readyList ) { 
        var fn_temp=null;
        while(fn_temp=readyList.shift()){ 
          fn_temp.call( document); 
        } 
        readyList = null; 
      } 
    } 
  } 
  domReady=function(fn) { 
    bindReady(); 
// Если функцмя «ready» уже выполнилась, то выполняется «fn»
    if ( isReady ) fn.call(document); 
    else readyList.push( fn );
    return this; 
  } 
})();

Eсли функция domReady(handler) будет вызвана после того, как DOM был сформирован, то заданный обработчик этого события (handler), будет сразу же выполнен.

Пример

<!DOCTYPE HTML>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>onDomReady</title>
<script>
(function(){var readyBound=false;var bindReady=function(){if(readyBound)return;readyBound=true;if(document.addEventListener)document.addEventListener("DOMContentLoaded",function(){document.removeEventListener("DOMContentLoaded",arguments.callee,false);ready()},false);if(window.addEventListener)window.addEventListener("load",ready,false);else window.onload=ready};var isReady=false;var readyList=[];var ready=function(){if(!isReady){isReady=true;if(readyList){var fn_temp=null;while(fn_temp=readyList.shift())fn_temp.call(document);
readyList=null}}};domReady=function(fn){bindReady();if(isReady)fn.call(document);else readyList.push(fn);return this}})();

domReady(function() {document.getElementById('m1').innerHTML="Выполнилась 1-я функция";});
domReady(function() {document.getElementById('m2').innerHTML="Выполнилась 2-я функция";});
domReady(function() {
  document.getElementById('m3').innerHTML = 
    "Выполнилась 3-я функция<br><img src='images/cat.jpg' alt='' />";});
</script>
</head>
<body>
<p>js-скрипт упакован онлайн-сервисом <a href="https://closure-compiler.appspot.com/home" target='_blank'>Closure Compiler</a> </p>
<div id=m1></div><br>
<div id=m2></div><br>
<div id=m3></div>
</body>
</html>

Javascript без JQuery

Советы

Сводная таблица jQuery - эквивалентов на чистом js

Как создать маленькую JS-библиотеку по типу jQuery

Метод .on()

Метод .addClass()

Метод .html()

Пример

Комментарий

onDomReady без jQuery

Пример

Справочник JavaScript