Skip to content

Latest commit

 

History

History
1283 lines (929 loc) · 33.8 KB

README-ru.md

File metadata and controls

1283 lines (929 loc) · 33.8 KB
Raw

Вам не нужен jQuery

В наше время среда front-end разработки быстро развивается, и современные браузеры достаточно хорошо реализовали работу с DOM/BOM API. Вам не нужно изучать jQuery с нуля для манипуляцией DOM'ом или объектами событий. В то же время, благодаря лидирующим front-end библиотекам, таким как React, Angular и Vue, манипуляция DOM'ом напрямую становится антипаттерном, а jQuery теряет свою значимость. Этот проект объединяет большинство альтернативных методов jQuery в нативном исполнении с поддержкой IE 10+.

Содержание

  1. Переводы
  2. Query Selector
  3. CSS & Style
  4. Манипуляция с DOM
  5. Ajax
  6. События
  7. Утилиты
  8. Альтернативы
  9. Поддержка браузеров

Переводы

Query Selector

Для часто используемых селекторов, таких как class, id или attribute мы можем использовать document.querySelector или document.querySelectorAll для замены. Разница такова:

  • document.querySelector возвращает первый совпавший элемент
  • document.querySelectorAll возвращает все совпавшие элементы как список узлов (NodeList). Его можно конвертировать в массив, используя Array.prototype.slice.call(document.querySelectorAll(selector));
  • Если никакие элементы не совпадут, jQuery и document.querySelectorAll вернет [] где document.querySelector вернет null.

Заметка: document.querySelector и document.querySelectorAll достаточно МЕДЛЕННЫ, старайтесь использовать getElementById, document.getElementsByClassName или document.getElementsByTagName если хотите улучшить производительность.

  • 1.0 Query by selector

    // jQuery
$('selector');

// Нативно
document.querySelectorAll('selector');

  • 1.1 Запрос по классу

    // jQuery
$('.class');

// Нативно
document.querySelectorAll('.class');

// или
document.getElementsByClassName('class');

  • 1.2 Запрос по ID

    // jQuery
$('#id');

// Нативно
document.querySelector('#id');

// или
document.getElementById('id');

  • 1.3 Запрос по атрибуту

    // jQuery
$('a[target=_blank]');

// Нативно
document.querySelectorAll('a[target=_blank]');

  • 1.4 Найти среди потомков

    // jQuery
$el.find('li');

// Нативно
el.querySelectorAll('li');

  • 1.5 Родственные/Предыдущие/Следующие Элементы

    • Родственные элементы

      // jQuery
$el.siblings();

// Нативно
Array.prototype.filter.call(el.parentNode.children, (child) =>
  child !== el
);

    • Предыдущие элементы

      // jQuery
$el.prev();

// Нативно
el.previousElementSibling;

    • Следующие элементы

      // jQuery
$el.next();

// Нативно
el.nextElementSibling;

  • 1.6 Ближайший

    Возвращает первый совпавший элемент по предоставленному селектору, проходя от текущего элемента до документа.

    // jQuery
$el.closest(selector);

// Нативно - только последние версии браузеров, без IE
el.closest(selector);

// Нативно - IE10+
function closest(el, selector) {
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  while (el) {
    if (matchesSelector.call(el, selector)) {
      return el;
    } else {
      el = el.parentElement;
    }
  }
  return null;
}

  • 1.7 Родители до

    Получить родителей каждого элемента в текущем результате совпавших элементов, но не включая элемент, совпавший с указанным селектором, узлом DOM'а, или объектом jQuery.

    // jQuery
$el.parentsUntil(selector, filter);

// Нативно
function parentsUntil(el, selector, filter) {
  const result = [];
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;

  // Совпадать начиная от родителя
  el = el.parentElement;
  while (el && !matchesSelector.call(el, selector)) {
    if (!filter) {
      result.push(el);
    } else {
      if (matchesSelector.call(el, filter)) {
        result.push(el);
      }
    }
    el = el.parentElement;
  }
  return result;
}

  • 1.8 Форма

    • Input/Textarea

      // jQuery
