Backbone.js事件高级用法 #

obj.on('user:created', function() {});
obj.on('user:updated', function() {});
obj.on('user:deleted', function() {});

obj.on('order:created', function() {});
obj.on('order:updated', function() {});

obj.on('app:init', function() {});
obj.on('app:user:login', function() {});
obj.on('app:user:logout', function() {});
obj.on('app:data:sync', function() {});

obj.on('model:before:save', function() {});
obj.on('model:save:success', function() {});
obj.on('model:save:error', function() {});

obj.on('view:before:render', function() {});
obj.on('view:render', function() {});
obj.on('view:after:render', function() {});

var users = new Backbone.Collection();

users.on('change:name', function(model, name) {
    console.log('用户姓名变化:', name);
});

var user = users.add({ name: '张三' });
user.set('name', '李四');

var EventProxy = {
    proxyEvents: function(source, events, prefix) {
        var self = this;
        
        events.split(' ').forEach(function(event) {
            self.listenTo(source, event, function() {
                var args = [prefix + ':' + event].concat(
                    Array.prototype.slice.call(arguments)
                );
                self.trigger.apply(self, args);
            });
        });
    }
};

var ChildView = Backbone.View.extend({
    initialize: function() {
        _.extend(this, EventProxy);
        this.proxyEvents(this.model, 'change destroy', 'model');
    }
});

var view = new ChildView({ model: model });

view.on('model:change', function() {
    console.log('模型变化');
});

var EventForwarder = {
    forward: function(target, events) {
        var self = this;
        
        events.split(' ').forEach(function(event) {
            self.on(event, function() {
                var args = [event].concat(Array.prototype.slice.call(arguments));
                target.trigger.apply(target, args);
            });
        });
    }
};

var source = _.extend({}, Backbone.Events, EventForwarder);
var target = _.extend({}, Backbone.Events);

source.forward(target, 'alert warning error');

target.on('alert', function(msg) {
    console.log('转发收到:', msg);
});

source.trigger('alert', 'Hello');

var EventEmitter = _.extend({
    queue: [],
    processing: false,
    
    queueEvent: function(event) {
        var args = Array.prototype.slice.call(arguments);
        this.queue.push(args);
        
        if (!this.processing) {
            this.processQueue();
        }
    },
    
    processQueue: function() {
        if (this.queue.length === 0) {
            this.processing = false;
            return;
        }
        
        this.processing = true;
        var args = this.queue.shift();
        this.trigger.apply(this, args);
        
        this.processQueue();
    }
}, Backbone.Events);

var DelayedEmitter = _.extend({
    delayedTriggers: {},
    
    triggerDelayed: function(event, delay) {
        var self = this;
        var args = Array.prototype.slice.call(arguments, 2);
        
        if (this.delayedTriggers[event]) {
            clearTimeout(this.delayedTriggers[event]);
        }
        
        this.delayedTriggers[event] = setTimeout(function() {
            self.trigger.apply(self, [event].concat(args));
            delete self.delayedTriggers[event];
        }, delay);
    }
}, Backbone.Events);

var DebouncedEmitter = _.extend({
    debouncedTriggers: {},
    
    triggerDebounced: function(event, wait) {
        var self = this;
        var args = Array.prototype.slice.call(arguments, 2);
        
        if (!this.debouncedTriggers[event]) {
            this.debouncedTriggers[event] = _.debounce(function() {
                self.trigger.apply(self, [event].concat(args));
            }, wait);
        }
        
        this.debouncedTriggers[event]();
    }
}, Backbone.Events);

var InterceptableEvents = _.extend({
    interceptors: {},
    
    before: function(event, interceptor) {
        if (!this.interceptors[event]) {
            this.interceptors[event] = { before: [], after: [] };
        }
        this.interceptors[event].before.push(interceptor);
    },
    
    trigger: function(event) {
        var interceptors = this.interceptors[event];
        var args = Array.prototype.slice.call(arguments, 1);
        
        if (interceptors && interceptors.before.length > 0) {
            for (var i = 0; i < interceptors.before.length; i++) {
                if (interceptors.before[i].apply(this, args) === false) {
                    return this;
                }
            }
        }
        
        return Backbone.Events.trigger.apply(this, arguments);
    }
}, Backbone.Events);

InterceptableEvents.before('save', function(data) {
    if (!data.valid) {
        console.log('拦截无效数据');
        return false;
    }
});

