ExtJS (JavaScript) 模块设计模式最佳实践 [英] ExtJS (JavaScript) Module Design Pattern best practices
问题描述
我有一个关于模块设计模式最佳实践的问题.下面的代码是我们的一些组件的编写方式的一个例子(我们使用 ExtJs，但这不应该太重要).我们构建了很多这样的组件，我知道这并不完全符合最佳实践.有任何清理代码的想法吗?
I have a question about best practices with the Module Design Pattern. The code below is an example of the way that some of our Components are written (we use ExtJs but that shouldn't matter too much). We build a lot of our components like this and I know that this doesn't match best practices exactly. Have any thoughts to clean up the code?
Ext.ns("TEAM.COMPONENT");
function Foo() {
// Private vars
var privateNumber=0, myButton, privateInternalObject;
var numberField = new Ext.form.NumberField({
label : 'A NumberField!',
listeners : {
'change' : function(theTextField, newVal, oldVal) {
console.log("You changed: " + oldVal + " to: " + newVal);
}
}
});
// Some private methods
function changeNumField(someNumber) {
numberField.setValue(someNumber);
}
// Some public methods
this.publicFunctionSetNumToSomething() {
changeNumField(privateNumber);
}
/**
* Initializes Foo
*/
function init() {
// Do some init stuff with variables & components
myButton = new Ext.Button({
handler : function(button, eventObject) {
console.log("Setting " + numberField + " to zero!");
changeNumField(0);
},
text : 'Set NumberField to 0'
});
privateInternalObject = new SomeObject();
word = "hello world";
privateNumber = 5;
}
init();
return this;
};
我想知道一些关于此的事情，想询问并开始对话:
I'm wondering a few things about this and wanted to ask and get conversation going:
- 在声明变量时(即在 Foo 的顶部)初始化变量有多重要
- 如果此模块的客户端进入需要将其
foo对象设置回其原始对象的状态，我该如何重新初始化此对象的一部分 - 这种设计可能会导致什么样的内存问题，我该如何重构以降低这种风险?
- 在哪里可以了解更多信息?是否有任何文章在不过度依赖最新最好的 EcmaScript 5 的情况下解决这个问题?
- How important is it to initialize variables when they're declared (i.e. at the top of Foo)
- How might I re-initialize part of this object if a client of this Module gets to a state that it's
fooobject needs to be set back to it's originals - What sort of memory issues might this design lead to and how can I refactor to mitigate that risk?
- Where can I learn more? Are there any articles that address this without relying too much on the latest and greatest of EcmaScript 5 ?
更新 2012-05-24我只是想补充一点，我认为这个问题( Extjs: extend class via constructor or initComponent? )与对话，特别是考虑到投票最高的答案来自前 Ext JS 联合创始人和核心开发人员"
Update 2012-05-24 I just wanted to add, I think this question ( Extjs: extend class via constructor or initComponent? ) is pretty relevant to the conversation, especially considering that the top voted answer is from a "former Ext JS co-founder and core developer"
更新 2012-05-31另外，这个问题也应该链接( 使用 ExtJS 扩展类时的私有成员).此外，这是迄今为止我最喜欢的实现:
Update 2012-05-31 One more addition, this question should also be linked ( Private members when extending a class using ExtJS ). Also, here is my favorite implementation to date:
/*jshint smarttabs: true */
/*global MY, Ext, jQuery */
Ext.ns("MY.NAMESPACE");
MY.NAMESPACE.Widget = (function($) {
/**
* NetBeans (and other IDE's) may complain that the following line has
* no effect, this form is a useless string literal statement, so it
* will be ignored by browsers with implementations lower than EcmaScript 5.
* Newer browsers, will help developers to debug bad code.
*/
"use strict";
// Reference to the super "class" (defined later)
var $superclass = null;
// Reference to this "class", i.e. "MY.NAMESPACE.Widget"
var $this = null;
// Internal reference to THIS object, which might be useful to private methods
var $instance = null;
// Private member variables
var someCounter, someOtherObject = {
foo: "bar",
foo2: 11
};
///////////////////////
/* Private Functions */
///////////////////////
function somePrivateFunction(newNumber) {
someCounter = newNumber;
}
function getDefaultConfig() {
var defaultConfiguration = {
collapsible: true,
id: 'my-namespace-widget-id',
title: "My widget's title"
};
return defaultConfiguration;
}
//////////////////////
/* Public Functions */
//////////////////////
$this = Ext.extend(Ext.Panel, {
/**
* This is overriding a super class' function
*/
constructor: function(config) {
$instance = this;
config = $.extend(getDefaultConfig(), config || {});
// Call the super clas' constructor
$superclass.constructor.call(this, config);
},
somePublicFunctionExposingPrivateState: function(clientsNewNumber) {
clientsNewNumber = clientsNewNumber + 11;
somePrivateFunction(clientsNewNumber);
},
/**
* This is overriding a super class' function
*/
collapse: function() {
// Do something fancy
// ...
// Last but not least
$superclass.collapse.call(this);
}
});
$superclass = $this.superclass;
return $this;
})(jQuery);
推荐答案
首先，这不是我所知道的专门的模块设计模式，这是一个通用的构造器模式.我知道的模块模式是单例模式，但在这里你可以有很多 Foo() 的实例.话虽这么说...
First, this isn't specifically a module design pattern as I know it, this is a general constructor pattern. The module pattern I know is a singleton, but here you could have many instances of Foo(). That being said...
问:在声明变量时(即在 Foo 的顶部)初始化变量有多重要
Q: How important is it to initialize variables when they're declared (i.e. at the top of Foo)
为了清晰起见，在顶部声明它们很重要，但在这里初始化它们并不重要，因为您是在 init.d 中这样做的.如果您没有这样做，初始化它们可以防止您在稍后测试变量之前进行未定义的检查:
Declaring them at the top is important for clarity, but initializing them isn't as important here since you're doing so in the init. If you weren't doing this, initializing them prevents you from having to do an undefined check before testing the variable later:
var x;
function baz(){
if (typeof(x) === 'undefined') {
// init
} else {
if (x > 0) { blah } else { blah blah }
}
}
问:如果此模块的客户端进入需要将其 foo 对象设置回其原始对象的状态，我该如何重新初始化此对象的一部分
Q: How might I re-initialize part of this object if a client of this Module gets to a state that it's foo object needs to be set back to it's originals
创建公共重置方法有什么问题吗?它将可以访问私有变量.
Is there something wrong with creating a public reset method? It will have access to the private variables.
function Foo() {
// ...
this.reset = function () {
privateNumber = 0;
// etc
};
// ...
}
问:这种设计可能会导致什么样的内存问题，我该如何重构以降低这种风险?
Q: What sort of memory issues might this design lead to and how can I refactor to mitigate that risk?
我不知道.
问:在哪里可以了解更多信息?是否有任何文章在不过度依赖最新最好的 EcmaScript 5 的情况下解决这个问题?
Q: Where can I learn more? Are there any articles that address this without relying too much on the latest and greatest of EcmaScript 5 ?
这里有一篇关于 Javascript 模块(和其他)模式的好书:http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript
Here's a good read about the Javascript module (and other) pattern(s): http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript
这篇关于ExtJS (JavaScript) 模块设计模式最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