$('#my-input').val();

// Нативно
document.querySelector('#my-input').value;

    • Получить индекс e.currentTarget между .radio

      // jQuery
$('.radio').index(e.currentTarget);

// Нативно
Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);

  • 1.9 Содержимое Iframe

    $('iframe').contents() возвращает contentDocument именно для этого iframe

    • Контент Iframe

      // jQuery
$iframe.contents();

// Нативно
iframe.contentDocument;

    • Iframe Query

      // jQuery
$iframe.contents().find('.css');

// Нативно
iframe.contentDocument.querySelectorAll('.css');

  • 1.10 Найти body

    // jQuery
$('body');

// Нативно
document.body;

  • 1.11 Получение и изменение атрибута

    • Найти атрибут

      // jQuery
$el.attr('foo');

// Нативно
el.getAttribute('foo');

    • Добавление атрибута

      // jQuery, помните, это происходит в памяти без изменения DOM
$el.attr('foo', 'bar');

// Нативно
el.setAttribute('foo', 'bar');

    • Найти data- атрибут

      // jQuery
$el.data('foo');

// Нативно (используя `getAttribute`)
el.getAttribute('data-foo');

// Нативно (используя `dataset`, если не требуется поддержка ниже IE 11)
el.dataset['foo'];

⬆ Наверх

CSS & Style

  • 2.1 CSS

    • Получить стили

      // jQuery
$el.css('color');

// Нативно
// ЗАМЕТКА: Известная ошибка, возвращает 'auto' если значение стиля 'auto'
const win = el.ownerDocument.defaultView;

// null означает не возвращать псевдостили
win.getComputedStyle(el, null).color;

    • Присвоение style

      // jQuery
$el.css({ color: '#f01' });

// Нативно
el.style.color = '#f01';

    • Получение/Присвоение стилей

      Заметьте что если вы хотите присвоить несколько стилей за раз, вы можете сослаться на setStyles метод в пакете oui-dom-utils.

    • Добавить класс

      // jQuery
$el.addClass(className);

// Нативно
el.classList.add(className);

    • Удалить class

      // jQuery
$el.removeClass(className);

// Нативно
el.classList.remove(className);

    • Имеет ли класс

      // jQuery
$el.hasClass(className);

// Нативно
el.classList.contains(className);

    • Переключить класс

      // jQuery
$el.toggleClass(className);

// Нативно
el.classList.toggle(className);

  • 2.2 Ширина и Высота

    Ширина и высота теоретически имеют общие свойства, например возьмем высоту:

    • Высота окна

      // Высота окна
$(window).height();

// без полосы прокрутки, ведет себя как jQuery
window.document.documentElement.clientHeight;

// вместе с полосой прокрутки
window.innerHeight;

    • Высота документа

      // jQuery
$(document).height();

// Нативно
const body = document.body;
const html = document.documentElement;
const height = Math.max(
  body.offsetHeight,
  body.scrollHeight,
  html.clientHeight,
  html.offsetHeight,
  html.scrollHeight
);

    • Высота элемента

      // jQuery
$el.height();

// Нативно
function getHeight(el) {
  const styles = window.getComputedStyle(el);
  const height = el.offsetHeight;
  const borderTopWidth = parseFloat(styles.borderTopWidth);
  const borderBottomWidth = parseFloat(styles.borderBottomWidth);
  const paddingTop = parseFloat(styles.paddingTop);
  const paddingBottom = parseFloat(styles.paddingBottom);
  return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}

// С точностью до целого числа（когда `border-box`, это `height - border`; когда `content-box`, это `height + padding`）
el.clientHeight;

// С точностью до десятых（когда `border-box`, это `height`; когда `content-box`, это `height + padding + border`）
el.getBoundingClientRect().height;

  • 2.3 Позиция и смещение

    • Position

      Получить текущие координаты элемента относительно смещения его родителя

      // jQuery
