Как создать слушатель событий в jquery классе?

Question

[FlatUser]

Что нужно? У меня есть объект vars в классе App, в нём лежит свойство active .

var App = function (options) {
  var vars = {
    active: false
  };

  var root = this;

  this.construct = function (options) {
    $.extend(vars, options);
  };

  this.on = function () {

  }

  this.construct(options);
};

  var app = new App();

Что нужно проделать для того чтобы правильно реализовать метод this.on?
Мне нужно сделать слушатель на active, чтобы коллбэк вызывался при vars.active === true.
Примерно так.

app.on( "active", function() {
  console.log('Приложение активно');
});

Я знаю что это можно делать с html элементами по типу

$( "button" ).on( "click", , function() {
  console.log('Button clicked');
});

Мне нужно идентичный только с реализацией в классе. Как данное реализовать?

Comments

[uncletobe]

$( ".my-class-name" ).on( "click", , function() {
  console.log('Message!');
});

?

[FlatUser]

uncletobe, для вас CSS класс это js функция или что?

Answer 1

[FlatUser]

То что подходило бы мне не нашёл, решил написать свою библиотеку.
https://github.com/itmor/events-js

Answer 2

[Somewhere Intech]

Создать "кастомный" слушатель не проблема, проблема в том что Вам нужно самому контролировать процесс или, другими словами, "диспатчить ивент"

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { /* ... */ }, false);

// Dispatch the event.
elem.dispatchEvent(event);

В вашем случае можно добавить метод activate, который будет менять флаг и "диспатчить ивент"
В jquery это делается так:

$( document ).trigger( "myCustomEvent", [ "bim", "baz" ] );

Почитать можно тут про js и тут про jQuery

Если вы не можете вешать такое событие глобально и нужно привязать именно к экземпляру класса, то просто реализуйте шаблон наблюдателя для класса.
Пример грубой реализации:

var events=[];
this.on = function (event, callback) {
	events.push({e: event, fn: callback});
}
this.activate = function (){
	vars.active=true;
	for(let e of events) 
		if (e.e==='active') e.fn.apply(this)
}

И можно ещё посмотреть в сторону react или что попроще - vuejs, там такое реализовано на отличном уровне.

Comments

[FlatUser]

Cпасибо за инфу, мне больше интересно каким образом создать запуск this.activate в последнем примере.
Просто создавать бесконечный цикл который будет чекать на vars.active===true и потом уже стартить this.activate который перебирает ивенты и выполняет коллбэки, ресурсоёмко.
Я думал что в jquery есть какая то реализация того что мне нужно. Вот был подобный вопрос Как создать свое событие в jQuery? но он мне не помог.

[Somewhere Intech]

FlatUser, Я думаю всё же стоит посмотреть react/vue, Ваши цели, как мне кажется, схожи с их идеологией

[FlatUser]

Johnny Lowhunter, я бы с радостью но они не для этих целей, тем более реакт точно не подходит. Нужен именно онли жиквери, я на ванниле даже писать не имею права.