观察者模式

观察者模式

var Observer = (function () {
    var _message = {};

    return {
        // 注册消息
        register: function (type, fn) {
        // 传入两个参数，一个是消息类型，另外一个是函数（该消息类型执行的对应的动作）
            if (typeof _message[type] === 'undefined') {
                // 如果消息队列中没有这个消息类型，就在消息队列中为这个消息类型创建一个函数
                _message[type] = [fn];
            } else {
                // 如果存在了这个消息类型，则往该消息类型栈中推入这个函数
                _message[type].push(fn);
            }

        },
        // 发布消息
        fire: function (type, args) {
            if (!_message[type]) {
                return;
            }

            // 定义消息信息
            var events = {
                type: type,
                args: args || {},
            };

            for (var i = 0; i < _message[type].length; i++) {
                // 依次执行注册的消息对应的动作序列
                _message[type][i].call(this, events);
            }
        },

        // 取消订阅
        remove: function (type, fn) {
            // 消息队列存在
            for (var i = _message[type].length - 1; i > 0 ; i--) {
                // 如果改动作存在则在消息队列中移除响应的动作
                _message[type][i] === fn && _message[type].splice(i, 1);
            }
        }

    };
})();

实例

    var Student = function (result) {
        var that = this;
        that.result = result;

        // 回答问题
        that.say =  function () {
            console.log(that.result);
        };
    };

    Student.prototype.answer = function (question) {
        Observer.register(question, this.say);
    };

    Student.prototype.sleep = function (question) {
        console.log(this.result + '  ' + question + '已被注销');
        Observer.remove(question, this.say);
    };

    var Teacher = function () {};

    Teacher.prototype.ask = function (question) {
        console.log('问题是' + question);
        Observer.fire(question);
    };

    // 模拟三位学生
    var student1 = new Student('学生1回答了问题');
    var student2 = new Student('学生2回答了问题');
    var student3 = new Student('学生3回答了问题');

    // 三位学生订阅了老师的问题
    student1.answer('什么是设计模式');
    student2.answer('什么是设计模式');
    student2.answer('什么是前端');
    student2.answer('什么是js');
    student3.answer('什么是js');

    // 后来学生3睡着了
    student3.sleep('什么是js');

    var teacher = new Teacher();
    teacher.ask('什么是设计模式');
    teacher.ask('什么是前端');
    teacher.ask('什么是js');