Observable.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:16k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. (function(){
  8. var EXTUTIL = Ext.util,
  9.     TOARRAY = Ext.toArray,
  10.     EACH = Ext.each,
  11.     ISOBJECT = Ext.isObject,
  12.     TRUE = true,
  13.     FALSE = false;
  14. /**
  15.  * @class Ext.util.Observable
  16.  * Base class that provides a common interface for publishing events. Subclasses are expected to
  17.  * to have a property "events" with all the events defined, and, optionally, a property "listeners"
  18.  * with configured listeners defined.<br>
  19.  * For example:
  20.  * <pre><code>
  21. Employee = Ext.extend(Ext.util.Observable, {
  22.     constructor: function(config){
  23.         this.name = config.name;
  24.         this.addEvents({
  25.             "fired" : true,
  26.             "quit" : true
  27.         });
  28.         // Copy configured listeners into *this* object so that the base class&#39;s
  29.         // constructor will add them.
  30.         this.listeners = config.listeners;
  31.         // Call our superclass constructor to complete construction process.
  32.         Employee.superclass.constructor.call(config)
  33.     }
  34. });
  35. </code></pre>
  36.  * This could then be used like this:<pre><code>
  37. var newEmployee = new Employee({
  38.     name: employeeName,
  39.     listeners: {
  40.         quit: function() {
  41.             // By default, "this" will be the object that fired the event.
  42.             alert(this.name + " has quit!");
  43.         }
  44.     }
  45. });
  46. </code></pre>
  47.  */
  48. EXTUTIL.Observable = function(){
  49.     /**
  50.      * @cfg {Object} listeners (optional) <p>A config object containing one or more event handlers to be added to this
  51.      * object during initialization.  This should be a valid listeners config object as specified in the
  52.      * {@link #addListener} example for attaching multiple handlers at once.</p>
  53.      * <br><p><b><u>DOM events from ExtJs {@link Ext.Component Components}</u></b></p>
  54.      * <br><p>While <i>some</i> ExtJs Component classes export selected DOM events (e.g. "click", "mouseover" etc), this
  55.      * is usually only done when extra value can be added. For example the {@link Ext.DataView DataView}'s
  56.      * <b><code>{@link Ext.DataView#click click}</code></b> event passing the node clicked on. To access DOM
  57.      * events directly from a Component's HTMLElement, listeners must be added to the <i>{@link Ext.Component#getEl Element}</i> after the Component
  58.      * has been rendered. A plugin can simplify this step:<pre><code>
  59. // Plugin is configured with a listeners config object.
  60. // The Component is appended to the argument list of all handler functions.
  61. Ext.DomObserver = Ext.extend(Object, {
  62.     constructor: function(config) {
  63.         this.listeners = config.listeners ? config.listeners : config;
  64.     },
  65.     // Component passes itself into plugin&#39;s init method
  66.     init: function(c) {
  67.         var p, l = this.listeners;
  68.         for (p in l) {
  69.             if (Ext.isFunction(l[p])) {
  70.                 l[p] = this.createHandler(l[p], c);
  71.             } else {
  72.                 l[p].fn = this.createHandler(l[p].fn, c);
  73.             }
  74.         }
  75.         // Add the listeners to the Element immediately following the render call
  76.         c.render = c.render.{@link Function#createSequence createSequence}(function() {
  77.             var e = c.getEl();
  78.             if (e) {
  79.                 e.on(l);
  80.             }
  81.         });
  82.     },
  83.     createHandler: function(fn, c) {
  84.         return function(e) {
  85.             fn.call(this, e, c);
  86.         };
  87.     }
  88. });
  89. var combo = new Ext.form.ComboBox({
  90.     // Collapse combo when its element is clicked on
  91.     plugins: [ new Ext.DomObserver({
  92.         click: function(evt, comp) {
  93.             comp.collapse();
  94.         }
  95.     })],
  96.     store: myStore,
  97.     typeAhead: true,
  98.     mode: 'local',
  99.     triggerAction: 'all'
  100. });
  101.      * </code></pre></p>
  102.      */
  103.     var me = this, e = me.events;
  104.     if(me.listeners){
  105.         me.on(me.listeners);
  106.         delete me.listeners;
  107.     }
  108.     me.events = e || {};
  109. };
  110. EXTUTIL.Observable.prototype = function(){
  111.     var filterOptRe = /^(?:scope|delay|buffer|single)$/, toLower = function(s){
  112.         return s.toLowerCase();
  113.     };
  114.     return {
  115.         /**
  116.          * <p>Fires the specified event with the passed parameters (minus the event name).</p>
  117.          * <p>An event may be set to bubble up an Observable parent hierarchy (See {@link Ext.Component#getBubbleTarget})
  118.          * by calling {@link #enableBubble}.</p>
  119.          * @param {String} eventName The name of the event to fire.
  120.          * @param {Object...} args Variable number of parameters are passed to handlers.
  121.          * @return {Boolean} returns false if any of the handlers return false otherwise it returns true.
  122.          */
  123.         fireEvent : function(){
  124.             var a = TOARRAY(arguments),
  125.                 ename = toLower(a[0]),
  126.                 me = this,
  127.                 ret = TRUE,
  128.                 ce = me.events[ename],
  129.                 q,
  130.                 c;
  131.             if (me.eventsSuspended === TRUE) {
  132.                 if (q = me.suspendedEventsQueue) {
  133.                     q.push(a);
  134.                 }
  135.             }
  136.             else if(ISOBJECT(ce) && ce.bubble){
  137.                 if(ce.fire.apply(ce, a.slice(1)) === FALSE) {
  138.                     return FALSE;
  139.                 }
  140.                 c = me.getBubbleTarget && me.getBubbleTarget();
  141.                 if(c && c.enableBubble) {
  142.                     c.enableBubble(ename);
  143.                     return c.fireEvent.apply(c, a);
  144.                 }
  145.             }
  146.             else {
  147.                 if (ISOBJECT(ce)) {
  148.                     a.shift();
  149.                     ret = ce.fire.apply(ce, a);
  150.                 }
  151.             }
  152.             return ret;
  153.         },
  154.         /**
  155.          * Appends an event handler to this object.
  156.          * @param {String}   eventName The name of the event to listen for.
  157.          * @param {Function} handler The method the event invokes.
  158.          * @param {Object}   scope (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
  159.          * <b>If omitted, defaults to the object which fired the event.</b>
  160.          * @param {Object}   options (optional) An object containing handler configuration.
  161.          * properties. This may contain any of the following properties:<ul>
  162.          * <li><b>scope</b> : Object<div class="sub-desc">The scope (<code><b>this</b></code> reference) in which the handler function is executed.
  163.          * <b>If omitted, defaults to the object which fired the event.</b></div></li>
  164.          * <li><b>delay</b> : Number<div class="sub-desc">The number of milliseconds to delay the invocation of the handler after the event fires.</div></li>
  165.          * <li><b>single</b> : Boolean<div class="sub-desc">True to add a handler to handle just the next firing of the event, and then remove itself.</div></li>
  166.          * <li><b>buffer</b> : Number<div class="sub-desc">Causes the handler to be scheduled to run in an {@link Ext.util.DelayedTask} delayed
  167.          * by the specified number of milliseconds. If the event fires again within that time, the original
  168.          * handler is <em>not</em> invoked, but the new handler is scheduled in its place.</div></li>
  169.          * <li><b>target</b> : Observable<div class="sub-desc">Only call the handler if the event was fired on the target Observable, <i>not</i>
  170.          * if the event was bubbled up from a child Observable.</div></li>
  171.          * </ul><br>
  172.          * <p>
  173.          * <b>Combining Options</b><br>
  174.          * Using the options argument, it is possible to combine different types of listeners:<br>
  175.          * <br>
  176.          * A delayed, one-time listener.
  177.          * <pre><code>
  178. myDataView.on('click', this.onClick, this, {
  179.     single: true,
  180.     delay: 100
  181. });</code></pre>
  182.          * <p>
  183.          * <b>Attaching multiple handlers in 1 call</b><br>
  184.          * The method also allows for a single argument to be passed which is a config object containing properties
  185.          * which specify multiple handlers.
  186.          * <p>
  187.          * <pre><code>
  188. myGridPanel.on({
  189.     'click' : {
  190.         fn: this.onClick,
  191.         scope: this,
  192.         delay: 100
  193.     },
  194.     'mouseover' : {
  195.         fn: this.onMouseOver,
  196.         scope: this
  197.     },
  198.     'mouseout' : {
  199.         fn: this.onMouseOut,
  200.         scope: this
  201.     }
  202. });</code></pre>
  203.      * <p>
  204.      * Or a shorthand syntax:<br>
  205.      * <pre><code>
  206. myGridPanel.on({
  207.     'click' : this.onClick,
  208.     'mouseover' : this.onMouseOver,
  209.     'mouseout' : this.onMouseOut,
  210.      scope: this
  211. });</code></pre>
  212.          */
  213.         addListener : function(eventName, fn, scope, o){
  214.             var me = this,
  215.                 e,
  216.                 oe,
  217.                 isF,
  218.             ce;
  219.             if (ISOBJECT(eventName)) {
  220.                 o = eventName;
  221.                 for (e in o){
  222.                     oe = o[e];
  223.                     if (!filterOptRe.test(e)) {
  224.                         me.addListener(e, oe.fn || oe, oe.scope || o.scope, oe.fn ? oe : o);
  225.                     }
  226.                 }
  227.             } else {
  228.                 eventName = toLower(eventName);
  229.                 ce = me.events[eventName] || TRUE;
  230.                 if (typeof ce == "boolean") {
  231.                     me.events[eventName] = ce = new EXTUTIL.Event(me, eventName);
  232.                 }
  233.                 ce.addListener(fn, scope, ISOBJECT(o) ? o : {});
  234.             }
  235.         },
  236.         /**
  237.          * Removes an event handler.
  238.          * @param {String}   eventName The type of event the handler was associated with.
  239.          * @param {Function} handler   The handler to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
  240.          * @param {Object}   scope     (optional) The scope originally specified for the handler.
  241.          */
  242.         removeListener : function(eventName, fn, scope){
  243.             var ce = this.events[toLower(eventName)];
  244.             if (ISOBJECT(ce)) {
  245.                 ce.removeListener(fn, scope);
  246.             }
  247.         },
  248.         /**
  249.          * Removes all listeners for this object
  250.          */
  251.         purgeListeners : function(){
  252.             var events = this.events,
  253.                 evt,
  254.                 key;
  255.             for(key in events){
  256.                 evt = events[key];
  257.                 if(ISOBJECT(evt)){
  258.                     evt.clearListeners();
  259.                 }
  260.             }
  261.         },
  262.         /**
  263.          * Used to define events on this Observable
  264.          * @param {Object} object The object with the events defined
  265.          */
  266.         addEvents : function(o){
  267.             var me = this;
  268.             me.events = me.events || {};
  269.             if (typeof o == 'string') {
  270.                 EACH(arguments, function(a) {
  271.                     me.events[a] = me.events[a] || TRUE;
  272.                 });
  273.             } else {
  274.                 Ext.applyIf(me.events, o);
  275.             }
  276.         },
  277.         /**
  278.          * Checks to see if this object has any listeners for a specified event
  279.          * @param {String} eventName The name of the event to check for
  280.          * @return {Boolean} True if the event is being listened for, else false
  281.          */
  282.         hasListener : function(eventName){
  283.             var e = this.events[eventName];
  284.             return ISOBJECT(e) && e.listeners.length > 0;
  285.         },
  286.         /**
  287.          * Suspend the firing of all events. (see {@link #resumeEvents})
  288.          * @param {Boolean} queueSuspended Pass as true to queue up suspended events to be fired
  289.          * after the {@link #resumeEvents} call instead of discarding all suspended events;
  290.          */
  291.         suspendEvents : function(queueSuspended){
  292.             this.eventsSuspended = TRUE;
  293.             if (queueSuspended){
  294.                 this.suspendedEventsQueue = [];
  295.             }
  296.         },
  297.         /**
  298.          * Resume firing events. (see {@link #suspendEvents})
  299.          * If events were suspended using the <tt><b>queueSuspended</b></tt> parameter, then all
  300.          * events fired during event suspension will be sent to any listeners now.
  301.          */
  302.         resumeEvents : function(){
  303.             var me = this;
  304.             me.eventsSuspended = !delete me.suspendedEventQueue;
  305.             EACH(me.suspendedEventsQueue, function(e) {
  306.                 me.fireEvent.apply(me, e);
  307.             });
  308.         }
  309.     }
  310. }();
  311. var OBSERVABLE = EXTUTIL.Observable.prototype;
  312. /**
  313.  * Appends an event handler to this object (shorthand for {@link #addListener}.)
  314.  * @param {String}   eventName     The type of event to listen for
  315.  * @param {Function} handler       The method the event invokes
  316.  * @param {Object}   scope         (optional) The scope (<code><b>this</b></code> reference) in which the handler function is executed.
  317.  * <b>If omitted, defaults to the object which fired the event.</b>
  318.  * @param {Object}   options       (optional) An object containing handler configuration.
  319.  * @method
  320.  */
  321. OBSERVABLE.on = OBSERVABLE.addListener;
  322. /**
  323.  * Removes an event handler (shorthand for {@link #removeListener}.)
  324.  * @param {String}   eventName     The type of event the handler was associated with.
  325.  * @param {Function} handler       The handler to remove. <b>This must be a reference to the function passed into the {@link #addListener} call.</b>
  326.  * @param {Object}   scope         (optional) The scope originally specified for the handler.
  327.  * @method
  328.  */
  329. OBSERVABLE.un = OBSERVABLE.removeListener;
  330. /**
  331.  * Removes <b>all</b> added captures from the Observable.
  332.  * @param {Observable} o The Observable to release
  333.  * @static
  334.  */
  335. EXTUTIL.Observable.releaseCapture = function(o){
  336.     o.fireEvent = OBSERVABLE.fireEvent;
  337. };
  338. function createTargeted(h, o, scope){
  339.     return function(){
  340.         if(o.target == arguments[0]){
  341.             h.apply(scope, TOARRAY(arguments));
  342.         }
  343.     };
  344. };
  345. function createBuffered(h, o, scope){
  346.     var task = new EXTUTIL.DelayedTask();
  347.     return function(){
  348.         task.delay(o.buffer, h, scope, TOARRAY(arguments));
  349.     };
  350. }
  351. function createSingle(h, e, fn, scope){
  352.     return function(){
  353.         e.removeListener(fn, scope);
  354.         return h.apply(scope, arguments);
  355.     };
  356. }
  357. function createDelayed(h, o, scope){
  358.     return function(){
  359.         var args = TOARRAY(arguments);
  360.         (function(){
  361.             h.apply(scope, args);
  362.         }).defer(o.delay || 10);
  363.     };
  364. };
  365. EXTUTIL.Event = function(obj, name){
  366.     this.name = name;
  367.     this.obj = obj;
  368.     this.listeners = [];
  369. };
  370. EXTUTIL.Event.prototype = {
  371.     addListener : function(fn, scope, options){
  372.         var me = this,
  373.             l;
  374.         scope = scope || me.obj;
  375.         if(!me.isListening(fn, scope)){
  376.             l = me.createListener(fn, scope, options);
  377.             if(me.firing){ // if we are currently firing this event, don't disturb the listener loop
  378.                 me.listeners = me.listeners.slice(0);
  379.             }
  380.             me.listeners.push(l);
  381.         }
  382.     },
  383.     createListener: function(fn, scope, o){
  384.         o = o || {}, scope = scope || this.obj;
  385.         var l = {
  386.             fn: fn,
  387.             scope: scope,
  388.             options: o
  389.         }, h = fn;
  390.         if(o.target){
  391.             h = createTargeted(h, o, scope);
  392.         }
  393.         if(o.delay){
  394.             h = createDelayed(h, o, scope);
  395.         }
  396.         if(o.single){
  397.             h = createSingle(h, this, fn, scope);
  398.         }
  399.         if(o.buffer){
  400.             h = createBuffered(h, o, scope);
  401.         }
  402.         l.fireFn = h;
  403.         return l;
  404.     },
  405.     findListener : function(fn, scope){
  406.         var s, ret = -1;
  407.         EACH(this.listeners, function(l, i) {
  408.             s = l.scope;
  409.             if(l.fn == fn && (s == scope || s == this.obj)){
  410.                 ret = i;
  411.                 return FALSE;
  412.             }
  413.         },
  414.         this);
  415.         return ret;
  416.     },
  417.     isListening : function(fn, scope){
  418.         return this.findListener(fn, scope) != -1;
  419.     },
  420.     removeListener : function(fn, scope){
  421.         var index,
  422.             me = this,
  423.             ret = FALSE;
  424.         if((index = me.findListener(fn, scope)) != -1){
  425.             if (me.firing) {
  426.                 me.listeners = me.listeners.slice(0);
  427.             }
  428.             me.listeners.splice(index, 1);
  429.             ret = TRUE;
  430.         }
  431.         return ret;
  432.     },
  433.     clearListeners : function(){
  434.         this.listeners = [];
  435.     },
  436.     fire : function(){
  437.         var me = this,
  438.             args = TOARRAY(arguments),
  439.             ret = TRUE;
  440.         EACH(me.listeners, function(l) {
  441.             me.firing = TRUE;
  442.             if (l.fireFn.apply(l.scope || me.obj || window, args) === FALSE) {
  443.                 return ret = me.firing = FALSE;
  444.             }
  445.         });
  446.         me.firing = FALSE;
  447.         return ret;
  448.     }
  449. };
  450. })();