js#原生#观察者模式案例

最新推荐文章于 2023-03-11 20:38:23 发布

.Passion

最新推荐文章于 2023-03-11 20:38:23 发布

阅读量162

点赞数

本文链接：https://blog.csdn.net/qq_43923045/article/details/107133595

版权

前端专栏收录该内容

43 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.active{
				color: red;
			}
		</style>

	</head>

	<body>
		<div class="container">
			<h3>todo</h3>
			<input type="text">
			<div class="boxs">
				 
			</div>
			
		</div>

	</body>
	<script type="text/javascript">
		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(obj) {
				this.observers.push(obj)
			}
		}
		class Observer extends DocumentFragment{
			constructor(t) {
			    super(t);
				this.div = document.createElement('div')
				this.div.className = 'box'
				this.div.innerHTML = t
				document.querySelector('.boxs').append(this.div)
			}
			notify(v) {
				this.div.classList.toggle('active',this.handle(v))
			}
		}
		class DefaultObserver extends Observer{
			constructor(t) {
			    super(t);
				this.t = t;
			}
			handle(v) {
				return v.indexOf(this.t)!=-1;
			}
		}
		class NumberObserver extends Observer{
			constructor(t) {
			    super(t);
				this.t = t;
			}
			handle(v) {
				return /\d/.test(v)
			}
		}
		const ipt = new Input(document.querySelector('input'));
		ipt.addObserver(new DefaultObserver('A'));
		ipt.addObserver(new DefaultObserver('B'));
		ipt.addObserver(new DefaultObserver('C'));
		ipt.addObserver(new NumberObserver('包含数字'));
	</script>
	 


</html>