0

我正在开发一个基于用户输入构建 html 菜单的功能。尽管可以接受简单的参数或数组类型。我认为这不是一个好习惯，而且它使代码难以阅读。如何为使用它构建菜单的函数创建可读的对象模型？菜单对象，具有菜单名称，它们各自的子菜单，......子菜单中的各个项目，如果它们被禁用或具有绑定到其点击事件的功能。例如，考虑以下简单的对象模型：

var menu = {
menus : ['menu1','menu2'], 
subMenus : {'menu1' : 'subMenu1', 'menu2' : 'subMenu2'}, 
subMenuItems : {'subMenu1' : ['subMenu1','item1'], 'subMenu2' : ['item1','item2'] },
subMenu1 : ['item1', 'item2'],
enabled : {'item1' : function() { /* do something */ } },
disabled : ['item1']
}

我知道这不是为菜单创建对象模型的最佳方式。我应该把它分成更小的部分吗？还是我尝试这样做完全错了？

4

1 回答 1

1

面向对象的目的是将给定抽象事物的属性和功能保存在一个地方，而不是像您在这里那样分散在多个单独的数据结构中。值得庆幸的是，Javascript 允许您非常轻松地使用其属性对每个菜单/子菜单进行建模。

与您在数组中表示菜单名称的方式相同，您可以在数组中轻松表示菜单本身，同时将与每个特定菜单相关的所有数据封装在一个简单的结构中。

在这里，我建模了一个简单的对象来将每个菜单表示为一个非常简单的对象。

var menus = [
 {
  name : 'menu1',
  submenus : [
   {
    name : 'subMenu1',
    items : [
     {
      name : 'item1',
      enabled : false,
      action : function() { /* do something */ }
     }
    ]
   }
  ]
 },
 {
  name : 'menu2',
  submenus : [
   {
    name : 'subMenu2',
    items : [ /**etc.**/ ]
   }
  ]
 }
];

菜单有一个名称和一组子菜单，每个子菜单依次也有一个名称和一个项目列表。同样，每个项目都有一个名称、一个表示它是否被禁用的布尔值和一个操作函数（假设您会将其绑定到单击事件）。

在这里，菜单和子菜单几乎是相同的数据结构（除了菜单具有子菜单而子菜单具有项目的任意区别）。您可以通过使用递归数据结构（如tree ）对菜单进行建模来进一步简化此操作，其中每个节点都是子菜单或操作。使用递归将允许您创建任意深度的菜单、添加任意深度的操作以及轻松上下移动子菜单。

于 2013-07-27T20:07:29.190 回答