Добавление новых методов

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

Основы расширения

Расширение библиотеки осуществляется через объект fn. Все методы, определенные в Cash.fn, становятся доступными для любого экземпляра Cash, то есть для объектов, создаваемых с помощью cash(selector).

Простейший пример добавления метода:

cash.fn.log = function() {
    this.each(el => console.log(el));
    return this;
};

Здесь:

fn — объект прототипа, к которому привязываются новые методы.
this внутри метода ссылается на текущую коллекцию элементов Cash.
each используется для перебора элементов, аналогично forEach.
Возврат this обеспечивает возможность цепочек вызовов.

Пример использования:

cash('div').log().addClass('highlight');

Метод log выводит все выбранные элементы в консоль, после чего к ним можно применить стандартные методы Cash.

Аргументы и обработка параметров

При добавлении методов важно корректно обрабатывать параметры, чтобы метод был гибким и соответствовал стилю Cash. Например, метод для изменения текста всех элементов:

cash.fn.setText = function(content) {
    return this.each(el => {
        if (typeof content === 'function') {
            el.textContent = content(el);
        } else {
            el.textContent = content;
        }
    });
};

Особенности:

content может быть строкой или функцией.
Функция позволяет динамически вычислять текст для каждого элемента.
Возврат this сохраняет цепочку.

Применение:

cash('p').setText(el => `Длина текста: ${el.textContent.length}`);

Работа с атрибутами

Добавление методов для работы с атрибутами и свойствами DOM требует понимания различий между ними. Пример метода для массового изменения атрибутов:

cash.fn.setAttrs = function(attrs) {
    return this.each(el => {
        for (const key in attrs) {
            el.setAttribute(key, attrs[key]);
        }
    });
};

Такой метод позволяет передавать объект с ключами и значениями:

cash('img').setAttrs({ alt: 'Изображение', loading: 'lazy' });

Метод поддерживает работу с несколькими атрибутами одновременно, что делает код более лаконичным.

Создание методов с возвратом данных

Не все методы должны возвращать this. Иногда необходимо получить значение или массив значений из коллекции элементов:

cash.fn.getTexts = function() {
    return this.map(el => el.textContent);
};

Особенности:

map используется для преобразования коллекции элементов в массив.
Метод возвращает массив строк, а не Cash-объект.
Подходит для сбора данных с нескольких элементов без нарушения цепочек, если применить отдельно от цепочки.

Пример использования:

const texts = cash('li').getTexts();
console.log(texts);

Методы с условной цепочкой

Иногда нужно создавать методы, которые могут как возвращать данные, так и быть цепочными, в зависимости от параметров:

cash.fn.textOrSet = function(value) {
    if (value === undefined) {
        return this[0] ? this[0].textContent : null;
    }
    return this.each(el => el.textContent = value);
};

Поведение:

Без аргументов возвращает текст первого элемента.
С аргументом устанавливает текст для всех элементов и возвращает this.

Применение:

const firstText = cash('p').textOrSet(); // получение текста
cash('p').textOrSet('Новый текст'); // установка текста

Поддержка цепочек при асинхронных операциях

Методы можно расширять для работы с асинхронными процессами, сохраняя цепочки. Пример метода, который изменяет класс с задержкой:

cash.fn.addClassDelayed = function(className, delay) {
    this.each(el => setTimeout(() => el.classList.add(className), delay));
    return this;
};

Использование:

cash('div').addClassDelayed('visible', 500).setText('Появилось!');

Метод позволяет сохранить привычную цепочку, несмотря на асинхронность.
Важно возвращать this сразу, чтобы не блокировать выполнение цепочки.