<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css/">
<style media="screen">
.square{
width:50px;
height:50px;
line-height:50px;
text-align:center;
display:inline-block;
margin-right:10px;
background:black;
color:white;
font-size:150%;
font-family:sans-serif;
}
</style>
</head>
<body>
<div class="square" id="elementObserver1"></div>
<hr>
<button type="button" onclick = "model.increment()">Increment</button>
<script src="NumberModel.js" charset="UTF-8"></script>
<script src="ElementObserver.js" charset="UTF-8"></script>
<script src="consoleObserver.js" charset="UTF-8"></script>
<script src="historyObserver.js" charset="UTF-8"></script>
<script type="text/javascript">
const model = new NumberModel();
const eObs1 = new ElementObserver('elementObserver1');
const consoleObserver = new ConsoleObserver();
const historyObserver = new HistoryObserver();
model.addObserver(eObs1);
model.addObserver(consoleObserver);
model.addObserver(HistoryObserver);
model.notifyObservers();//초기화
</script>
</body>
</html>
class NumberModel{
constructor(){
this.number =0;
this.color = 'red';
this.observers = [];
}
increment(){
const colors = ['orange','red','green','blue'];
this.number++;
this.color = colors[Math.floor(Math.random()*colors.length)];
this.notifyObservers();
}
addObserver(o){
this.observers.push(o);
};
notifyObservers(){
for(let o of this.observers){
o.update(this); //초기화함수?
}
}
}
class HistoryObserver{
constructor(){
this.colorHistory = [];
}
update(model){
this.colorHistory.unshift(model.color.toUpperCase());
let msg = 'the most recent 5 colors were' ;
for(let i =0; i<5; i++){
if(this.colorHistory[i]){
msg +=this.colorHistory[i]+ '';
}
}
console.log(msg);
}
}
class ElementObserver{
constructor(elementId){
this.element = document.getElementById(elementId);
}
update(model){
this.element.innerHTML = model.number;
this.element.style.backgroundColor = model.color;
} ;//update 변수를 통해 model에 접근, color와 number에 접근가능
}
class ConsoleObserver{
constructor(){
}
update(model){
console.log('the number is'+model.number + 'and color is' + model.color.toUpperCase());
}
}
