1

I have a class in my code and I'm not sure if the design I've implemented is correct or if there is a better way to do it. The class I have created have important useful methods that is used by each instance of that class. However, the problem is that the instance itself is never used. The class handles everything that needs to be done without using the object itself. So, once I call the constructor, I never use the object again. The internals of the class handle everything. Here's an example of what I mean. It's written in JS but can apply to pretty much any lang.

class MyHTMLElement {
    constructor(htmlElement) {
        this.htmlElement = htmlElement;
        this.changeColorOnClick();
        this.changeBorderOnInput();
    }
    changeColorOnClick() {
        this.htmlElement.onclick = () => {
            this.htmlElement.style.color = "blue";
        }
    }
    changeBorderOnInput {
        this.htmlElement.addEventListener("input", () => {
            this.htmlElement.style.border = "2px solid green";
    }
}

Now once I've created this, all I need to do is call new MyHTMLElement("element"); for each instance I need and then never use the functionalities of the class ever again. I will still use the instance htmlElement attribute, but will never use any of the methods. This seems like it's bad deign to me. Is there a better way to do this that is also very clean. Thanks for your help.

  • Well It's hard to say without knowing the full picture and everything you need. But if we consider that usually an application need homogenous rendering and behaviour. You should be able toimplement that with CSS classes and pseudo classes. So instead of setting the style, you should set classes and pseudo classes accordingly. This might however take more thought before starting to implement in order to do it properly. – Walfrat Dec 15 '18 at 20:46
4

What you're looking for is a function, not an object. Instead of new MyHTMLElement("element") you could just say modifyHtmlElement("element") which should also work:

function modifyHtmlElement(htmlElement) {
    changeColorOnClick();
    changeBorderOnInput();

    function changeColorOnClick() {
        htmlElement.onclick = () => {
            this.htmlElement.style.color = "blue";
        }
    }

    function changeBorderOnInput {
        htmlElement.addEventListener("input", () => {
            this.htmlElement.style.border = "2px solid green";
        }
    }
}

These constructor-only classes are usually an antipattern, as they can be replaced by much simpler functions. In JavaScript there is an interesting relationship between functions and constructors and classes anyway, but that is specific to the language.

The exception where you really might want to call a constructor and then not use the object would be if the new object registers itself somewhere, or if it starts doing something in the background. E.g. a class representing a Thread might be implemented like this.

2

In this case the whole existence of your class is pointless. You do not add any value to the injected htmlElement that already provides all you need. Just subscribe to the handlers directly instead rather than relaying that to the constructor of an empty class. This is more flexible too. All your class does now is limit the use of the htmlElement.

0

The problem with this approach is that you are going to need lots of versions of myHTMLElement for all the types of behaviour you want.

In order to reuse code you will want to use inheritance to implement this variety of functionality. You literally have no where else to put the code.

So far So OOP. But in a large project you will end up with an unmanageable inheritance tree where changing a small thing on an object high up in the hierarchy can have unintendended consequencies

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.