自定义事件

var event = {

        //用来存放函数
        clientList: {},

        //添加事件监听 
        listen: function(key, fn) {
            if (!this.clientList[key]) {
                this.clientList[key] = [];
            }
            this.clientList[key].push(fn);
        },

        //触发函数时,是event.trigger(key, arguments),
        //key自定义事件名,arguments参数数组;
        trigger: function() {

            //拿到key;因为参数数量不定.所以用shift拿,剩下的是fn的参数
            var key = Array.prototype.shift.call(arguments);
            var fns = this.clientList[key];

            if (!fns || fns.length === 0) {

                //没有绑定事件
                return false;
            }     

            for (var i=0; i < fns.length; i++) {

                //把fn里面的this变成了事件对象event的this,arguments是trigger(key, arguments)的arguments.
                var fn = fns[i];
                fn.apply(this, arguments);
            }
        },

        //取消事件监听
        remove: function(key, fn) {
            var fns = this.clientList[key];
            if (!fns) {
                return false;
            }
            if (!fn) {

                //没有传入对应的函数, 表示取消key对应的所有的回调
                fns && (fns.length = 0) ;
            } else {
                for (var i=0; i < fns.length; i++) {
                    var _fn = fns[i];

                    //因为任意两个对象都不相等.所以这里传入的fn,应该是和注册用的fn是同一个fn.才能取消;
                    if (_fn === fn) {
                        fns.splice(i, 1);
                    }
                }
            }
        }
    }


    event.listen("88", function(price) {
        console.log("价格=" + price);
    })

    event.listen("90", function(price) {
        console.log("价格=" + price);
    })

    setTimeout(function() {
        event.trigger("88", 19900320)
    }, 4000)

这个event是一个自定义事件对象. 可以进行自定义的事件的添加,执行, 取消.;

适用场景: 

　　1. 电商网站的登录与弱登录的差别.电商网站一般都能弱登录.登录之后,需要

　　　　1. 切换头像

　　　　2. 显示提示消息

　　　　3. 显示个性化商品推荐等.

此时就可以为头像对象.提示消息对象,商品推荐对象注册loginSuccess事件.等待登录成功事件的到来

//头像对象
    var head = (function() {
        event.listen("loginSucc", function(data) {
            head.reset(data)
        })
        return {
            reset: function(data) {
                //设置新头像
            }
        }
    })()

    //info
    var info = (function() {
        event.listen("loginSucc", function(data) {
            info.prompt(data)
        })
        return {
            prompt: function(data) {
                //弹出提示信息
            }
        }
    })()

    $.ajax({
        success: function(data) {
            event.trigger("loginSucc", data);
        }
    })

简单来说这种方式,提高了各个对象的内聚, 减弱了对象之间的联系.让对象能更专注与自身抽象所代表的功能.;如果将来要加一个刷新导航的功能,那么直接在导航里面添加loginSucc事件即可.不用修改别的代码

提高了代码的可扩展性;