$el.position();

// Нативно
{ left: el.offsetLeft, top: el.offsetTop }

    • Offset

      Получить текущие координаты элемента относительно документа

      // jQuery
$el.offset();

// Нативно
function getOffset (el) {
  const box = el.getBoundingClientRect();

  return {
    top: box.top + window.pageYOffset - document.documentElement.clientTop,
    left: box.left + window.pageXOffset - document.documentElement.clientLeft
  };
}

  • 2.4 Прокрутка вверх

    // jQuery
$(window).scrollTop();

// Нативно
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;

⬆ Наверх

Манипуляции с DOM

  • 3.1 Remove

    Удаление элемента из DOM.

    // jQuery
$el.remove();

// Нативно
el.parentNode.removeChild(el);

  • 3.2 Text

    • Получить текст

      Получить текстовое содержимое элемента, включая его потомков,

      // jQuery
$el.text();

// Нативно
el.textContent;

    • Присвоить текст

      // jQuery
$el.text(string);

// Нативно
el.textContent = string;

  • 3.3 HTML

    • Получить HTML

      // jQuery
$el.html();

// Нативно
el.innerHTML;

    • Присвоить HTML

      // jQuery
$el.html(htmlString);

// Нативно
el.innerHTML = htmlString;

  • 3.4 Append

    Добавить родительскому элементу новый дочерний элемент.

    // jQuery
$el.append('<div id="container">Hello World</div>');

// Нативно (строка HTML)
el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>');

// Нативно (элемент)
el.appendChild(newEl);

  • 3.5 Prepend

    Добавить родительскому элементу новый дочерний элемент перед остальными

    // jQuery
$el.prepend('<div id="container">Hello World</div>');

// Нативно (строка HTML)
el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>');

// Нативно (элемент)
el.insertBefore(newEl, el.firstChild);

  • 3.6 insertBefore

    Вставка нового элемента перед выбранным элементом

    // jQuery
$newEl.insertBefore(selector);

// Нативно (строка HTML)
el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>');

// Нативно (элемент)
const el = document.querySelector(selector);
if (el.parentNode) {
  el.parentNode.insertBefore(newEl, el);
}

  • 3.7 insertAfter

    Вставка новго элемента после выбранного элемента

    // jQuery
$newEl.insertAfter(selector);

// Нативно (строка HTML)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>');

// Нативно (элемент)
const el = document.querySelector(selector);
if (el.parentNode) {
  el.parentNode.insertBefore(newEl, el.nextSibling);
}

  • 3.8 is

    Возвращает true если совпадает с селектором запроса

    // jQuery - заметьте что `is` так же работает с `function` или `elements` которые не имеют к этому отношения
$el.is(selector);

// Нативно
el.matches(selector);

⬆ Наверх

Ajax

Fetch API - новый стандарт, заменяющий XMLHttpRequest для ajax. Работает в Chrome и Firefox, вы можете использовать полифилы, для поддержки старых браузеров.

Попробуйте github/fetch для IE9+ или fetch-ie8 для IE8+, fetch-jsonp для JSONP-запросов.

  • 4.1 Загрузить данные с сервера и поместить полученный HTML в элемент.

    // jQuery
$(selector).load(url, completeCallback)

// Нативно
fetch(url).then(data => data.text()).then(data => {
  document.querySelector(selector).innerHTML = data
}).then(completeCallback)

⬆ Наверх

События

Для полной замены пространства имен и делегирования, используйте oui-dom-events

  • 5.0 Готовность документа по событию DOMContentLoaded

    // jQuery
$(document).ready(eventHandler);

// Нативно
// Проверяем, что событие DOMContentLoaded было выполнено
if (document.readyState !== 'loading') {
  eventHandler();
} else {
  document.addEventListener('DOMContentLoaded', eventHandler);
}

  • 5.1 Связать событие используя on

    // jQuery
