JavaScript/ExtJS : "Conditional Inheritance"?

Question

我们正在将 ExtJS 用于 Web 应用程序。在该应用程序中，当需要简单的下拉列表时，我们使用标准的 Ext.form.ComboBox 控件，而当我们需要下拉列表时，我们使用 Ext.us.Andrie.Select 控件您可以在其中选择多个值和/或清除该值。创建这些中的任何一个总是需要一堆用于配置选项的样板代码，因此我想要一个可以减少样板代码的类，当我在做的时候，我希望这个类能够生成简单的下拉菜单或更高级的菜单一，取决于配置选项(multi: true 或 clearable: true)，但这比预期要困难得多。

这是我最接近的工作结果:

MyComboBox = (function() {

    var singleDefaults = {
        typeAhead: false,
        triggerAction: 'all',
        selectOnFocus: false,
        allowBlank: true,
        editable: false,
        delay: 700
    };

    var multiDefaults = {
        typeAhead: false,
        triggerAction: 'all',
        selectOnFocus: false,
        allowBlank: true,
        editable: false,
        delay: 700
    };

    var constructor = function(config) {

            if (config.multi || config.clearable) {
                config = Ext.apply(this, config, multiDefaults);
                Ext.apply(this, Ext.ux.Andrie.Select.prototype);
                Ext.apply(this, Ext.ux.Andrie.Select(config));
                Ext.ux.Andrie.Select.prototype.constructor.call(this, config);
            } else {
                config = Ext.apply(this, config, singleDefaults);
                Ext.apply(this, Ext.form.ComboBox.prototype);
                Ext.apply(this, Ext.form.ComboBox(config));
                Ext.form.ComboBox.prototype.constructor.call(this, config);
            }
    };

    return function(config) {
        this.constructor = constructor;
        this.constructor(config);
    };

})();

嗯，它不会崩溃，但它也没有真正起作用。当设置为类似于 Ext.ux.Andrie.Select 的行为时，即使已加载，它也希望加载商店，除非您开始在字段中输入，否则不会展开下拉列表。

尝试过的另一种方法是这样的:

MyComboBox = Ext.extend(Ext.form.ComboBox, {
 constructor: function(config){
   if (config.multi || config.clearable) {
     Ext.form.ComboBox.prototype.constructor.call(this, config);
   } else {
     Ext.ux.Andrie.Select.prototype.constructor.call(this, config);
   }
 }
});

这不起作用，因为 Andrie 下拉列表没有定义自己的构造函数函数，因此它最终会调用 Ext.form.ComboBox 的构造函数，它继承自它，这会产生正常的下拉列表，而不是多选下拉列表。

我认为这是 ExtJS 特有的，但如果您有一个与框架无关的方法来执行此操作，我可能可以将其转换为 ExtJS。

Answer 1

在构建中型到大型 JavaScript 应用程序时，我发现将所有控件创建/实例化移动到单个类中很方便，因为每个方法都是该控件的工厂(即:组合框、文本区域、按钮、工具提示、复选框等)。由于只有工厂类知道如何创建控件，因此这具有将 View 逻辑与控件实例化本身解耦的额外好处(当然，只要控件构造函数和接口(interface)保持不变)。

WidgetFactory = {
    comboBox: function(config) {
        return config.multi || config.clearable
            ? this.comboBoxMultiple(config)
            : this.comboBoxSingle(config)
    },

    comboBoxSingle: function(config) {
        // ... boiler plate goes here ...
    },

    comboBoxMultiple: function(config) {
        // ... boiler plate goes here ...
    },

    textArea    : function(config) {},
    textBox     : function(config) {},
    checkbox    : function(config) {},
    radioButton : function(config) {},
    button      : function(config) {},
    slider      : function(config) {},
    colorPicker : function(config) {}

    // etc
};

通过将控件创建与 View 解耦，您可以快速轻松地将一个控件的实现替换为另一个控件，而无需搜索整个应用程序来查找/替换该控件创建样板的所有实例。

<小时/>

编辑:
我并不是想暗示这将取代创建/实例化控件的对象的使用，而是除此之外使用。使用 WidgetFactory 作为所有控件的单一网关比仅仅能够更改父类(super class)具有更大的灵 active 。您可以在不更改原始类的情况下交换整个类，从而允许您在必要时拥有多个不同的实现。

例如，如果您的单个组合框是由某个类定义的，namespace.ui.combobox.single，那么您可以执行以下操作

comboBoxSingle: function(config) {
    return new namespace.ui.combobox.single(config);
},

但是，如果您需要突然使用不同的类(也许是为了测试)，您可以在工厂中更改它一次

comboBoxSingle: function(config) {
    return new namespace.ui.combobox.single2(config);
},

并且可以轻松地来回切换，而无需更改实际的小部件类。