InterceptableEvents.on('save', function(data) {
    console.log('保存数据:', data);
});

InterceptableEvents.trigger('save', { valid: false });
InterceptableEvents.trigger('save', { valid: true, name: '张三' });

var PostProcessEvents = _.extend({
    processors: {},
    
    after: function(event, processor) {
        if (!this.processors[event]) {
            this.processors[event] = [];
        }
        this.processors[event].push(processor);
    },
    
    trigger: function(event) {
        var result = Backbone.Events.trigger.apply(this, arguments);
        
        var processors = this.processors[event];
        if (processors && processors.length > 0) {
            var args = Array.prototype.slice.call(arguments, 1);
            processors.forEach(function(processor) {
                processor.apply(this, args);
            });
        }
        
        return result;
    }
}, Backbone.Events);

var DebugEvents = _.extend({
    debug: false,
    
    enableDebug: function() {
        this.debug = true;
    },
    
    disableDebug: function() {
        this.debug = false;
    },
    
    trigger: function(event) {
        if (this.debug) {
            console.log('[Event]', event, Array.prototype.slice.call(arguments, 1));
        }
        return Backbone.Events.trigger.apply(this, arguments);
    }
}, Backbone.Events);

var EventTracker = _.extend({
    history: [],
    maxHistory: 100,
    
    track: function(event) {
        this.history.push({
            event: event,
            args: Array.prototype.slice.call(arguments, 1),
            timestamp: Date.now()
        });
        
        if (this.history.length > this.maxHistory) {
            this.history.shift();
        }
    },
    
    getHistory: function() {
        return this.history;
    },
    
    getLast: function(n) {
        return this.history.slice(-n);
    }
}, Backbone.Events);

EventTracker.on('all', function(event) {
    EventTracker.track.apply(EventTracker, arguments);
});

var EventStats = _.extend({
    stats: {},
    
    record: function(event) {
        if (!this.stats[event]) {
            this.stats[event] = { count: 0, lastTriggered: null };
        }
        
        this.stats[event].count++;
        this.stats[event].lastTriggered = Date.now();
    },
    
    getStats: function() {
        return this.stats;
    },
    
    getEventCount: function(event) {
        return this.stats[event] ? this.stats[event].count : 0;
    }
}, Backbone.Events);

EventStats.on('all', function(event) {
    EventStats.record(event);
});

var MiddlewareEvents = _.extend({
    middlewares: [],
    
    use: function(middleware) {
        this.middlewares.push(middleware);
    },
    
    trigger: function(event) {
        var args = Array.prototype.slice.call(arguments);
        var self = this;
        var index = 0;
        
        function next() {
            if (index < self.middlewares.length) {
                var middleware = self.middlewares[index++];
                middleware.call(self, args, next);
            } else {
                Backbone.Events.trigger.apply(self, args);
            }
        }
        
        next();
    }
}, Backbone.Events);

MiddlewareEvents.use(function(args, next) {
    console.log('中间件1:', args);
    next();
});

MiddlewareEvents.use(function(args, next) {
    console.log('中间件2:', args);
    next();
});

MiddlewareEvents.trigger('custom', 'data');

var SubscriptionManager = {
    subscriptions: {},
    
    subscribe: function(obj, event, callback, context) {
        var id = _.uniqueId('sub_');
        
        this.subscriptions[id] = {
            obj: obj,
            event: event,
            callback: callback,
            context: context
        };
        
        obj.on(event, callback, context);
        
        return id;
    },
    
    unsubscribe: function(id) {
        var sub = this.subscriptions[id];
        
        if (sub) {
            sub.obj.off(sub.event, sub.callback, sub.context);
            delete this.subscriptions[id];
        }
    },
    
    unsubscribeAll: function() {
        for (var id in this.subscriptions) {
            this.unsubscribe(id);
        }
    }
};

var ConditionalEvents = _.extend({
    conditions: {},
    
    onWhen: function(event, condition, callback, context) {
        var self = this;
        
        this.on(event, function() {
            if (condition.call(context || self)) {
                callback.apply(context || self, arguments);
            }
        }, context);
    },
    
    setCondition: function(name, condition) {
        this.conditions[name] = condition;
    }
}, Backbone.Events);

ConditionalEvents.setCondition('isLoggedIn', function() {
    return !!localStorage.getItem('token');
});

ConditionalEvents.onWhen('action', function() {
    return this.conditions.isLoggedIn();
}, function() {
    console.log('已登录用户执行操作');
});