在 initComponent Ext JS4 中声明函数

Declaring functions inside initComponent Ext JS4

本文关键字：声明 函数 JS4 initComponent Ext      更新时间：2023-09-26

我正在使用Ext JS4处理项目。在我们的一些类中，我们在 initComponent 函数中声明函数，然后可以将其设置为控件的处理程序。我将在下面包括一个例子。忽略类中的大部分内容，关键细节是处理程序在 initComponent 中声明并设置为按钮的处理程序。

现在，这实际上有效 - 这里的问题是为什么它有效。我对 JavaScript 相当陌生，但我认为函数中声明的任何变量或函数一旦函数完成就会被销毁。这是不正确的吗？我很欣赏可能有更好的编码风格，但在我考虑更改类的负载之前，我真的很想解决这个问题。课程如下...一些评论指出了关键领域。

Ext.onReady(function () { 
    Ext.application({ 
        name: 'Form2', 
        thisForm: {}, 
        launch: function() { 
            thisForm = Ext.create('Form2', {});
        }
    });
});
Ext.define('Form2', {
    extend: 'Ext.form.Panel',
    layout:'border',
    config: {
        controlManager: {},
        formVariables:  {},
        dataHelper:     {}
    },
    constructor: function () {
        var me = this;
        ...
        ...
        // Initialize the form - I know, this might not be the be best coding style here.
        me.initComponent();
    },
    initComponent: function() {
    Ext.QuickTips.init(); 
    var ButtonControl1 = this.controlManager.createButton('ButtonControl1');
    var ButtonControl2 = this.controlManager.createButton('ButtonControl2');
    ...
    ... 
    // Handler for Btton1 - **I'm not using the var keyword in this declaration**
    function Handler1() { 
        alert('This Works!');
    };
    // Handler for Btton2 - **I'm using the var keyword in this example**
    var Handler2 = function () {
        alert('This Works also!');
    }; 
    // THIS IS THE KEY PART OF THIS QUESTION - even though the handler functions are declared
    // locally (above), clicking the buttons will still execute these. Do the functions
    // still exist by chance, and will be garbage collected at some later time, or are they
    // actually quaranteed to be there. I'm confused!
    ButtonControl1.onClickEventHandler = function () {Handler1();};
    ButtonControl2.onClickEventHandler = function () {Handler2();};
    // Don't need to worry about this part.
    Ext.create('Ext.container.Viewport', { 
        layout:'border', 
        style: { position:'relative' }, 
        defaults: { 
            collapsible: true, 
            split: true, 
            bodyStyle: 'padding:0px' 
        }, 
             items: [ 
                 { 
                       collapsible: false, 
                 split: false, 
                     region: 'north', 
                     height: 50, 
                     margins: '0 2 0 2', 
                     bbar: '', 
                     items: [  ] 
                 }, 
                 { 
                     collapsible: false, 
                     split: false, 
                     region:'west', 
                     margins: '0 0 0 0', 
                     cmargins: '0 2 0 2', 
                     width: 0, 
                     lbar: [  ] 
                 }, 
                 { 
                     collapsible: false, 
                     region:'center', 
                     margins: '0 2 0 2', 
                     layout: { 
                         align: 'stretch', 
                         type: 'hbox' 
                     }, 
                     items: [ 
                         { 
                             xtype: 'form', 
                             fileUpload: true, 
                             layout: { 
                                 align: 'stretch', 
                                 type: 'vbox' 
                             }, 
                             flex: 1, 
                             items: [ 
                             { 
                                 xtype: 'container', 
                                 height: 550, 
                                 layout: { 
                                     align: 'stretch', 
                                     type: 'hbox' 
                                 }, 
                                 items: [ 
                                 { 
                                     xtype: 'container', 
                                     width: 570, 
                                     layout: 'vbox', 
                                     padding: '5 0 0 0', 
                                     style:'background-color:rgb(255, 255, 255);', 
                                     items: [ 
                                         ButtonControl1, ButtonControl2
                                     ] 
                                 }
                                 ] 
                             } 
                             ] 
                         } 
                     ] 
                 } 
             ] 
         }); 
     } 
});

对于原始变量（如字符串或整数），当函数完成时，其所有局部变量都将被分发。

对于非基元变量，本地创建的对象（例如数组或 Ext 对象）将不会在存在任何其他对象引用时分发。

在您的示例中，ButtonControl1 和 ButtonControl2 是在 initComponent 外部声明的。

在 initComponent 函数中，onClickEventHandler 是对 Handler1 和 Handler2 函数的引用。当 initComponent 运行结束时，由于 ButtonControl1 和 ButtonControl2 不在 initComponent 的范围内（但在 onReady 函数的范围内），因此它们仍然处于活动状态，因此它们所引用的所有对象也保持活动状态。

var ButtonControl1  = ....; // this global variable object
var ButtonControl2  = ....; // this global variable object
initComponent: function() {
    function Handler1() { 
      ...
    };
    var Handler2 = function () {
      ...
    }; 
    // ButtonControl1 and ButtonControl2 are declared outside of initComponent. 
    // Unless these variables will be distroyed, they keep onClickEventHandler references to Handler1 and Handler2 objects and therefore these objects will alive outside the scope of initComponent. 
    ButtonControl1.onClickEventHandler = function () {Handler1();};
    ButtonControl2.onClickEventHandler = function () {Handler2();};
}

考虑 onReady 范围内的最后一个函数是 initComponent（即没有定义任何其他事件处理程序）。那么为什么所有这些对象在 initComponent 完成后都会保持活动状态呢？

答案是创建"Ext.container.Viewport"对象，该对象呈现到文档的页面，因此所有附加的对象和引用对象也处于活动状态。

相关文章：