habrahabr

Вариант миграции с JQuery на чистый Javascript

  • среда, 8 августа 2018 г. в 00:19:27
https://habr.com/post/419471/
  • Разработка веб-сайтов
  • Клиентская оптимизация
  • jQuery
  • JavaScript


Библиотека JQuery была создана в 2006 году для восполнения недостающей функциональности Javascript. С тех пор последний достаточно продвинулся в своем развитии, чтобы разработчики могли обходиться без JQuery, основная проблема которой — производительность.



На Хабре было несколько статей с объективными замерами «тормознутости» JQuery на селекторных запросах.
// jQuery 2.0
var c = $("#comments .comment");
 4,649 ms 
// jQuery 2.0 
var c = $(".comment");
 3,437 ms 
// native querySelectorAll
var c = document.querySelectorAll("#comments .comment");
 1,362 ms 
// native querySelectorAll
var c = document.querySelectorAll(".comment");
 1,168 ms 
// native getElementById / getElementsByClassName
var n = document.getElementById("comments"); 
var c = n.getElementsByClassName("comment");
 107 ms 
// native getElementsByClassName
var c = document.getElementsByClassName("comment");
 75 ms
(запуск в цикле по 10000 раз)

В сети достаточно много хороших описаний аналогов 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 — частичная оптимизация уже даст результат.