Javascript 函数递归（又名“事半功倍”）答案

【问题标题】：Javascript functional recursion (aka 'do more with less')Javascript 函数递归（又名“事半功倍”）
【发布时间】：2016-09-01 04:33:19
【问题描述】：

我正在开发 Javascript/Node 中的硬件设备导航系统，并在基于滚轮的导航（模拟较旧的硬件旋转拨号系统）方面取得了一些成功。但是当我“自上而下”地构建它时，每个导航级别都有自己的导航功能和设置，我在几个级别之后很快确定这已经失控，并且将来无法维护。可以在这里找到工作的 jsFiddle：https://jsfiddle.net/digitalmouse/by8w6ky9/ 或 https://jsfiddle.net/by8w6ky9/

如果您在 fiddle 的 Javascript 中注意到，有一个重复序列：为菜单选项的特定层生成新的 wheelnav 对象，为该对象设置各种参数和样式，然后通过插入名称“创建”该轮对象的菜单项。还有一个对应的 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 部分。我将不胜感激任何建议或代码 sn-ps 以减少所涉及的工作和/或促使我朝着正确的方向前进。

【问题讨论】：

更新：看起来像 Javascript“工厂模式”的东西是我需要的：一个构建对象的函数。但是到目前为止发现了大量的理论和讨论，而不是很多可以理解的教程......

标签： javascript recursion dynamic navigation

【解决方案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 运算符应该不是问题。

【讨论】：