如何用javascript为html菜单创建可读的对象模型
How to create a readable object model for an html menu in javascript?
我正在开发一个基于用户输入构建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']
}
我知道这不是为菜单创建对象模型的最佳方式。我应该把它分成更小的部分吗?还是我试图这样做完全错了?
面向对象的目的是将给定抽象事物的属性和功能保持在一个位置,而不是像这里那样分散在多个独立的数据结构中。值得庆幸的是,Javascript允许您非常容易地用它们的属性来建模每个菜单/子菜单。
与您在数组中表示菜单的名称的方式相同,您也可以在数组中轻松地表示菜单本身,同时将与每个特定菜单相关的所有数据封装在一个简单的结构中。
在这里,我建模了一个简单的对象,将每个菜单表示为一个非常简单的对象。
var menus = [
{
name : 'menu1',
submenus : [
{
name : 'subMenu1',
items : [
{
name : 'item1',
enabled : false,
action : function() { /* do something */ }
}
]
}
]
},
{
name : 'menu2',
submenus : [
{
name : 'subMenu2',
items : [ /**etc.**/ ]
}
]
}
];
菜单有一个名称和一系列子菜单,每个子菜单也有一个名字和一个项目列表。同样,每个项目都有一个名称、一个表示是否禁用的布尔值和一个操作函数(大概您会将其绑定到一个单击事件)。
这里,菜单和子菜单是几乎相同的数据结构(除了菜单具有子菜单而子菜单具有项目的任意区别之外)。您可以通过使用递归数据结构(如树)对菜单进行建模来进一步简化这一点,其中每个节点要么是子菜单,要么是操作。使用递归可以创建任意深度的菜单,在任何深度添加操作,并轻松地上下移动子菜单。
相关文章:
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何使用Javascript客户端对象模型检索Sharepoint 2010列表项权限
- 用javascript在对象上创建不存在的方法
- React-从简单对象树创建dom
- 使用Javascript对象模型
- 为什么使用 Object('123') 创建对象会创建一个 String() 对象,但 typeof 是“对象”
- JavaScript具有从响应生成的角度嵌套对象模型(无限深)
- Jasmine在全局窗口对象上创建本地JS函数的Spy
- Do let语句在全局对象上创建属性
- 使用模型创建实例显示'不是函数'(节点使用猫鼬)
- 在Vanilla Javascript中使用窗体中的对象原型创建多个用户
- 重用XMLHttpRequest对象或创建一个新对象
- 任何学习Javascript浏览器对象模型的好地方
- 通过比较另外两个json对象来创建json对象
- Knockout JS将我的视图模型创建更改为使用映射pulgin
- 如何用javascript为html菜单创建可读的对象模型
- 在对象中创建根模型可观察数组的克隆
- BackboneJs:从嵌套对象中创建集合中的多个模型
- 如何在sharepoint客户端对象模型中获得由字段创建的显示名称
- 如何在sharepoint 2013中使用javascript对象模型创建一个站点列类型作为选择