js實現觀察者模式風格替換

如下圖，我們看到兩種風格：在選擇男士時，頁面顏色為黑色；在選擇女士時，頁面顏色為粉紅色。

主要可以分為兩類：
下拉框 ---》 被觀察者
div   ---》 觀察者
selected>男士option>
value="woman">女士option>
select>
id="one">
div>
id="two">
div>
id="three">
div>
body>
var sel=document.getelementsbytagname('select')[0];
var one=document.getelementbyid("one");
var two=document.getelementbyid("two");
one.style.background="black";
two.innerhtml="i am superman";
window.onload=function
()else
if(sv=="man")}}
script>
html>
lang="en">
charset="utf-8">
title>
head>
divstyle>
name=""
id="">
value="man"
selected>男士option>
value="woman">女士option>
select>
id="one">
div>
id="two">
div>
id="three">
div>
body>
var sel=document.getelementsbytagname('select')[0];
var one=document.getelementbyid("one");
var two=document.getelementbyid("two");
one.style.background="black";
two.innerhtml="i am superman";
//定義乙個物件，用來儲存觀察者物件。
sel.servers={};
//定義乙個新增觀察者方法
sel.attach=function
(key,val);
//將觀察者新增到觀察者佇列中
sel.attach("one",one);
sel.attach("two",two);
sel.onchange=function
()    };
one.update=function
(obj)else
};two.update=function
(obj)  else 
};//當再出現觀察者時，我們只需要將觀察者新增到觀察者佇列中。
//降低了**的耦合性，增加了**的擴充套件性。
var three=document.getelementbyid('three');
sel.attach("three",three);
three.update=function
(obj)  else 
};script>
html>

Js 觀察者模式

function eventtarget eventtarget.prototype this.handlers type push handler fire function event if this.handlers event.type instanceof array removehand...

JS 觀察者模式

被觀察者 function observed 將observer註冊到observed上 observed.prototype.attach function s 產生新狀態 observed.prototype.setstate function newstate 觀察者 function obs...

js 觀察者模式

觀察者模式定義一種一對多的關係，多個觀察者訂閱乙個主題物件，當主題物件發生改變的時候通知所有觀察者，使他們能實現更新。具體實現方式 定義乙個被觀察物件，定義乙個主題陣列，觀察者訂閱主題通過往陣列物件內新增 函式來實現，當主題發生改變時輪流呼叫 函式。var subpub this.topics to...