首頁 > 開發者 > JavaScript
推薦閱讀： JavaScript觀察者模式(經典)
1.什麼是觀察者模式
觀察者模式有時也稱為發布--訂閱模式，在觀察者模式中，有一個觀察者可以管理所有的目標，等到有狀態發生改變的時候發出通知。（其實sql server中的發布訂閱也是這個道理）
2.通俗解釋
假如以前村裡的廣播是一個觀察者，那麼每個村民就是被觀察對象，如果村子裡有通知，政策發生改變的時候，就需要通過廣播把這個訊息發布出去，而不用直接一家家的跑去發通知。
3.代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>觀察者模式</title> </head> <body> <script> var observer = {//觀察者 villagers: [],//村名 addVillager: function (callback) {//增加村名 this.villagers[this.villagers.length] = callback; }, removeVillager: function (callback) {//移除村名 for (var i = 0; i < this.villagers.length; i++) { if (this.villagers[i] === callback) { delete this.villagers[i]; } } }, publish: function (info) {//發布資訊 for (var i = 0; i < this.villagers.length; i++) { if (typeof this.villagers[i] === 'function') { this.villagers[i](info); } } }, make: function (o) {//這裡將村子建一個這種廣播方式 for (var i in this) { o[i] = this[i]; } } }; var village1 = {}; observer.make(village1);//將村子1建立這種觀察者模式 var villager11 = { read: function (what) { console.log('我是第一個村子的第一個村名：' + what); } }; var villager12 = { read: function (what) { console.log('我是第一個村子的第二個村名：'+what); } }; village1.addVillager(villager11.read); village1.addVillager(villager12.read); village1.publish('大家來開會呀！！！'); village1.removeVillager(villager11.read); village1.publish('大家來開會呀！！！'); /* var village2 = { myAddVillager:function(callback){ this.addVillager(callback); }, myRemoveVillager:function(callback){ this.removeVillager(callback); }, myPublish:function(info){ this.publish(info); } }; observer.make(village2);//將村子1建立這種觀察者模式 var villager21 = { read: function (what) { console.log('我是第二個村子的第一個村名：' + what); } }; var villager22 = { read: function (what) { console.log('我是第二個村子的第二個村名：'+what); } }; village2.myAddVillager(villager21.read); village2.myAddVillager(villager22.read); village2.myPublish('大家來領豬肉了！！！');*/ </script> </body> </html>
寫到這裡觀察者模式實現了，但是可能會有多個村子需要這種模式，那我們這裡將observer改造成建構函式的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>觀察者模式</title> </head> <body> <script> function Observer(){//觀察者，這裡採用建構函式，可以對不同村落進行使用 if(!(this instanceof Observer)){ return new Observer(); } this.villagers = []; }; Observer.prototype = { // villagers: [],//村名 addVillager: function (callback) {//增加村名 this.villagers[this.villagers.length] = callback; }, removeVillager: function (callback) {//移除村名 for (var i = 0; i < this.villagers.length; i++) { if (this.villagers[i] === callback) { delete this.villagers[i]; } } }, publish: function (info) {//發布資訊 for (var i = 0; i < this.villagers.length; i++) { if (typeof this.villagers[i] === 'function') { this.villagers[i](info); } } }, make: function (o) {//這裡將村子建一個這種廣播方式 for (var i in this) { o[i] = this[i]; } } } var village1 = {}; var observer1 = new Observer(); observer1.make(village1);//將村子1建立這種觀察者模式 var villager11 = { read: function (what) { console.log('我是第一個村子的第一個村名：' + what); } }; var villager12 = { read: function (what) { console.log('我是第一個村子的第二個村名：'+what); } }; village1.addVillager(villager11.read); village1.addVillager(villager12.read); village1.publish('大家來開會呀！！！'); village1.removeVillager(villager11.read); village1.publish('大家來開會呀！！！'); var village2 = { myAddVillager:function(callback){ this.addVillager(callback); }, myRemoveVillager:function(callback){ this.removeVillager(callback); }, myPublish:function(info){ this.publish(info); } }; var observer2 = new Observer(); observer2.make(village2);//將村子1建立這種觀察者模式 var villager21 = { read: function (what) { console.log('我是第二個村子的第一個村名：' + what); } }; var villager22 = { read: function (what) { console.log('我是第二個村子的第二個村名：'+what); } }; village2.myAddVillager(villager21.read); village2.myAddVillager(villager22.read); village2.myPublish('大家來領豬肉了！！！'); </script> </body> </html>
有關Javascript設計模式之觀察者模式小編就給大家介紹到這裡，希望對大家有所協助！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
