Question

我正在编写一个由多个不同模块组成的单页应用程序，每个模块都有不同的配置选项，可以由最终用户设置。我想要实现的是定义模块选项的标准方法，并且有一个选项模块可以读取每个模块的选项定义并呈现允许最终用户编辑的表单，保存并更新模块的配置。

我目前有一个使用对象文字定义模块选项的实现，然后我用一组负责呈现表单的方法扩展该对象，挂钩事件处理程序以保存和更新模块中的值。目前，这种解决方案充其量只能让人感到尴尬。看一下下面的代码，看看实现：

var module = {
    config: {
        id: 1,
        name: "module",
        foo: "bar"
    },
    options: {
    categories: {
        general: {
            name: "General",
            fields: {
                name: {
                    label: "Name",
                    variable: "config.name",
                    type: "text"
                }
            }
        }, 
        foo: {
            name: "Foo",
            fields: {
                bar: {
                    label: "Bar",
                    variable: "config.foo",
                    type: "text"
                }
            }
        }
    }
};

模块的options属性由主选项对象扩展，该对象包含用于呈现选项表单和处理保存操作的方法。 render函数基本上只是将模块的options属性应用于将其分解为类别的模板，然后应用于编辑和保存的字段将使用表单中的值更新变量。由于Javascript对象对其父对象一无所知，因此我必须创建一个module.options.root = module属性，该属性允许实际存储变量的函数访问module.config.name。当然这会遇到递归地狱，需要始终确保正确设置了root属性。它很乱，但我管理了。

这很好用，直到我遇到需要根据模块以两种不同的方式呈现选项表单。同样，需要根据其他选项的值启用/禁用选项，即if (field.gender.value === 'male') {field.braSize.enabled = false}

我想我的问题是，创建动态可重用选项表单的最佳方法是什么，可以应用于模块并允许进行编辑？

我希望这一切都有意义，如果您需要任何澄清，请告诉我。

有问题为应用程序实现标准化选项

0 个答案: