使用JavaScript进行面向对象开发 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

####将事件对象设计进类型

有了事件对象,我们可以丰富我们的类型,允许向类型添加监听者,允许类型在某个特殊的时刻发生事件信号。

我们设计一个场景:

  1. 老板管理员工
  2. 当员工开始工作时发起事件通知老板
  3. 老板可以统计出哪些员工正在工作,哪些员工不在工作

首先,我们设计员工类型(以下代码需要上一节中的myEvent支持)

function worker(name){
    this.name = name;
    this.startWorkEvent = new myEvent();    //定义一个startWork事件
}
worker.startWork = function(){
    this.startWorkEvent.raise(this.name);    //发起开始工作的事件,并通知外部自己的姓名
};

然后,我就设计老板类型,可以添加所属的员工,并且在添加的时候,定义一个监听者

function boss(name){
    this.name = name;
    this.workers = [];
    this.workerState = {};    //定义一个JS原始对象用于存放员工工作状态
}
//员工开始工作的监听者,对开始工作的员工进行状态记录
boss.prototype.onWorkerStartWork = function(workerName){
    this.workerState[workerName] = true;
};
boss.prototype.addWorker = function(worker){
    worker.startWorkEvent.addListener(this.onWorkerStartWork);
};
//统计
boss.prototype.summary = function(){
    for(var i = 0;i<this.workers.length;i++){
        //循环所有员工
        var workerName = this.workers[i].name;
        if(this.workerState[workerName]){
            document.write(workerName + "正在工作<br/>");
        }
        else{
            document.write(workerName + "不在工作<br/>");
        }
    }
};

上面的两段代码完成了员工和老板的所有逻辑,下面我们尝试一下使用

var jim = new worker("jim");
var tom = new worker("tom");

var bob = new boss("bob");
bob.addWorker(jim);
bob.addWorker(tom);

jim.startWork();
bob.summary();    //jim正在工作  tom不在工作
连同上一节的myEvent一起,练习一下worker和boss试试