觀察者模式 又被稱為“發布-訂閱”模式，目的是解決主題對象和觀察者之間功能的耦合性。發布者和訂閱者之間是互不幹擾的，沒有聯系的，通過觀察者，當做中介，將二者聯系起來。

例子：以學生和老師之間的為例

1.首先創建觀察者對象

//將觀察者放在閉包中，當頁面加載就立即執行
var Observer = (function () {
//防止消息隊列暴露而被篡改顧將消息容器作為靜態私有變量保存
var _message = {};
return {
//註冊信息接口
regist: function () {},
//發布信息接口
fire: function () {},
// 移除信息接口
remove:function () {}
}
}) ()

2.創建學生類以及有關方法

//學生類
var Student = function(result) {
var that = this;
that.result = result;
// 學生回答問題動作
that.say = function() {
console.log(that.result);
}
}
//學生回答問題的方法
Student.prototype.answer = function(question) {
// console.log(this.result +‘‘+ question + ‘回答問題‘)
//註冊參數問題
Observer.regist(question, this.say)
}
// 學生睡覺 ，此時不能回答問題的方法
Student.prototype.sleep = function(question) {
console.log(this.result +‘‘+ question + ‘已被註銷‘)
//取消對老師問題的監聽
Observer.remove(question, this.say)
}

3.創建教師類和有關方法

//教師類
var Teacher = function () {};
//教師提問問題的方法
Teacher.prototype.ask = function (question) {
console.log(‘問題是:‘ + question);
//發布提問消息
Observer.fire(question)
}

4.創建實體類

/模擬3位聽課的學生
var student1 = new Student(‘學生1回答問題‘),
student2 = new Student(‘學生2回答問題‘),
student3 = new Student(‘學生3回答問題‘);

//3位學生監聽（訂閱）了老師提出的兩個問題
student1.answer(‘什麽是設計模式1‘);
student1.answer(‘簡述觀察者模式1‘);
student2.answer(‘什麽是設計模式2‘);
student2.answer(‘簡述設計者模式2‘);
student3.answer(‘什麽是設計模式3‘);
student3.answer(‘簡述觀察者模式3‘);

//第三位同學 因為睡著了，取消了訂閱的第二個問題
student3.sleep(‘簡述觀察者模式3‘);

//創建一個教師類
var teacher = new Teacher();
//老師 提問兩個問題
teacher.ask(‘什麽是設計模式‘);
teacher.ask(‘簡述觀察者模式‘);

js 設計模式之觀察者模式