jQuery事件高级应用--EventListener/EventHandler（一）

概述

在Web前端开发中，我们经常会遇到以下需求：在渲染一个页面前需要执行function1, function2,function3... 在渲染页面后需要执行function4, function5, function6...在将后台数据绑定到页面前要执行function7, function8...在数据绑定到页面后要执行function9, function10...

主要代码如下

View Code

var EventListener =  function () {};
EventListener.prototype = {
  ns: 'co',
  event: {},
  handlerPool: {},
  widget:  function () {
     return $(document);
  },
  trigger:  function (type, data) {
     if (! this.accept(type)) {
       return  false;
    }
     this.__bindHandlers(type);

     var e = $.Event(type + '.' +  this.ns);
    e.options = data;
     return  this.widget().trigger(e);
  },
  register:  function (type, handler) {
     if (! this.accept(type) || !handler) {
       return  false;
    }

     if ($.isFunction(handler)) {
      handler = $.extend( new EventHandler(), {
        handle: handler
      });
    }

     var eventType = type;
     var handlers =  this.handlerPool[eventType] || [];
    handlers.push(handler);
     this.handlerPool[eventType] = handlers;
  },
  unregister:  function (type, handler) {
     if (! this.accept(type)) {
       return  false;
    }

     var handlers =  this.handlerPool[type];
     if (handler && handlers) {
       var leftHandlers = $.grep(handlers,  function (obj) {
         return obj.handle !== handler;
      });
       if (leftHandlers.length && leftHandlers.length < handlers.length) {
         this.handlerPool[type] = leftHandlers;
      }
       return;
    }

     delete  this.handlerPool[type];
  },
  accept:  function (type) {
     var accepted =  false;

    $.each( this.event,  function (key, name) {
       if (name === type) {
        accepted =  true;
         return  false;
      }
    });
     return accepted;
  },
  __bindHandlers:  function (type) {
     var self =  this;

     if (type) {
      self.widget().unbind(type + '.' +  this.ns);

       var handlers =  this.handlerPool[type] || [];
      $.each(handlers,  function (i, handler) {
        self.widget().bind(type + '.' + self.ns, handler.data || {}, handler.handle);
      });
    }
  }
};

var EventHandler =  function () {};

EventHandler.prototype.__type = 'EventHandler';

EventHandler.prototype.handle =  function () {
   return  this;
};

 

具体如何使用，下次再将吧...