js设计模式之策略模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.wrap {
width: 300px;
height: 80px;
display: flex;
justify-content: center;
margin: 100px auto;
}
.wrap div {
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 10px;
border: 1px #ccc solid;
text-align: center;
line-height: 80px;
}
.wrap .active {
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div>高</div>
<div>富</div>
<div>帅</div>
</div>
<script>
class Active {
constructor(selector, tactics) {
this.nodes = [...document.querySelectorAll(selector)];
this.tactics = tactics;
this.bindEvent();
}
bindEvent() {
this.nodes.forEach((item) => {
var that = this
item.onclick = function () {
that.tactics.handle(this, that.nodes)
}
})
}
}
class Tactics1 {
handle(ele, nodes) {
ele.classList.toggle('active')
}
}
class Tactics2 {
handle(ele, nodes) {
let res = nodes.filter((item) => item.classList.contains('active'))
if(res.length === 2 && !ele.classList.contains('active'))
return
ele.classList.toggle('active')
}
}
class Tactics3 {
handle(ele, nodes) {
ele.classList.toggle('active')
if(nodes.every(item=>item.classList.contains('active'))){
nodes.filter(item=>item!==ele)[Math.floor(Math.random()*2)].classList.toggle('active')
}
}
}
new Active('.wrap div', new Tactics2())
</script>
</body>
</html>