JavaScript设计模式系列04_组合模式写的菜单（把菜单的数据用json数组表示，降低耦合度，体现对修改关闭）

最新推荐文章于 2022-08-29 17:51:21 发布
最新推荐文章于 2022-08-29 17:51:21 发布
阅读量436 收藏 1
点赞数 1
分类专栏： JavaScript从入门到精通 面向对象 设计模式 文章标签： 设计模式 JavaScript 面向对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiang7701037/article/details/82870988
版权

效果：

 

以下代码经过测试：

菜单的数据（json数组），文件名：menuData.js：

let menuData=[
	{
		title:"一级菜单1",
		href:"#",
		className:"oneli",
		subClassName:"two",
		children:[
			{				
				title:"二级菜单11",
				href:"#",
				className:"twoli",
				subClassName:"three",
				children:[
					{				
						title:"百度一下",
						href:"http://www.baidu.com",
						className:"threeli",
						subClassName:"",
						children:[]
					},
					{				
						title:"三级菜单112",
						href:"#",
						className:"threeli",
						subClassName:"",
						children:[]
					},
					{				
						title:"三级菜单113",
						href:"#",
						className:"threeli",
						subClassName:"",
						children:[]
					}
				]
			},
			{
				title:"二级菜单12",
				href:"#",
				className:"twoli",
				subClassName:"three",
				children:[]
			},
			{
				title:"二级菜单13",
				href:"#",
				className:"twoli",
				subClassName:"",
				children:[]
			}
		]
	},
	{
		title:"一级菜单2",
		href:"#",
		className:"oneli",
		subClassName:"two",
		children:[
			{
				title:"京东",
				href:"http://www.jd.cn",
				className:"twoli",
				subClassName:"three",
				children:[]
			}
		]
	},
	{
		title:"一级菜单3",
		href:"#",
		className:"oneli",
		subClassName:"two",
		children:[
			{	
				title:"二级菜单31",
				href:"#",
				className:"twoli",
				subClassName:"three",
				children:[
					{						
						title:"三级菜单311",
						href:"#",
						className:"threeli",
						subClassName:"",
						children:[]
					},
					{						
						title:"三级菜单312",
						href:"#",
						className:"threeli",
						subClassName:"",
						children:[]
					}
				]
			}
		]
	}
];

菜单项类，文件名：MenuItem.js

//菜单类
function MenuItem(obj){
	this.title = obj.title;//菜单上的文字
	this.href = obj.href ;//菜单对应的页面
	this.className = obj.className;//
	//this.parentMenu = obj.parentMenu;//父节点
	this.subClassName = obj.subClassName;//子菜单容器的类名
	this.children = [];//所有的子菜单
}

MenuItem.prototype.createUI = function(ulDom){
	//1、创建菜单本身的dom
	let liDom = document.createElement("li");
	liDom.className = this.className;
	let aDom = document.createElement("a");
	aDom.href = this.href;
	aDom.innerHTML = this.title;
	liDom.appendChild(aDom);
	ulDom.appendChild(liDom);
	
	//2、创建子菜单的dom
	if(this.children.length>0){
		//1）、创建子菜单的容器
		let subUlDom = document.createElement("ul");
		subUlDom.className = this.subClassName;
		liDom.appendChild(subUlDom);
		//2）、循环children，让每一个子菜单创建自身
		for(let i in this.children){
			this.children[i].createUI(subUlDom);
		}
	}	
}

MenuItem.prototype.appendChild = function(menuItem){
	this.children.push(menuItem);
}

菜单管理类，文件名：MenuManager.js


//菜单管理类
function MenuManage(menuData){
	this.menuData = menuData;
	this.children=[];//子菜单对象。
}

MenuManage.prototype.appendChild = function(menuItem){
	this.children.push(menuItem);
}

MenuManage.prototype.createUI = function(ulDom){
	//创建所有菜单的外观
	for(let i in this.children){
		this.children[i].createUI(ulDom);
	}
}

