Javascript面向对象之观察者模式

最新推荐文章于 2023-09-20 17:32:20 发布

我是QinDong

最新推荐文章于 2023-09-20 17:32:20 发布

阅读量269

点赞数 1

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

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

版权

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

3 篇文章 0 订阅

订阅专栏

先看个例子，当我们在例子中输入a时，包含a区块会高亮显示，输入b时，b包含b的区块会高亮显示。

在这里插入图片描述
代码：

在这里插入图片描述
比如，现在我们有个需求，添加一个包含数字的区块让它高亮显示，如果实现也是以同样的方法，就需要在原有的代码上进行修改,每次的需求都要在源代码上进行修改，这是无休止的修改。这就违背了面向对象的开闭原则，对扩展开放，对修改关闭，因为对新需求的增加不应该在源代码的基础上进行修改，应该通过扩展类的方式进行扩展，具体实现如下所示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="./new_file.css" />
	</head>
	<body>
		<div id="container">
			<h3>面向对象之观察者模式</h3>
			<input type="text"/>
			<div class="boxs">
			
			</div>
		</div>
	</body>
	<script>
		class input {
			constructor(el) {
			    this.observers = [];
				el.addEventListener("input", (e) => {
					this.notifyAll(e.target.value);
				});
			}
			
			notifyAll(value){
				this.observers.forEach((item) => {
					item.notify(value);
				});
			}
			
			addObserver(ob){
				this.observers.push(ob);
			}
		}
		
		class observer extends DocumentFragment {
			constructor(txt) {
				super();
			    this.txt = txt;
				this.div = document.createElement("div");
				this.div.className = "box";
				this.div.innerHTML = txt;
				
				document.querySelector(".boxs").append(this.div);
			}
			
			notify(value){
				this.div.classList.toggle("active", this.handle(value));
			}	
		}
		
		class defaultObserver extends observer {
			constructor(txt) {
				super(txt);
			    this.txt = txt;
			}
			
			handle(value){
				return value.indexOf(this.txt) != -1;
			}
		}
		
		class numberObserver extends observer {
			constructor(txt) {
			    super(txt);
				this.txt = txt;
			}
			
			handle(value){
				return /\d/.test(value);
			}
		}
		
		const ipt = new input(document.querySelector("input"));
		ipt.addObserver(new defaultObserver("a"));
		ipt.addObserver(new defaultObserver("b"));
		ipt.addObserver(new numberObserver("包含数字"));
	</script>
</html>

实现效果：

在这里插入图片描述

我是QinDong

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
Javascript面向对象之观察者模式

先看个例子，当我们在例子中输入a时，包含a区块会高亮显示，输入b时，b包含b的区块会高亮显示。代码：比如，现在我们有个需求，添加一个包含数字的区块让它高亮显示，如果实现也是以同样的方法，就需要在原有的代码上进行修改,每次的需求都要在源代码上进行修改，这是无休止的修改。这就违背了面向对象的开闭原则，对扩展开放，对修改关闭，因为对新需求的增加不应该在源代码的基础上进行修改，应该通过扩展类的方式进行扩展，具体实现如下所示。<!DOCTYPE html><html> <h
复制链接

扫一扫