Вам не нужен jQuery, но вам нужна библиотека DOM

jQuery
Вам не нужен jQuery, но вам нужна библиотека DOM

Цель написания этой статьи, с одной стороны, познакомить с написанной мной модульной DOM-библиотекой domq.js, с другой стороны, я надеюсь, что у всех есть правильное понимание jQuery, даже если jQuery постепенно вышла из исторической стадии, его API будет существовать в другой форме.

Гитхаб:github.com/nzbin/domq

Документация:С юга на Bin.git books.IO/Dom Please-API/US…

jquery не умирает

От отказа GitHub от jQuery до объявления об удалении jQuery из Bootstrap 5 кажется, что эра наконец подходит к концу.

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

На мой взгляд, самый большой недостаток jQuery в том, что его нельзя внедрить в модули, напрямую импортировать всю библиотеку нецелесообразно, ведь слишком много функций бесполезны. Но манипулирование DOM с помощью jQuery по-прежнему необходимо. Многие люди сомневаются в моей точке зрения. На самом деле при использовании фреймворка MVVM операций с DOM действительно очень мало. Но мы не всегда можем выполнять некоторые функции CRUD. Некоторые манипуляции с DOM по-прежнему необходимы для сложных бизнес-требований.

Если jQuery может отделить функциональные модули, связанные с манипулированием DOM, все еще может быть много места для использования.

туземное господство

В обычных проектах все больше и больше людей предпочитают использовать собственный JS для управления объектами, например, для получения атрибутов элементов, ширины и высоты, позиционирования и так далее.

Еще несколько лет назад на github было много статей о том, как заменить jQuery на нативный JS, напримерYouDontNeedJQuery,YouMightNotNeedjQueryЖдать. Насколько я понимаю, чистые операции JS действительно просты, но не очень элегантны, а более сложные операции часто обращаются к MDN.

// jQuery
$('.my #awesome selector');

// JS
document.querySelectorAll('.my #awesome selector');

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

// JS
el.style.display = 'none';

// jQuery
$(el).after(htmlString);

// JS
el.insertAdjacentHTML('afterend', htmlString);

Выше приведено сравнение jQuery и нативного JS в микромире.Результат очевиден, API jQuery более лаконичен. Кроме того, использование API jQuery также очень единообразно. Напротив, использование API нативного JS более разнообразно, включая назначение и передачу параметров. Кроме того, имена API нативного JS длинные и их неудобно запоминать. В этом также смысл рождения многих библиотек JS.

Многие плагины обычно имеютutilsфайл, в основном будет выполнять простую инкапсуляцию собственного метода и предоставлять некоторые инструментальные методы.

Сильные и слабые стороны Зепто

Zepto — дальновидная библиотека, почему я пришел к такому выводу? Zepto дополнительно абстрагирует нативные методы и упрощает их использование. Как я уже сказал выше, поскольку API jQuery прост и удобен в использовании, и мы лучше знакомы с ним, почему бы нам не объединить jQuery с собственным JS? Удивительно, но авторы Zepto уже сделали это еще в 2010 году. Большинство API-интерфейсов jQuery реализованы с помощью собственного JS, и коэффициент замены близок к 90%.По крайней мере, в плагинах, которые я написал, почти все API-интерфейсы jQuery могут быть заменены. И Zepto не используется вслепуюdocument.querySelectorметод, но используйте его выборочно в зависимости от производительностиdocument.getElementByIdтак же какdocument.querySelectorЖдать.

Но есть у Zepto и очевидные недостатки.Ведь это все-таки продукт прошлой эпохи.Во-первых, он не может загружаться по требованию.Сейчас мы охотнее внедряем какие-то методы в соответствии с собственными потребностями при написании проектов,а не импорт всей библиотеки.Хотя Zepto не большой, но все же вызывает некоторое отвращение как обсессивно-компульсивное расстройство. Кроме того, в самой Zepto есть некоторые ошибки, такие какscrollTop,scrollLeftметод. См. исходный код для других различий.

// Zepto
scrollTop: function(value) {
    if (!this.length) return
    var hasScrollTop = 'scrollTop' in this[0]
    if (value === undefined) return hasScrollTop ? this[0].scrollTop : this[0].pageYOffset
    return this.each(hasScrollTop ?
        function() { this.scrollTop = value } :
        function() { this.scrollTo(this.scrollX, value) })
}

documentЭлемент не может получить правильное значение, я поднял вопрос об этой проблеме, но ответа нет, Zepto в настоящее время практически не обслуживается. Правильный способ следующий:

// Domq
function scrollTop(value) {
    if (!this.length) return
    var hasScrollTop = 'scrollTop' in this[0]
    if (value === undefined) return hasScrollTop
        ? this[0].scrollTop
        : isWindow(this[0])
            ? this[0].pageYOffset
            : this[0].defaultView.pageYOffset;
    return this.each(hasScrollTop ?
        function () { this.scrollTop = value } :
        function () { this.scrollTo(this.scrollX, value) })
}

Миссия Домка

Существует множество библиотек для работы с DOM в виде jQuery, таких какbonzo,$dom, но когда я рефакторил плагин jQuery, я обнаружил, что нет возможности напрямую заменить jQuery этими библиотеками, только Zepto относительно совершенен, но я не хочу вводить дополнительные бесполезные методы.

В конце концов я решил обновить Zepto, чтобы он больше соответствовал текущим привычкам использования. Чтобы сказать немного больше, я лично считаю, что основные функции Zepto немного запутаны, а в пространстве имен есть и то, и другое.zepto, а также$,Z, это кажется очень запутанным, а основная функция domq заключается только вDЭто пространство имен, форма и функция почти такие же, как основные функции jQuery, и их можно рассматривать как мини-версию jQuery.

// Zepto 核心方法
var Zepto = (function() {
    var zepto = {};
    ...
    zepto.Z = function(dom, selector) {
        return new Z(dom, selector)
    }
    ...
    $ = function(selector, context) {
        return zepto.init(selector, context)
    }
    ...
})()

// Domq 核心方法
var D = function (selector, context) {
    return new D.fn.init(selector, context);
}

D.fn = D.prototype = {
	...
	init: function(){
		...
	}
	...
}

Конечно, самое главное в Domq — загружать его по запросу, монтировать методы по мере необходимости и минимизировать ненужный код. Способ его использования очень прост, но нужно создать отдельный файл и перемонтировать нужные методы вDПространство имен, это очень полезно при написании плагинов.

import {
  D,
  isArray,
  addClass
} from 'domq.js/src/domq.modular';

// 静态方法
const methods = {
  isArray
}

// 原型方法
const fnMethods = {
  addClass
}

D.extend(methods);
D.fn.extend(fnMethods);

Кроме того, некоторые инструментальные методы часто используются при выполнении проектов.В настоящее время это может быть лучшим способом представить эти методы с помощью инструментальной библиотеки. У Domq также есть несколько общих методов инструментов, но их нужно немного доработать.

D.type()
D.contains()
D.camelCase()
D.isFunction()
D.isWindow()
D.isEmptyObject()
D.isPlainObject()
D.isNumeric()
D.isArray()
D.inArray()
...

В Domq не так много нового, так что вводить особо нечего, он уже есть в плагине.PhotoViewerИ его можно использовать в реальных проектах, вы можете скачать и использовать.

Суммировать

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

Гитхаб:github.com/nzbin/domq

Категории