1
\$\begingroup\$

I'm in the process of trying to do "object oriented thinking", as to improve my code skill.

I've the following method that creates a lightbox for every item with the class .has-lightbox. Is this something that would benefit from being a class? A LightboxCollection class for example? That has an array Lightbox?

import * as basicLightbox from 'basiclightbox';

var lightboxableImages = document.getElementsByClassName("has-lightbox");
for (let image of lightboxableImages) {
    image.addEventListener('click', openLightbox);
}

function openLightbox(e) {
    const target = e.target;
    const src = target.dataset['lightbox-src'] ? target.dataset['lightbox-src'] : target.src;

    if (!src) {
        return false;
    }

    const instance = basicLightbox.create(`<img src="${src}">`);
    instance.show();
}
\$\endgroup\$
2
\$\begingroup\$

Objects not classes

In JavaScript there are no classes only Objects. The token class is just an alternative syntax (often referred to as syntactical sugar) for defining an Object.

Many ways to create objects

The following shows two very similar objects defined using class syntax and standard syntax

class Foo {
   constructor() { this.bar = "A" }
   poo() {}
}

function Foo() { this.bar = "B" }
Foo.prototype = { poo() {} }

You can also define the object as...

function Foo() {
   this.bar = "C";
   this.poo = function(){};
}

or...

const Foo = {
    bar: "D",
    poo() {},
};

or...

const Foo = () => ({
    bar: "D",
    poo() {},
});

...and there are many more ways to define an object.

Which to use

Which you use is very dependent on how you use the object.

  • Is there more than one instance?
  • What is the life time of an instance?
  • Do you need to extend the object? (polymorphic)
  • What level of encapsulation is required?
  • Do you need an inheritance model?
  • How do you wish to instantiate the object?
  • What is the legacy support requirement?

To know the language you must be proficient in all its forms, and know what is the appropriate code to use.

Questions

Is this something that would benefit from being a class?

No as there are no classes in JavaScript.

A LightboxCollection class for example? That has an array Lightbox?

You can create a collection from an Array. Assuming you are using only a single instance. It has all the functions that an array has plus what ever you want to add. Eg add

const LightboxCollection = (() => {
    return Object.assign([],{
         add(lightBox){ this.push(lightBox) },
    });
})();

Or encapsulate the array, so you can maintain the array state (vet items and expose only functions that you need)

const LightboxCollection = (() => {
    const items = [];
    return Object.freeze({
         add(lightBox) { lightBox instanceof LightBox && items.push(lightBox) },
         get length() { return items.length },
         set length(len) { items.length = len < items.length ? len : items.length },
         forEach: items.forEach.bind(items),
    });
})();   
\$\endgroup\$

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.