我正在使用 Javascript/Node 开发硬件设备导航系统,并在基于滚轮的导航(模拟较旧的硬件旋转拨号系统)方面取得了一些成功。但是当我“自上而下”构建它时,每个导航级别都有自己的导航功能和设置,在几个级别之后我很快确定这是无法控制的,并且将来无法维护。可在此处找到可用的 jsFiddle:https://jsfiddle.net/digitalmouse/by8w6ky9/或 https://jsfiddle.net/by8w6ky9/
如果您在 fiddle 的 Javascript 中注意到,有一个重复的序列,即为菜单选项的特定层生成一个新的 wheelnav 对象,为该对象设置各种参数和样式,然后通过插入名称来“创建”该 wheel 对象的菜单项。还有一个相应的 HTML DIV 伴随着创建。
我喜欢使用 JSON 或 Javascript 数组来包含所有菜单和子菜单信息,然后遍历它以动态构建菜单(菜单结构将根据用户访问权限而变化),同时添加同时将 DIV 添加到 DOM(这后面的部分我确实知道该怎么做)。该数组看起来像:
menuData = {
"menu": [
{ "id": 0, "name": "DashBoard", "image":"/images/dashboard.gif", "link": "blah.html", "subMenu": [
{ "id": 10, "name": "Running", "image": null, "link": "blah2.html", "subMenu": null },
{ "id": 11, "name": "Alarms", "image": null, "link": "blah3.html", "subMenu": null },
{ "id": 12, "name": "Moisture", "image": null, "link": "blah4.html", "subMenu": [
{ "id": 20, "name": "Overview", "image": null, "link": "blah5.html", "subMenu": null },
{ "id": 21, "name": "M. Details", "image": null, "link": "blah6.html", "subMenu": null }
]
}
]
}
]};
...等等,但我不确定如何最好地构建某种通用递归来构建导航组件 - 特别是 new wheelnav()
和 navigateFunction
特别是部分。如果有任何建议或代码片段可以减少所涉及的工作和/或促使我朝着正确的方向前进,我将不胜感激。
最佳答案
好吧,我不能给你一个确切的答案,因为我不知道你需要如何准确地组成你的菜单,但显然你需要动态地访问你的数据结构的嵌套属性。对于类似的工作,我最近实现了一个 Object 方法,我相信它会对你派上用场。检查一下。
menuData = {
"menu": [
{ "id": 0, "name": "DashBoard", "image":"/images/dashboard.gif", "link": "blah.html", "subMenu": [
{ "id": 10, "name": "Running", "image": null, "link": "blah.html", "subMenu": null },
{ "id": 11, "name": "Alarms", "image": null, "link": "blah.html", "subMenu": null },
{ "id": 12, "name": "Moisture", "image": null, "link": "blah.html", "subMenu": [
{ "id": 20, "name": "Overview", "image": null, "link": "blah.html", "subMenu": null },
{ "id": 21, "name": "M. Details", "image": null, "link": "blah.html", "subMenu": null }
]
}
]
},
{ "id": 1, "name": "Programs", "image":"/images/programs_on.gif", "subMenu": [
{ "id": 30, "name": "Intro", "image": null, "link": "programs.html", "subMenu": null },
{ "id": 31, "name": "Pg View", "image": null, "link": "programs.html", "subMenu": null },
{ "id": 32, "name": "Programs", "image": null, "link": "programs.html", "subMenu": [
{ "id": 40, "name": "Program #1", "image": null, "link": "programs.html", "subMenu": [
{ "id": 50, "name": "Start Time", "image": null, "link": "programs.html", "subMenu": null },
{ "id": 51, "name": "Station Time", "image": null, "link": "programs.html", "subMenu": null },
{ "id": 52, "name": "Program Setting", "image": null, "link": "programs.html", "subMenu": null }
]
},
{ "id": 41, "name": "Program #2", "image": null, "link": "programs.html", "subMenu": [
{ "id": 60, "name": "Start Time", "image": null, "link": "programs.html", "subMenu": null },
{ "id": 61, "name": "Station Time", "image": null, "link": "programs.html", "subMenu": null },
{ "id": 62, "name": "Program Setting", "image": null, "link": "programs.html", "subMenu": null }
]
}
]
}
]
}
]};
Object.prototype.getNestedValue = function(...a) {
return a.length > 1 ? (this[a[0]] !== void 0 && this[a[0]].getNestedValue(...a.slice(1))) : this[a[0]];
};
document.write(menuData.getNestedValue("menu",1,"subMenu",2,"subMenu",0,"subMenu",1,"id"));
由于您使用的是 Node ES6 功能,例如 rest 和 spread 运算符应该不是问题。
关于Javascript 函数递归(又名 'do more with less' ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37066665/