我正在使用 Ext JS4 开发一个项目。在我们的一些类中,我们在 initComponent 函数中声明函数,然后可以将其设置为控件的处理程序。我将在下面包括一个例子。忽略类中的大部分内容,关键细节是 Handlers 在 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
]
}
]
}
]
}
]
}
]
});
}
});
最佳答案
对于原始变量(如 string 或 int),当函数完成时,其所有局部变量都将被销毁。
对于非原始变量,本地创建的对象(如数组或 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”对象,它被渲染到文档的页面,因此所有附加对象和引用对象也都存在。
关于javascript - 在 initComponent Ext JS4 中声明函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11029888/