Javascript 为应用程序实现标准化选项时出现问题
我正在编写一个单页应用程序,它由多个不同的模块组成,每个模块都有可由最终用户设置的不同配置选项。我试图实现的是一种定义模块选项的标准方法,并且有一个单独的选项模块,可以读取每个模块的选项定义,并呈现一个表单,允许最终用户编辑、保存和更新模块的配置 我目前有一个使用对象文本定义模块选项的实现,然后我使用一组方法扩展该对象,这些方法负责呈现表单,连接事件处理程序以保存和更新模块中的值。目前,这个解决方案充其量也让人觉得很笨拙。请查看以下代码以查看实现:Javascript 为应用程序实现标准化选项时出现问题,javascript,frontend,Javascript,Frontend,我正在编写一个单页应用程序,它由多个不同的模块组成,每个模块都有可由最终用户设置的不同配置选项。我试图实现的是一种定义模块选项的标准方法,并且有一个单独的选项模块,可以读取每个模块的选项定义,并呈现一个表单,允许最终用户编辑、保存和更新模块的配置 我目前有一个使用对象文本定义模块选项的实现,然后我使用一组方法扩展该对象,这些方法负责呈现表单,连接事件处理程序以保存和更新模块中的值。目前,这个解决方案充其量也让人觉得很笨拙。请查看以下代码以查看实现: var module = { conf
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"
}
}
}
}
};
模块的“选项”属性由主选项对象扩展,该对象包含用于呈现选项窗体和处理保存操作的方法。render函数实际上只是将模块的options属性应用于将其分解为类别的模板,然后应用于编辑和保存后将使用表单中的值更新变量的字段。由于Javascript对象对其父对象一无所知,因此我必须创建module.options.root=module属性,以允许实际存储变量的函数访问module.config.name。当然,这会遇到递归地狱,需要始终确保根属性设置正确。虽然很乱,但我还是设法做到了
在我遇到需要根据模块以两种不同的方式呈现选项表单之前,这一切都很好。此外,还需要根据其他选项的值启用/禁用选项,即如果field.gender.value=='male'{field.braSize.enabled=false}
我想我的问题是,创建可应用于模块并允许编辑的动态可重用选项表单的最佳方法是什么
我希望这一切都有意义,如果您需要任何澄清,请告诉我。我认为这对于每个应用程序都是独一无二的,并且只取决于您的编码风格。没有正确的答案。也许把它放在数组中以获得更多类型。我知道这听起来太明显了,但我可能会这么做。你也可以在数组的一个索引中使用一些设置,在另一个索引中使用一些设置。是的,我已经在我的把手模板中定义了这个逻辑。遗憾的是,这个问题还没有在一个包中解决。谢谢