//功能：创建子菜单对象（JavaScript）；
//参数：父菜单对象，子菜单数据
MenuManage.prototype.createSubMenu = function(parentMenu,menuItemObj){
	let menuItem = new MenuItem({
		title:menuItemObj.title,
		href:menuItemObj.href,
		className:menuItemObj.className,
		subClassName:menuItemObj.subClassName
	});
	parentMenu.appendChild(menuItem);
	
	for(let i in menuItemObj.children){
		this.createSubMenu(menuItem,menuItemObj.children[i]);
	}
}

MenuManage.prototype.createMenu =function(){
	//创建所有的菜单对象，并建立关系
	for(let i in this.menuData){
		this.createSubMenu(this,this.menuData[i]);
	}
}

 

html文件，菜单.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{ padding:0; margin:0}
			ul{ list-style:none}
			a{ text-decoration:none; display:block; width:200px; height:50px;}
			.one{ width:1000px; height:50px; line-height:50px; background:#ff0; margin:0 auto;}
			.oneli{ float:left; width:200px; height:50px; text-align:center; position:relative;}
			.oneli a:hover{ background:#0ff;}
			/*二级菜单*/
			.two{ width:200px; background:#96F; position:absolute; display:none; }
			.oneli:hover .two{ display:block;}
			.twoli a:hover{ background:#90F}
			.twoli{ position:relative;}
			/*三级菜单*/
			.three{ width:200px; background:#FF9; position:absolute; top:0px; left:200px; display:none;}
			.twoli:hover .three{ display:block;}
			.threeli a:hover{ background:#FC0}
			/*最后一个的三级菜单*/
			.last .three{ width:200px; background:#FF9; position:absolute; top:0px; left:-200px; display:none;}
			.last .twoli:hover .three{ display:block;}
			.last .threeli a:hover{ background:#FC0}
			
			</style>
	</head>
	<body>
		
		<ul id="box" class="one">
			
		</ul>
		
	</body>
</html>
<script type="text/javascript" src="js/menuData.js" ></script>
<script type="text/javascript" src="js/MenuItem.js" ></script>
<script type="text/javascript" src="js/MenuManager.js" ></script>
<script type="text/javascript">


window.onload = function(){
	//1、创建菜单管理类
	let rootMenu = new MenuManage(menuData);
	//2、建立菜单对象的关系
	rootMenu.createMenu();
	//3、创建所有的DOM元素
    rootMenu.createUI(document.getElementById("box"));
}

</script>

 

 

如果要看菜单的布局，请看如下代码（html文件）：

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{ padding:0; margin:0}
			ul{ list-style:none}
			a{ text-decoration:none; display:block; width:200px; height:50px;}
			.one{ width:1000px; height:50px; line-height:50px; background:#ff0; margin:0 auto;}
			.oneli{ float:left; width:200px; height:50px; text-align:center; position:relative;}
			.oneli a:hover{ background:#0ff;}
			/*二级菜单*/
			.two{ width:200px; background:#96F; position:absolute; display:none; }
			.oneli:hover .two{ display:block;}
			.twoli a:hover{ background:#90F}
			.twoli{ position:relative;}
			/*三级菜单*/
			.three{ width:200px; background:#FF9; position:absolute; top:0px; left:200px; display:none;}
			.twoli:hover .three{ display:block;}
			.threeli a:hover{ background:#FC0}
			/*最后一个的三级菜单*/
			.last .three{ width:200px; background:#FF9; position:absolute; top:0px; left:-200px; display:none;}
			.last .twoli:hover .three{ display:block;}
			.last .threeli a:hover{ background:#FC0}
			
			</style>
	</head>
	<body>
		<ul id="box" class="one">
			<li class="oneli">
				<a href="#">一级菜单1</a>
				<ul class="two">
					<li class="twoli">
						<a href="#">二级菜单11</a>
						<ul class="three">
							<li class="threeli">
								<a href="http://www.baidu.com">进入百度一下</a>
								
							</li>
							<li class="threeli">
								<a href="#">三级菜单112</a>
							</li>
							<li class="threeli">
								<a href="#">三级菜单113</a>
							</li>
						</ul>
					</li>
					<li class="twoli">
						<a href="#">二级菜单12</a>						
					</li>
					<li class="twoli">
						<a href="#">二级菜单13</a>
					</li>
				</ul>
			</li>
			<li class="oneli">
				<a href="#">一级菜单2</a>
				<ul class="two">
					<li class="twoli">
						<a href="#">二级菜单21</a>
					</li>
					<li class="twoli">
						<a href="#">二级菜单22</a>
					</li>
					<li class="twoli">
						<a href="#">二级菜单23</a>
					</li>
				</ul>
			</li>
			<li class="oneli">
				<a href="#">一级菜单3</a>
				<ul class="two">
					<li class="twoli">
						<a href="#">二级菜单31</a>
					</li>
					<li class="twoli">
						<a href="#">二级菜单32</a>
					</li>
					<li class="twoli">
						<a href="#">二级菜单33</a>
					</li>
				</ul>
			</li>
		</ul>
	</body>
</html>
<script type="text/javascript">

</script>

 

田江
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第一章—ASP.NET2008_MVC开发模式初探
11-16
ASP.NET 2008 MVC 开发模式是微软推出的一种用于构建Web应用程序的框架，它引入了一种新的架构，旨在解决传统ASP.NET中的一些问题，如代码耦合度高、维护困难等。在MVC（Model-View-Controller）模式中，应用程序的...
vue动态添加权限路由
xjf106的博客
08-24 1857
在做后台系统时一般都会涉及到菜单权限控制的问题，这里的处理是根据后端返回的权限表，生成动态路由来控制权限，话不多说，上代码。
antd框架——实现自定义菜单功能——技能提升
yehaocheng520的博客
08-29 3264
antd框架——实现自定义菜单功能——技能提升
js工具---metadata.js
weixin_30825581的博客
03-03 239
　　今天要介绍的这一款js的工具叫metadata.js，是用来提取元数据的，很多插件开发中会用到它，尤其是用户自定义功能时，例如validate.js。 　　找了半天也只找到了一些简单的资料，先就将就的看一下吧 　　http://www.iteye.com/topic/349727 转载于:https://www.cnblogs.com/djlxs/p/5239103.html...
读取数据的文件 menu.js
jroganqi的专栏
10-23 466
/** * 树形菜单控制类 * @author zxub */ var TreeMenu=new function() { this._url=null; //加入样式 document.write(); document.write(.treeCheckBox{height:11px; width:11px;vertical-align:middle}); d
vue三级菜单渲染_vue.js实现三级菜单效果
weixin_39921224的博客
12-24 1567
本文实例为大家分享了vue.js实现三级菜单的具体代码，供大家参考，具体内容如下YfS免费资源网html部分YfS免费资源网{{firstList.title}}{{secondList.title}}{{thirdList}}js部分YfS免费资源网var app = new Vue({el:"#warp",data:{menuData: {firstList:{title:'练习册1',val...
Struts2＋spring2.5＋EXT＋json实例
08-06
依赖注入允许开发者通过配置文件或注解来管理对象之间的关系，降低了代码的耦合度，提高了可测试性和可维护性。Spring2.5还提供了对AOP（Aspect-Oriented Programming）的支持，允许开发者编写横切关注点，如事务...
MVC模式基础类库
08-09
- **解耦合**：MVC模式使模型、视图和控制器之间保持独立，允许开发者分别处理各自的职责，降低了耦合度。 - **易于测试**：由于模型和控制器是无UI的，它们可以更容易地进行单元测试。 - **可重用性**：模型和控制...
前端MVC的应用.pdf
最新发布
01-02
在JavaScript应用程序中，模型可以使用JSON来表示数据，并使用AJAX来存取数据。现在很多JavaScript库像Dojo、ExtJS都有专门的Data包，不管数据是用AJAX获取，还是从本地存储或DOM属性数据中获取，都可以通过这个Data...
前端js实现字符串/图片/excel文件下载
weixin_33889665的博客
02-13 568
在web开发中，如果你想让用户下载或者导出一个文件，应该怎么做呢？传统的做法是在后端存储或者即时生成一个文件来提供下载功能，这样的优势是可以做权限控制、数据二次处理，但缺点是需要额外发起请求、增大服务端压力、下载速度慢。 但随着HTML5的标准发布，我们已经能够做到只前端来下载各种文件了。 后端响应式下载 在常规的HTTP应答中，Cont...
普通数组转成树状数组(树形结构)详解(数组扁平化)
DavisCZ的博客
06-28 5033
普通数组转树形结构数组
php json无限极下拉框_JS无限极树形菜单,json格式、数组格式通用示例
weixin_36410141的博客
03-09 154
修改了一下数据格式，是json和数组或者混合型的数据都通用，不用特定key等JS无级树树形菜单,json格式，数组格式通用.menuTree{margin-left: -30px;}.menuTree div{padding-left: 30px;}.menuTree div ul{overflow: hidden;display: none;height: auto;}.menuTree spa...
利用json数据做父子二级菜单
Mchange的专栏
08-07 5806
最近做“点滴”的时候，需要用到二级菜单，就是那种二级菜单的pid指向一级菜单的id的那种。 所以自己动手写了一个。 优势是：（可能是我见得少了，自以为优势的地方）： 1.不用在数据库层做递归。只需要把数据查出来即可。（就是为了这点才写的，我用python，返回json比较容易，也比较舒服） 2.参见第一条。 思路： [ {"name":"Java Book",
java 编程 菜单权限设计，精确到按钮级别，建议收藏【转存】
艾利克斯冰的博客
01-30 6649
一、介绍 在实际的项目开发过程中，菜单权限功能可以说是后端管理系统中必不可少的一个环节，根据业务的复杂度，设计的时候可深可浅，但无论怎么变化，设计的思路基本都是围绕着用户、角色、菜单进行相应的扩展。 今天小编就和大家一起来讨论一下，怎么设计一套可以精确到按钮级别的菜单权限功能，废话不多说，直接开撸！ 二、数据库设计 先来看一下，用户、角色、菜单表对应的ER图，如下： 其中，用户和角色是多对多的关系，角色与菜单也是多对多的关系，用户通过角色来关联到菜单，当然也有的业务系统菜单权限模型，是可以直接
组合模式-系统菜单的设计
程序员小潘
01-09 1498
将对象组合成树形结构以表示“部分-整体”的层次结构，使得用户对单个对象和组合对象的使用具有一致性。
JavaScript设计模式系列04_组合模式写的菜单
jiang7701037的博客
01-09 379
效果图： 代码： *{ padding:0; margin:0} ul{ list-style:none} a{ text-decoration:none; display:block; width:200px; height:50px;} .one{ width:1000px; h
js消除耦合现象
宏斌的博客
02-06 810
每个函数中都有一个属性叫 arguments 用来包含所有传入的参数 这个对象还有一个属性叫 callee ，该属性是一个指针，指向拥有这个arguments对象的函数。 案例中 函数的执行与函数名factorial紧密的耦合在一起，要消除这种耦合现象，就要用到arguments.callee. actorial [fækˈtɔːriəl] fai ke tuo rui ou 阶乘函数 <...
写一个jquery的json 数组，再用JSON.stringify转换为json数据
09-03
如下是一个使用jQuery创建JSON数组并使用JSON.stringify方法将其转换为JSON数据的示例： ```javascript // 创建一个空的JSON数组 var jsonArr = []; // 向数组中添加JSON对象 jsonArr.push({ name: "张三", age:...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值