#How to simplify this class?

20 messages · Page 1 of 1 (latest)

waxen briar
#

I have parent class which is gets all children class methods and adds corresponding eventListener to the element.

class ElementEventController {
    attachEventsToElement(element, methodNames) {
        for (const methodName of methodNames) {
            const method = this[methodName];
            if (typeof method === "function") {
                element.addEventListener(methodName, method.bind(this));
            }
        }
    }
}

and for example if i create a SettingsIcon class which represents an html dom element and create corresponding event such as click, mouseleave, mouseover... so on.Controller class will add corresponding event to the element.


class SettingsIcon extends ElementEventController {
  constructor(element) {
    super();
    this.attachEventsToElement(element, SettingsIcon.getMethodNames());
  }

  static getMethodNames() {
    return Object.getOwnPropertyNames(SettingsIcon.prototype)
        .filter(name => name !== "constructor");
  }

  click() {
    console.log("SettingsIcon's click method executed");
  }

  mousemove(){
    console.log('mouse is moving on the element')
  }
}

const t = new SettingsIcon(document.getElementById("settings-icon"));

Right now this works as expected but the problem is as you can every time child class should have some methods and this is annoying and repeating process how to simplify this process?

arctic gale
#

Right now this works as expected but the problem is as you can every time child class should have some methods and this is annoying and repeating process how to simplify this process?
I don't understand what you're trying to say here

waxen briar
#

i fixed btw

#

Controller:


/* This class helps attach an event to an HTML element easily.
  A child class only needs to define a method; then,
  the corresponding method name's event will be added to the element.*/
class ElementEventController {
  constructor(child, element) {
    //children also can access element from class
    this.element = element;
    this.events = [];
    this._attachEventsToElement(child, element);
  }

  //gets all children method names(except static methods)
  static getMethodNames(child) {
    return Object.getOwnPropertyNames(child.prototype).filter(
      (name) => name !== "constructor",
    );
  }

  //first checks if method exists then adds it to the element
  _attachEventsToElement(child, element) {
    const methodNames = ElementEventController.getMethodNames(child);

    for (const methodName of methodNames) {
      const method = this[methodName];
      if (typeof method === "function") {
        element.addEventListener(methodName, method.bind(this));
      }
    }
  }
}

Object:


//getting exposed api
const { ipcRenderer } = window.api;

class SettingsIcon extends ElementEventController {
  constructor(element) {
    super(SettingsIcon, element);
    this.isActive = false;
  }

  async click() {
    //if window is not visible or not created
    if (!this.isActive){
      this.isActive = true
      await ipcRenderer.invoke("open-window:settings");
    }
    else{
      this.isActive = false
      await ipcRenderer.invoke("hide-window:settings");
    }
  }

  mousemove() {
    console.log("mouse is moving on the element");
  }
}

const t = new SettingsIcon(document.getElementById("settings-icon"));
#

i think this approach is more elegant than vanilla js.

#

it is like React a little bit

arctic gale
#

I'm doing something similar but in Python. Scanning for event handlers on classes and automagically registering the listener

waxen briar
arctic gale
#

I've implemented an events system for a thing I'm building

waxen briar
# 

class TestClass:
    def method1(self):
        pass

    def method_2(self):
        pass

obj = MyClass()

methods = [attr for attr in dir(obj) if callable(getattr(obj, attr))]

print(methods)
#

this should work

arctic gale
#

I've already done it haha but thanks wolfwink

waxen briar
#

also you can get methods from class itself simply insert Class instead of obj

waxen briar
arctic gale
#

Mine scans for methods when the class is created, it then checks the method parameters to detect which kind of event the method should listen for, then when an instance of the class is instantiated it registers those methods to listen for their respective event types.

#

So I've only ever gotta scan for event methods once, not every time I create a new instance.

waxen briar
#

how that 'Scanner' starts work? inheritance?

arctic gale
#

Yeah using __init_subclass__ which runs when a class inherits from the base class