class、观察者模式-事件池

196 阅读1分钟

Class

ES6 中,虽然有了 class 的语法,但是还是有别于传统语言(Java) 中的类。
ES6 中的类,只是语法糖

// 公有字段在实例化对象中正常使用,作为一个普通属性存在(不加this,不在constructor里写)
// 私有字段,只能在类中去用,不能在实例化对象里用
// 继承: 继承可以使得子类具有父类的属性和方法并重新定义、追加属性和方法等。
extend 扩展 TeacherPerson的扩展 继承了Person
super 如果继承后要改变constructor需要super(arguments)
class Teacher extends Person {
    constructor(name, age) {
        super(name, age);
        this.speciality = "讲课";
    }
    a(){},
    static a(){}
}

static 静态方法
    里面没有this
    通过类来调用,在实例上不能使用

观察者模式

// 封装事件池
class Event {
    events = {} // 公有变量
/* 
    事件池记录所有的相关事件及处理函数
    events = {
        "click":[f1,f2,f3……],
        "mousemove": [f1,f2,f3……]
    }
*/
    on(eventName, fn) { //添加一个事件处理 eventName 事件名称 fn 对应的处理函数
        if (!this.events[eventName]) {
            this.events[eventName] = [];
        }
        this.events[eventName].push(fn);
    }
    off(eventName, fn) { // 删除一个事件处理 eventName 事件名称 fn 对应的处理函数
        if (!this.events[eventName]) {
            // 如果没有添加过该事件直接跳出不处理了
            return;
        }
        this.events[eventName] = this.events[eventName].filter(item => item != fn);
    }
    /*
        dispatch 负责把触发到的事件给执行了
    */
    dispatch(eventName) { //触发事件
        if (!this.events[eventName]) {
            // 如果没有添加过该事件直接跳出不处理了
            return;
        }
        this.events[eventName].forEach(item => {
            item.call(this);
        });
    }
}