理解觀察者模式

簡(jiǎn)單的講，一個(gè)對(duì)象作為特定任務(wù)或是另一對(duì)象的活動(dòng)的觀察者，并且在這個(gè)任務(wù)或活動(dòng)發(fā)生時(shí)，利用事件的形式通知觀察者。

觀察者的使用場(chǎng)合

當(dāng)一個(gè)對(duì)象的改變需要同時(shí)改變其它對(duì)象，并且它不知道具體有多少對(duì)象需要改變的時(shí)候，就應(yīng)該考慮使用觀察者模式。

例如，用戶(hù)A，B，C分別訂閱某服務(wù)，當(dāng)服務(wù)有更新是可設(shè)定更新、下載等操作。

模擬實(shí)現(xiàn)

定義Observable對(duì)象，其內(nèi)部包含了2個(gè)方法：add（訂閱）與fire（發(fā)布）方法

// 觀察者 var Observable = {callbacks: [],add: function(fn) {this.callbacks.push(fn);},fire: function() {this.callbacks.forEach(function(fn) {fn();})} }

訂閱

1 Observable.add(function() { 2 console.log(1); 3 }) 4 Observable.add(function() { 5 console.log(2); 6 })

發(fā)布

Observable.fire(); // 1, 2

實(shí)際應(yīng)用

實(shí)際業(yè)務(wù)中，如請(qǐng)求某個(gè)ajax后需要執(zhí)行多個(gè)方法，數(shù)據(jù)處理、渲染頁(yè)面、其他業(yè)務(wù)等，可以使用觀察者

1 Observable.add(function() { 2 //pocessData 3 }) 4 5 Observable.add(function() { 6 $('test').html(data.a) 7 $('test2').html(data.b) 8 $('test3').html(data.c) 9 }) 10 11 Observable.add(function() { 12 //pocessOther 13 }) 14 15 $.ajax({ 16 url: "test.html", 17 context: document.body 18 }).done(function(data) { 19 Observable.fire(data) 20 })

?

轉(zhuǎn)載于:https://www.cnblogs.com/huair_12/p/4175549.html

總結(jié)

以上是生活随笔為你收集整理的（四）JS学习笔记 - 模式 - 观察者模式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。