面向对象编程-状态模式(js)
本文参考状态模式(js)
rainbow.prototype.init = function(){
self = this;
console.log(this);//<span style="color:#ff0000;">this1</span>
this.button.οnclick=function(){
console.log(this);//<span style="color:#ff0000;">this2</span>
self.currentColor.buttonPress.call(self);
}
};
var rainbow = function(){
this.currentColor = COLOR.red;
this.button = document.getElementsByClassName("circle")[0];
};
rainbow.prototype.init = function(c){
self = this;
this.button.οnclick=function(){
self.currentColor.buttonPress.call(self);
}
};
var COLOR = {
red:{
buttonPress:function (){
document.getElementsByClassName("circle")[0].style.backgroundColor = "orange";
this.currentColor = COLOR.orange;
}
},
orange:{
buttonPress:function (){
document.getElementsByClassName("circle")[0].style.backgroundColor = "yellow";
this.currentColor = COLOR.yellow;
}
},
yellow:{
buttonPress:function (){
document.getElementsByClassName("circle")[0].style.backgroundColor = "red";
this.currentColor = COLOR.red;
}
}
};
new rainbow().init("circle");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="../css/style.css" />
<title>状态模式</title>
<style>
.circle{
width:100px;
height:100px;
border-radius: 50%;
background-color: red;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="return_nav">
<div class="return_nav_img" onClick="javascript:window.location.href='../index.html'"></div>
状态模式
</div>
<div class="circle" ontouchend=""></div>
</body>
<script src="index.js"></script>
</html>