$el.on(eventName, eventHandler);

// Нативно
el.addEventListener(eventName, eventHandler);

  • 5.2 Отвязать событие используя off

    // jQuery
$el.off(eventName, eventHandler);

// Нативно
el.removeEventListener(eventName, eventHandler);

  • 5.3 Trigger

    // jQuery
$(el).trigger('custom-event', {key1: 'data'});

// Нативно
if (window.CustomEvent) {
  const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
  const event = document.createEvent('CustomEvent');
  event.initCustomEvent('custom-event', true, true, {key1: 'data'});
}

el.dispatchEvent(event);

⬆ Наверх

Утилиты

Большинство из утилит, представленных в jQuery также могут быть найдены в нативном API. Более продвинутые функции могут быть выбраны из других, более актуальных библиотек, направленных на согласованность данных и производительность. Например, Lodash является рекомендуемой заменой.

  • 6.1 Basic utilities

    • isArray

    Определить, является ли аргумент массивом.

    // jQuery
$.isArray(array);

// Нативно
Array.isArray(array);

  • isWindow

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

    // jQuery
$.isWindow(obj);

// Нативно
function isWindow(obj) {
  return obj !== null && obj !== undefined && obj === obj.window;
}
    • inArray

Поиск определенного значения в массиве и возвращение его индекса (или -1 если значение не найдено)

// jQuery
$.inArray(item, array);

// Нативно
array.indexOf(item) > -1;

// В нотации ES6
array.includes(item);
  • isNumeric

Determine if the argument passed is numerical. Use typeof to decide the type or the type example for better accuracy. Определить, является ли переданный аргумент числовым. Используйте typeof для определения типа или type для большей точности.

// jQuery
$.isNumeric(item);

// Нативно
function isNumeric(n) {
  return !isNaN(parseFloat(n)) && isFinite(n);
}
  • isFunction

Определить, является ли переданный аргумент функцией(объектом) JavaScript.

// jQuery
$.isFunction(item);

// Нативно
function isFunction(item) {
  if (typeof item === 'function') {
    return true;
  }
  var type = Object.prototype.toString.call(item);
  return type === '[object Function]' || type === '[object GeneratorFunction]';
}
  • isEmptyObject

Проверить, является ли объект пустым (не содержащим перечесляемых свойств)

// jQuery
$.isEmptyObject(obj);

// Нативно
function isEmptyObject(obj) {
  return Object.keys(obj).length === 0;
}
  • isPlainObject

Проверить, является ли объект простым / 'ванильным' (созданным с помощью “{}” или “new Object”)

// jQuery
$.isPlainObject(obj);

