笔记-class、观察者模式-事件池

Class

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

// 公有字段在实例化对象中正常使用,作为一个普通属性存在(不加this,不在constructor里写)
// 私有字段,只能在类中去用,不能在实例化对象里用
// 继承: 继承可以使得子类具有父类的属性和方法并重新定义、追加属性和方法等。
extend扩展 Teacher是Person的扩展 继承了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);
        });
    }
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值