觀察者模式
觀察者模式(Observer)完美的將觀察者和被觀察的對象分離開蝗罗。舉個例子,用戶界面可以作為一個觀察者,業(yè)務數據是被觀察者裁蚁,用戶界面觀察業(yè)務數據的變化矢渊,發(fā)現數據變化后,就顯示在界面上枉证。面向對象設計的一個原則是:系統(tǒng)中的每個類將重點放在某一個功能上矮男,而不是其他方面。一個對象只做一件事情室谚,并且將他做好毡鉴。觀察者模式在模塊之間劃定了清晰的界限,提高了應用程序的可維護性和重用性秒赤。
觀察者設計模式定義了對象間的一種一對多的依賴關系眨补,以便一個對象的狀態(tài)發(fā)生變化時,所有依賴于它的對象都得到通知并自動刷新倒脓。
模式作用:
- 支持簡單的廣播通信,自動通知所有已經訂閱過的對象
- 頁面載入后目標對象很容易與觀察者存在一種動態(tài)關聯(lián),增加了靈活性
- 目標對象與觀察者之間的抽象耦合關系能夠單獨擴展以及重用
注意事項:
- 監(jiān)聽要在觸發(fā)之前
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>觀察者模式</title>
<script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</head>
<body>
<script>
~(function(){
var o=$({});
$.jianting=function(){
o.on.apply(o,arguments)
}
$.fabu=function(){
o.trigger.apply(o,arguments)
}
$.qingchu=function(){
o.off.apply(o,arguments)
}
})()
$.jianting('myEvent',function(e,a,b,c){
alert(a+"||"+b+'||'+c);
})
setTimeout(function(){
$.fabu('myEvent',[1,2,3])
},1000)
</script>
</body>
</html>