Как написать расширяемый «класс» на javascript?

Question

[magary4]

Подскажите лучшую практику чтоб писать простой но расширяемый и кастомизируемый функционал на javascript
начал гуглить - куча разных костылей чтоб имитировать классы не знаю какой выбрать

надо нечто вроде

function Handler() {

    
     function doSome() { ... }
};

var handler = new Handler();
handler.setOptions( { ... } );
handler.init();

для последующих проектов надо предусмотреть переопределение типа

var handler = new Handler();
handler.soSome = function() { changed logic };
handler.init();

в теле этого класса надо прибиндить некие события типа

$(document).on('click',selector1,function(){}) ;
$(document).on('mouseenter',selector2,function(){}); 
$(document).on('keyup',selector3,function(){})

но в другом проекте возможно надо будет отключить один из этих сабскрайберов

еще по уму это все надо обернуть jQuery типа
(function($){ .. })(jQuery)

подскажите прототип какой-то или хороший пример

Answer 1

[Антон Швец]

https://learn.javascript.ru/es-class
а потом babel для совместимости.

События биндить в конструкторе.

Comments

[magary4]

почему именно в конструкторе?

[Антон Швец]

magary4, просто самое очевидное место. Это не принципиально.
Думаю есть какая-то общая практика для таких вещей, но поскольку все передовые методики переползают с ручного костылинга при помощи jQuery на целостные решения типа Vue и Аngular, красивых решений такого рода мы не увидим. Ну т.е. оно уже есть и называется фреймворк для фронтенда.

[magary4]

Антон, а как быть с замыканиями?

есть у меня в классе след функции

doSome: function() { ... } 

__construct: function() {
  $(document).on('click', selector, this.doSome );
}

как приаттачить this.doSome ?

[Антон Швец]

magary4,
у вас странный код, не вижу класса и что такое __construct
А вообще вот

class Handler {
  constructor() {
    // creation
  }
  doSome() {
    // action
  }
  attachment() {
    $(document).on('click', selector, this.doSome.bind(this) );
  }
}

другой вариант это const self = this;

[magary4]

спасибо помогло

если можно еще один вопрос ))

внутри "класса"

var searchCb = function( data, textStatus, jqXHR ) {
      if( flag   ) {
         ...
     } 
};

var search  = function ( flag )  {
   return jQuery.ajax({
            url: document.location.href,
            data: jQuery(form).serialize(),
            cache: false,
            success: searchCb.bind(this)
        });
};

var fun1 = function() {
    search(true);
};

var fun2 = function() {
    search(false);
};

fun1 вызывает search с флагом true и надо чтоб когда прийдет аякс ответ этот флаг как-то попал в searchCb

[Антон Швец]

magary4, https://developer.mozilla.org/ru/docs/Web/JavaScri...

Answer 2

[grinat]

Прототипы
function Hadler(){}
Handler.prototype = {
bar: null,
foo: function(){
}
}
на них в 90% случаев все и делается.
Jyqery выкинь нахер, это не по уму, это пиздец.

Comments

[magary4]

а чем отличается подход когда вот так делают

var Handler = {

    options: {},

    doSome: function() {

    },

    init: function() {

    }

}

??

надо использовать из коробки Handler.init();
надо что-то прооверайдить
var handler = $.extend(true,{},Handler);
handler.doSome = function() { переопределенная логика }
handler.run();

[grinat]

magary4, так никто не делает потому утечки памяти