Ext JS 5的聲明式事件監聽

標籤：extjs   5   事件監聽   

原文：Declarative Listeners in Ext JS 5

在前文《在Ext JS 5使用ViewControllers》中，簡單的介紹了Ext JS 5的一項重要改進——聲明式事件監聽。在本文，將深度探討如何使用聲明式事件監聽啦簡化應用程式的視圖並減少自訂群組件的樣板代碼。

注意：文章假設你使用的是Ext JS 5.0.1或更高版本。

什麼是聲明式事件監聽？

所謂的“聲明式事件監聽”，就是指定義在類主體中的監聽或在執行個體的設定物件中使用了listeners配置項。以這種方式來聲明事件監聽不是Ext JS 5的新功能。在Ext JS 4，可以正在類中聲明事件監聽，不過只適於處理函數或範圍已定義的情況，例如：

    Ext.define(‘MyApp.view.User‘, {        extend: ‘Ext.panel.Panel‘,         listeners: {            // 函數必須內聯或在之前已被定義:            collapse: function() {                // respond to panel collapse here            }        },         //該方法不能被定義為collapse的處理函數:        onCollapse: function() {        }    });

由於所需的處理函數不能使用類中定義的方法，因而聲明式監聽在Ext JS 4中的使用有限。開發人員通常會通過重寫initComponent方法並使用on方法來添加監聽：

    Ext.define(‘MyApp.view.User‘, {        extend: ‘Ext.panel.Panel‘,         initComponent: function() {            this.callParent();             this.on({                collapse: this.onCollapse,                scope: this            });        },         onCollapse: function() {            console.log(this); // the panel instance        }    }); 

範圍解析

在Ext JS 5，對listeners配置項做了改進，允許將事件處理指定為字串來對應方法名。在運行時（觸發事件的任何時候），架構會將這些方面解析為實際的函數引用。我們將這一過程稱為事件監聽範圍解析。

在Ext JS 4，如果明確給出了“範圍”，才能解析字串處理常式。而在Ext JS 5，在聲明“字串”處理常式而沒有明確聲明範圍的時候，為預設範圍解析添加了一些特殊規則。

範圍解析有兩種結果：組件或視圖控制器（ViewController）。無論是哪種結果，都會從組件開始搜尋。範圍可能是組件，也可能是視圖控制器，如果不是，架構會“爬”到組件的上層直到找到適合的組件或視圖控制器。

解析範圍為組件

架構解析範圍的第一種方式是尋找defaultListenerScope配置項為true的組件。對於類中的事件監聽聲明，搜尋會從組件自身開始。

    Ext.define(‘MyApp.view.user.User‘, {        extend: ‘Ext.panel.Panel‘,        xtype: ‘user‘,        defaultListenerScope: true,         listeners: {            save: ‘onUserSave‘        },         onUserSave: function() {            console.log(‘user saved‘);        }    }); 

監聽被定義在了使用者視圖的類主體，這意味著架構在提升層次之前會先檢查使用者視圖自身的defaultListenerScope。在當前樣本，使用者視圖將defaultListenerScope設定為了true，那當前監聽的範圍將會被解析為使用者視圖。

對於事件監聽被聲明在執行個體配置項的情況，將會條過組件自身，架構會從父容器開始搜尋，請參考以下代碼：

    Ext.define(‘MyApp.view.main.Main‘, {        extend: ‘Ext.container.Container‘,        defaultListenerScope: true,         items: [{            xtype: ‘user‘,            listeners: {                remove: ‘onUserRemove‘            }        }],         onUserRemove: function() {            console.log(‘user removed‘);        }    });

對於使用者視圖的監聽是在執行個體的設定物件中聲明的，這意味著架構會跳過使用者視圖（儘管它定義了defaultListenerScope為true），且會解析為主視圖。

解析範圍為視圖控制器

在Ext JS 5，引入了新的控制器類型——Ext.app.ViewController。在《在Ext JS 5使用ViewControllers》中詳細介紹了視圖控制器，因此這裡只討論與視圖控制器與事件監聽有關的部分。

與Ext.app.Controller可以管理許多視圖不同，每一個視圖控制器執行個體只能綁定一個視圖執行個體。視圖與視圖控制器之間之間一對一的關係允許視圖控制器作為視圖或視圖的條目中事件監聽聲明的預設範圍。

對於defaultListenerScope，規則同樣適用於視圖控制器。類層的監聽總是會在搜尋組件的上層之前先搜尋組件自身的視圖控制器。

    Ext.define(‘MyApp.view.user.User‘, {        extend: ‘Ext.panel.Panel‘,        controller: ‘user‘,        xtype: ‘user‘,         listeners: {            save: ‘onUserSave‘        }    });     Ext.define(‘MyApp.view.user.UserController‘, {        extend: ‘Ext.app.ViewController‘,        alias: ‘controller.user‘,         onUserSave: function() {            console.log(‘user saved‘);        }    });

上述監聽被聲明在使用者視圖的類主體內，由於使用者視圖有它自己的控制器，架構會解析範圍為UserController。如果使用者視圖沒有自己的控制器，那麼範圍會解析到上層。


另一方面，執行個體層監聽會跳過組件並解析為視圖控制器上層的父容器，例如：

    Ext.define(‘MyApp.view.main.Main‘, {        extend: ‘Ext.container.Container‘,        controller: ‘main‘,         items: [{            xtype: ‘user‘,            listeners: {                remove: ‘onUserRemove‘            }        }]    });     Ext.define(‘MyApp.view.main.MainController‘, {        extend: ‘Ext.app.ViewController‘,        alias: ‘controller.main‘,         onUserRemove: function() {            console.log(‘user removed‘);        }    });

合并listeners配置項

在Ext JS 4，在基類聲明的監聽會被子類或執行個體的listeners配置項的聲明完全重寫。在Ext JS 5，改進了listeners的API，可適當的合并在基類、子類和執行個體中的事件監聽聲明。要想瞭解其中的行為，可查看以下樣本：

    Ext.define(‘BaseClass‘, {        extend: ‘Ext.Component‘,        listeners: {            foo: function() {                console.log(‘foo fired‘);            }        }    });     Ext.define(‘SubClass‘, {        extend: ‘BaseClass‘,        listeners: {            bar: function() {                console.log(‘bar fired‘);            }        }    });     var instance = new SubClass({        listeners: {            baz: function() {                console.log(‘baz fired‘);            }        }    });     instance.fireEvent(‘foo‘);    instance.fireEvent(‘bar‘);    instance.fireEvent(‘baz‘);

在Ext JS 4，上面樣本只會輸出“baz”，但在Ext JS 5，listeners配置項會被正確的合并並輸出“foo bar baz”。這就允許類在需要的時候才去聲明監聽而不需要知道超類是否已經有了監聽。

小結

我們任務聲明式的監聽可大大簡化應用程式中的事件監聽定義。結合視圖控制器用於處理應用程式的邏輯和視圖模型的雙向繫結，還可以儘可能的改進應用程式的開發體驗。嘗試去讓我們知道你的想法。

Phil Guerrant
Phil is a Sencha software engineer who works on Ext JS. He has over 10 years of experience as a developer and specializes in HTML5 and web development, UI, and agile methodologies.

Ext JS 5的聲明式事件監聽