Как правильно оформить helper функции?

Question

[Dubrovin]

Здравствуйте,
хочется создать свои helper функции, что-то вроде:

/* helpers.js */
function find( el, selector ) {
    return el.querySelector( selector );
}

function on( el, event, callback ) {
    el.addEventListener( event, callback );
}

в целях сокращения кода.

Сами функции будут описаны в файле helpers.js, который сборщиком RollupJS попадёт в начало финального JS файла (используются ES6 import / export, но в финальный файл import / export не попадает).
Не понятно, как лучше организовать хранение этих функций. Если оставить как есть, то они попадут в window (могут быть конфликты), если положить в глобальную переменную, например, abc вот так:

/* helpers.js */
abc.find = function( el, selector ) {
    return el.querySelector( selector );
}

abc.on = function( el, event, callback ) {
    el.addEventListener( event, callback );
}

то при вызове придётся каждый раз писать abc, например, abc.find( el, selector) ...
Ну и наткнулся на статью: https://frontender.info/designing-javascript-apis-...
Хочется использовать цепочки методов, чтобы писать не abc.find( el, selector ), а el.find( selector ), как это делается в jQuery.

Может кто-нибудь привести пример кода как можно всё это оформить? Нужен эдакий мини-jQuery под свои нужды.

Comments

[Dubrovin]

То есть я могу написать, например, вот так:

Object.prototype.find = function( selector ) {
    return this.querySelector( selector ); 
}

и использовать потом в коде следующим образом: el.find( '.myclass') ?
Насколько это хорошая практика, ведь могут быть конфликты с другими js файлами, если кто-нибудь из разработчиков использует те же самые подходы.

[Александр]

Dubrovin, вполне. Обычно так не делают (За исключением jQuery, так пишут плагины под него.), т.к. это добавляет магию в проект и усложняет разбор кода. Например другой программист, скорее всего будет искать ваш метод find в офф. документации и не найдет его, что некоторых может сильно озадачить.
Успользовать такой подход или нет решать вам..

[Dubrovin]

Minifets, дак а что это единственный подход? как обычно добавляют helper функции?

[Dubrovin]

Не работает, так как вы пишите, плюс начинают вываливаться ошибки если на странице подключен jQuery.

[Александр]

Dubrovin,

1) Просто объявить глобальную функцию.
2) Создать класс Util и в него добавить хелпер.
3) Сделать аналог jQuery и в него добавить хелперы.
4) Добавить хелперы в сам jQuery или его аналоги.
5) Добавить хелперы в нативные класса.

По мне так лучше использовать 4 вариант, либо 2-ой, если нет зависимости от framework-а.

[Dubrovin]

Minifets,
jQuery не используем. Как это должно работать я понимаю, я не понимаю, как это запрограммировать.
Вот на счёт добавления своих методов в Object: prntscr.com/iarrx7
На словах всё просто, на деле - нет. Не понятно, почему нет готовых паттернов под свои хелперы.
Не понятно даже, как например, перезаписать стандартные API-функции своими, например, вместо querySelector - find, вместо addEventListener - on (как это сделано в jQuery).

[Александр]

Dubrovin, jQuery не перезаписывает функции, это всего лишь обертка, например:

function $(selector) {
    function Wrapper(elem) {
        this.elem = elem;

        this.find = function (selector) {
            return new Wrapper(this.elem.querySelector(selector));
        }
    }
    
    return new Wrapper(document).find(selector);
}

Как-то так.

P.S. И да, перезаписать стандартные API-функции своими ни в коем случае нельзя.

[Dubrovin]

Minifets, я не много не так выразился, я хочу добавить свои функции, аналогичные стандартным. Т.е. вместо document.querySelector( 'input' ) писать K('input'), вместо input.addEventListener( 'click', function(){ }) писать K('input').on('click', function() { }). Если например, внутрь K передать не селектор, а ноду или window, то должен возвращаться объект со свойство elem = window (в вашем приведённом коде это вызовет ошибку).

[Dubrovin]

Ещё кстати вопрос на счёт производительности, это получается, что каждый экземпляр обёртки будет содержать в себе декларации всех кастомных методов? Я так понимаю, что это не очень хорошая практика.

[Александр]

Dubrovin,

Ещё кстати вопрос на счёт производительности, это получается, что каждый экземпляр обёртки будет содержать в себе декларации всех кастомных методов? Я так понимаю, что это не очень хорошая практика.

Все кастомные методы выносятся в prototype, при создании новых объектов они не копируются, а остаются доступны через prototype. см. Jquery.

(в вашем приведённом коде это вызовет ошибку)

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

[Dubrovin]

Minifets, дак вот и не понятно, как сделать этот рабочий код... в jQuery слишком много кода, чтобы понять какой именно отвечает за нужный функционал.
Нужен хотя бы рабочий пример для двух методов find и on. Чтобы функция могла принимать как элемент (document, Node, window, HTMLElement), так и строковый селектор.
Можете помочь запрограммировать? Я готов заплатить за вашу консультацию, если напишите контакты как с вами связаться.

[Александр]

Dubrovin, Смогу только на выходных. Можете написать на почту или в skype ([e-mail])

Answer 1

[Александр]

el.find( selector ), как это делается в jQuery.

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

String.prototype.customFunction = function () {
    console.log('кастомная функция');
};

let a = 'test';
a.customFunction();
"test".customFunction();