Библиотека JQuery была создана в 2006 году для восполнения недостающей функциональности Javascript. С тех пор последний достаточно продвинулся в своем развитии, чтобы разработчики могли обходиться без JQuery, основная проблема которой — производительность.
На Хабре было несколько статей с объективными замерами «тормознутости» JQuery на селекторных запросах.
(запуск в цикле по 10000 раз)
В сети достаточно много хороших описаний аналогов JQuery функций на чистом Javascript-e — например, вот здесь.
Но самая мощь JQuery — в лаконичности и красоте ее выражений. Даже психологически тяжело переписывать существующий код, меняя элегантные $() на многострочные конструкции.
Попробуем, насколько возможно, оставить язык JQuery, [частично] заменив ее саму. Для этого нам нужно только или переопределить $() функцию, или заменить (что лучше) на свою — пусть это будет $jqr(). Она также будет возвращать объект, но уже «нативный» и не обремененный ненужными нам JQuery функциями.
Пример кода:
JQuery код:
Меняется на:
В конструкторе класса желательно парсить sel, чтобы более эффективно применять querySelectorAll(), getElementsByClassName() и getElementById().
Таким образом мы можем реализовывать в классе JQR только нужные нам функции, не выходя за рамки стандартного Javascript-а и не сильно трогая существующий код.
Необязательно даже полностью избавляться от JQuery — частичная оптимизация уже даст результат.
На Хабре было несколько статей с объективными замерами «тормознутости» JQuery на селекторных запросах.
|
4,649 ms |
|
3,437 ms |
|
1,362 ms |
|
1,168 ms |
|
107 ms |
|
75 ms |
В сети достаточно много хороших описаний аналогов JQuery функций на чистом Javascript-e — например, вот здесь.
Но самая мощь JQuery — в лаконичности и красоте ее выражений. Даже психологически тяжело переписывать существующий код, меняя элегантные $() на многострочные конструкции.
Попробуем, насколько возможно, оставить язык JQuery, [частично] заменив ее саму. Для этого нам нужно только или переопределить $() функцию, или заменить (что лучше) на свою — пусть это будет $jqr(). Она также будет возвращать объект, но уже «нативный» и не обремененный ненужными нам JQuery функциями.
Пример кода:
<html>
<body>
<p id="message"></p>
</body>
</html>
JQuery код:
$("#message").html("Hello world!");
Меняется на:
$jqr("#message").html("Hello world!");
// JQuery Replacement
function $jqr(sel) {
return new JQR(sel);
}
class JQR {
constructor(sel) {
this.sel = sel;
this.elements = document.querySelectorAll(sel);
}
html(str) {
for (var i = 0; i < this.elements.length; i++) {
this.elements[i].innerHTML = str;
}
}
}
В конструкторе класса желательно парсить sel, чтобы более эффективно применять querySelectorAll(), getElementsByClassName() и getElementById().
Таким образом мы можем реализовывать в классе JQR только нужные нам функции, не выходя за рамки стандартного Javascript-а и не сильно трогая существующий код.
Необязательно даже полностью избавляться от JQuery — частичная оптимизация уже даст результат.