// Нативно
function isPlainObject(obj) {
  if (typeof (obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) {
    return false;
  }

  if (obj.constructor &&
      !Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
    return false;
  }

  return true;
}
  • extend

Объединить содержимое двух или более объектов в новый объект, не изменяя ни один из аргументов. object.assign является частью ES6 API, также можно использовать полифилл.

// jQuery
$.extend({}, object1, object2);

// Нативно
Object.assign({}, object1, object2);
  • trim

Убрать символы пробелов из начала и конца строки.

// jQuery
$.trim(string);

// Нативно
string.trim();
  • map

Преобразовать все элементы массива или объекта в новый массив.

// jQuery
$.map(array, (value, index) => {
});

// Нативно
array.map((value, index) => {
});
  • each

Общая (generic) функция итератора, которую можно использовать для последовательной итерации как по объектам, так и по массивам.

// jQuery
$.each(array, (index, value) => {
});

// Нативно
array.forEach((value, index) => {
});
  • grep

Найти элементы массива которые удовлетворяют функции-фильтру.

// jQuery
$.grep(array, (value, index) => {
});

// Нативно
array.filter((value, index) => {
});
  • type

Определите внутренний класс JavaScript объекта.

// jQuery
$.type(obj);

// Нативно
function type(item) {
  const reTypeOf = /(?:^\[object\s(.*?)\]$)/;
  return Object.prototype.toString.call(item)
    .replace(reTypeOf, '$1')
    .toLowerCase();
}
  • merge

Объединить содержимое двух массивов в первый массив.

// jQuery, не удаляя дубликаты
$.merge(array1, array2);

// Нативно, не удаляя дубликаты
function merge(...args) {
  return [].concat(...args)
}

// В нотации ES6, не удаляя дубликаты
array1 = [...array1, ...array2]

// Версия с удалением дубликатов
function merge(...args) {
  return Array.from(new Set([].concat(...args)))
}
  • now

Вернуть текущее время в числовом формате.

// jQuery
$.now();

// Нативно
Date.now();
  • proxy

По заданной функции, создает другую такую же, cохраняя контекст.

// jQuery
$.proxy(fn, context);

// Нативно
fn.bind(context);

+ makeArray

Конвертирует объекты, похожие на массивы, в массивы JavaScript.

// jQuery
$.makeArray(arrayLike);

// Нативно
Array.prototype.slice.call(arrayLike);

// В нотации ES6: Array.from() метод
Array.from(arrayLike);

// В нотации ES6: используя оператор распространения
[...arrayLike];

  • 6.2 Contains

    Проверяет, не является ли элемент DOM потомком другого элемента DOM.

    // jQuery
$.contains(el, child);

// Нативно
el !== child && el.contains(child);

  • 6.3 Globaleval

    Исполняет определенный JavaScript код глобально.

    // jQuery
$.globaleval(code);

// Нативно
function Globaleval(code) {
  const script = document.createElement('script');
  script.text = code;

  document.head.appendChild(script).parentNode.removeChild(script);
}

// Используем eval, учитывая, что контекст eval текущий, а контекст $.Globaleval глобальный.
eval(code);

  • 6.4 parse

    • parseHTML

    Разбирает строку в массив узлов DOM.

    // jQuery
$.parseHTML(htmlString);

// Нативно
function parseHTML(string) {
  const context = document.implementation.createHTMLDocument();

  // Устанавливает базовую ссылку для созданного документа, чтобы любые проанализированные элементы с URL-адресами
  // основывались на URL-адресе документа.
  const base = context.createElement('base');
  base.href = document.location.href;
  context.head.appendChild(base);

  context.body.innerHTML = string;
  return context.body.children;
}

  • 6.5 exists

  • exists

    Проверяет, существует ли элемент в DOM.

    // jQuery
if ($('selector').length) {
   // exists
}

// Нативно
var element =  document.getElementById('elementId');
if (typeof(element) != 'undefined' && element != null)
{
   // exists
}

⬆ Наверх

Промисы (Promises)

Промисы предоставляют собой удобный способ организации асинхронного кода. У jQuery есть свой способ обработки промисов. Нативный JavaScript реализует тонкий и минимальный API для обработки промисов в соответствии с Promises/A+ спецификацией.

  • 7.1 done, fail, always

    done вызывается, когда промис разрешен, fail вызывается, когда промис отклонен, always вызывается, когда промис либо разрешен, либо отклонен.

    // jQuery
$promise.done(doneCallback).fail(failCallback).always(alwaysCallback)

// Нативно
promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)

  • 7.2 when

    when используется для обработки нескольких промисов. Он разрешится, когда будут выполнены все промисы, и отклонится, если один из промисов будет отклонен.

    // jQuery
$.when($promise1, $promise2).done((promise1Result, promise2Result) => {
});

// Нативно
Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] => {});

  • 7.3 Deferred

    Отложенный способ создания промисов.

    // jQuery
function asyncFunc() {
  const defer = new $.Deferred();
  setTimeout(() => {
    if(true) {
      defer.resolve('some_value_computed_asynchronously');
    } else {
      defer.reject('failed');
    }
  }, 1000);

  return defer.promise();
}

