Javascript 函数递归(又名 'do more with less' )

Question

我正在使用 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 特别是部分。如果有任何建议或代码片段可以减少所涉及的工作和/或促使我朝着正确的方向前进，我将不胜感激。

Answer 1

好吧，我不能给你一个确切的答案，因为我不知道你需要如何准确地组成你的菜单，但显然你需要动态地访问你的数据结构的嵌套属性。对于类似的工作，我最近实现了一个 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 运算符应该不是问题。