patternjavascriptModerate

JavaScript/ECMAscript 6 classes organization

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

javascriptecmascriptorganizationclasses

Problem

I have been trying to wrap my head around all the new options in ECMAscript 6 and to do this I tried to develop a simple setup which would allow me to place absolutely positioned `

s on the page.

main.js:

import {Screen} from './objects/screen';
import {Position} from './objects/position';

var welcomeScreen = new Screen("Hello World");
welcomeScreen.title = "Hello World2";
welcomeScreen.position = new Position(100,100);
//Make sure the following does work if you have any advices, because there is a simple mistake which breaks this:
console.log(welcomeScreen.position.x);

var secondScreen = new Screen("Second screen", new Position(200,200));


objects/baseobject.js:

export class BaseObject{
    on(eventname,func){
        if(typeof this.listeners == "undefined"){
            this.listeners = {};
        }
        if(typeof this.listeners[eventname] == "undefined"){
            this.listeners[eventname] = [];
        }
        this.listeners[eventname].push(func);
        return this;
    }
    trigger(eventname){
        if(this.listeners && this.listeners[eventname]){
            for(let func of this.listeners[eventname]){
                func.call(this);
            }
        }
    }
}


objects/screen.js:

``
import {BaseObject} from './baseobject';
// private properties:
var pp = {
position: Symbol(),
title: Symbol()
};
export class Screen extends BaseObject{
constructor(title,position = new Position(0,0)){
this.element = document.createElement("div");
this.element.classList.add("screen");
this.title = title;
this.position = position;
document.body.appendChild(this.element);
}
reposition(){
this.element.style.left = this.position.x + "px";
this.element.style.top = this.position.y + "px";
}
set position(position){
var that = this;
this[pp.position] = position;
this[pp.position].on("positionchange",function(){
that.reposition();

Solution

Most interesting,

In BaseObject, you should really have a constructor that builds this.listeners, it would make your code much cleaner afterwards

I am not sure why your listeners are not private in BaseObject ?

I am not sure what is more important to you, learn EC6 or position divs efficiently, if the latter is more important, than this code is massive overkill ;)

If you want to avoid having a constructor for BaseObject, then I would re-write on like this:

on(eventname,func){
    this.listeners = this.listeners || [];
    this.listeners[eventname] = this.listeners[eventname] || [];
    this.listeners[eventname].push(func);
    return this;
}

Code Snippets

on(eventname,func){
    this.listeners = this.listeners || [];
    this.listeners[eventname] = this.listeners[eventname] || [];
    this.listeners[eventname].push(func);
    return this;
}

Context

StackExchange Code Review Q#43440, answer score: 13

Revisions (0)

No revisions yet.