Javascript面向对象之策略模式

最新推荐文章于 2023-09-18 10:15:00 发布

我是QinDong

最新推荐文章于 2023-09-18 10:15:00 发布

阅读量179

点赞数 1

分类专栏： Javascript面向对象设计模式文章标签： filter javascript 设计模式

本文链接：https://blog.csdn.net/qq_44738564/article/details/113060585

版权

Javascript面向对象设计模式专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客介绍了一个JavaScript代码示例，展示了如何通过策略模式来管理按钮高亮状态。首先，当选择两个按钮后阻止选择第三个按钮，然后扩展到实现当三个按钮都被选中后，随机取消其中一个高亮的状态。通过策略一、策略二和策略三的对比，解释了策略模式在处理不同业务逻辑时的灵活性。

摘要由CSDN通过智能技术生成

我们先看个简单的例子，再根据需求扩展。
在这里插入图片描述

现在有个需求，三个按钮中选择了两个之后就不能先择第三个了，我们怎么实现呢，代码实现如下：

class Client {
	constructor(nodes) {
	    this.nodes = [...nodes];
		this.initEvent();
	}
	
	initEvent() {
		this.nodes.forEach((item) => {
			item.addEventListener('click', (e) => {
				this.handleClick(e.target);
			});
		});
	}
	
	handleClick(ele) {
		//过滤节点
		const items = this.nodes.filter((item) => item.classList.contains('active')); 
		if(items.length === 2 && !items.includes(ele)) return;
		
		ele.classList.toggle('active');
	}
}

new Client(document.querySelectorAll('.box'));

现在又有个需求，三个按钮点击三个高亮之后，随机取消掉一个。这时候我们可以使用策略模式，策略一：点击某个高亮，策略二：最多只有两个高亮，策略三：点击三个按钮点击三个高亮之后，随机取消掉一个。

class Client {
	constructor(nodes, strategy) {
	    this.nodes = [...nodes];
		this.strategy = strategy;
		this.initEvent();
	}
	
	initEvent() {
		this.nodes.forEach((item) => {
			item.addEventListener('click', (e) => {
				this.handleClick(e.target);
			});
		});
	}
	
	handleClick(ele) {
		this.strategy.process(ele, this.nodes);
	}
}
	
//策略一
class Strategy1 {
	process(ele, nodes){
		ele.classList.toggle('active');
	}
}
//策略二
class Strategy2 {
	process(ele, nodes){
		const items = nodes.filter((item) => item.classList.contains('active'));
		if(items.length === 2 && !items.includes(ele)) return;

		ele.classList.toggle('active');
	}
}

//策略三
class Strategy3 {
	process(ele, nodes){
		ele.classList.toggle('active');
		//every()方法用于检测数组所有元素是否都符合指定条件
		if(nodes.every(item => item.classList.contains('active'))){
			//随机取消一个
			nodes.filter(item => item !== ele)[Math.floor(Math.random()*2)].classList.toggle('active');
		}
	}
}

new Client(document.querySelectorAll('.box'), new Strategy3());