JavaScript/ECMAscript 6类组织

Question

我一直试图围绕ECMAscript 6中的所有新选项进行讨论，为了做到这一点，我尝试开发一个简单的设置，使我能够将绝对定位的<div>s放在页面上。

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();
        }).trigger("positionchange");
    }
    get position(){
        return this[pp.position];
    }
    set title(value){
        this[pp.title] = value;
        this.element.textContent = value;
    }
    get title(){
        return this[pp.title];
    }
}

objects/position.js:

import {BaseObject} from './baseobject';
// private properties:
var pp = {
    x: Symbol(),
    y: Symbol()
};
export class Position extends BaseObject{
    constructor(x,y){
        this[pp.x]=x;
        this[pp.y]=y;
    }
    set x(value){
        this[pp.x]=x;
        super.trigger("positionchange");
    }
    get x(){
        return this[pp.x];
    }
    set y(value){
        this[pp.y]=y;
        super.trigger("positionchange");
    }
    get y(){
        return this[pp.y];
    }
}

您可以使用ES6将ES3 (我认为是3)转换为(谷歌)。

兴趣点：

• 我忘记了有什么好的ES6语言特性吗？
• 是否有更好的方法来处理“set触发器”(->私有属性构造)？
• 我应该使用模块吗？将类合并到相同的文件中？等。

Answer 1

最有趣的，

• 在BaseObject中，您确实应该有一个构建this.listeners的构造函数，这将使您的代码在之后更加清晰。
• 我不知道为什么您的听众在BaseObject中不是私有的？
• 我不知道什么对你来说更重要，如果后者比这段代码更重要的话，高效地学习EC6或位置div ;)

如果您希望避免为BaseObject设置构造函数，那么我将重写on如下：

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

Answer 2

所以，用我从那以后发现的好东西来“回答”我自己的问题。如果我发现更多的东西，我的答案可能会扩大。

在ECMAscript 6中而不是

var that = this;
something.on("positionchange",function(){
     that.reposition();
});

你能做到的

something.on("positionchange",() => {
     this.reposition();
});

因为this作用域没有改变。