// Нативно
function asyncFunc() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (true) {
        resolve('some_value_computed_asynchronously');
      } else {
        reject('failed');
      }
    }, 1000);
  });
}

// Отложенным способом
function defer() {
  const deferred = {};
  const promise = new Promise((resolve, reject) => {
    deferred.resolve = resolve;
    deferred.reject = reject;
  });

  deferred.promise = () => {
    return promise;
  };

  return deferred;
}

function asyncFunc() {
  const defer = defer();
  setTimeout(() => {
    if(true) {
      defer.resolve('some_value_computed_asynchronously');
    } else {
      defer.reject('failed');
    }
  }, 1000);

  return defer.promise();
}

⬆ Наверх

Анимации

  • 8.1 Show & Hide

    // jQuery
$el.show();
$el.hide();

// Нативно
// За дополнительной информацией о методе show, пройдите по ссылке https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363
el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
el.style.display = 'none';

  • 8.2 Toggle

    Показать или скрыть элемент.

    // jQuery
$el.toggle();

// Нативно
if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') {
  el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block';
} else {
  el.style.display = 'none';
}

  • 8.3 FadeIn & FadeOut

    // jQuery
$el.fadeIn(3000);
$el.fadeOut(3000);

// Нативный fadeOut (исчезновение)
function fadeOut(el, ms) {
  if (ms) {
    el.style.transition = `opacity ${ms} ms`;
    el.addEventListener(
      'transitionend',
      function(event) {
        el.style.display = 'none';
      },
      false
    );
  }
  el.style.opacity = '0';
}

// Нативный fadeIn (появление)
function fadeIn(elem, ms) {
  elem.style.opacity = 0;

  if (ms) {
    let opacity = 0;
    const timer = setInterval(function() {
      opacity += 50 / ms;
      if (opacity >= 1) {
        clearInterval(timer);
        opacity = 1;
      }
      elem.style.opacity = opacity;
    }, 50);
  } else {
    elem.style.opacity = 1;
  }
}

  • 8.4 FadeTo

    Регулировка непрозрачности элемента.

    // jQuery
$el.fadeTo('slow',0.15);
// Нативно
el.style.transition = 'opacity 3s'; // assume 'slow' equals 3 seconds
el.style.opacity = '0.15';

  • 8.5 FadeToggle

    Отображение или скрытие элемента через изменение его непрозрачности.

    // jQuery
$el.fadeToggle();

// Нативно
el.style.transition = 'opacity 3s';
const { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (opacity === '1') {
  el.style.opacity = '0';
} else {
  el.style.opacity = '1';
}

  • 8.6 SlideUp & SlideDown

    // jQuery
$el.slideUp();
$el.slideDown();

// Нативно
const originHeight = '100px';
el.style.transition = 'height 3s';
// slideUp
el.style.height = '0px';
// slideDown
el.style.height = originHeight;

  • 8.7 SlideToggle

    Отобразить или скрыть элемент скользящим движением (слайдом).

    // jQuery
$el.slideToggle();

// Нативно
const originHeight = '100px';
el.style.transition = 'height 3s';
const { height } = el.ownerDocument.defaultView.getComputedStyle(el, null);
if (parseInt(height, 10) === 0) {
  el.style.height = originHeight;
} else {
 el.style.height = '0px';
}

  • 8.8 Animate

    Perform a custom animation of a set of CSS properties. Применить пользовательский набор свойств анимации CSS.

    // jQuery
$el.animate({ params }, speed);

// Нативно
el.style.transition = 'all ' + speed;
Object.keys(params).forEach((key) =>
  el.style[key] = params[key];
)

Альтернативы

  • You Might Not Need jQuery - Примеры как исполняются частые события, элементы, ajax и тд с ванильным javascript.
  • npm-dom и webmodules - Отдельные DOM модули можно найти на NPM

Поддержка браузеров

Chrome Firefox IE Opera Safari
Latest ✔ Latest ✔ 10+ ✔ Latest ✔ 6.1+ ✔

License

MIT