01 前端訂閱發布者模式(自學前端需要達到什么水平才能去工作)

觀察者模式和發布-訂閱模式的區別

【1】定義

觀察者模式定義了對象間的一種一對多的依賴關系，當一個對象的狀態發生改變時，所有依賴于它的對象都將得到通知，并自動更新。觀察者模式屬于行為型模式，行為型模式關注的是對象之間的通訊，觀察者模式就是觀察者和被觀察者之間的通訊。觀察者模式有一個別名叫“發布-訂閱模式”，或者說是“訂閱-發布模式”，訂閱者和訂閱目標是聯系在一起的，當訂閱目標發生改變時，逐個通知訂閱者。

【2】案例

【3】主要解決的問題

一個對象狀態改變給其他對象通知的問題，而且要考慮到易用和低耦合，保證高度的協作。

【4】優點

【5】缺點

【1】介紹

其實24種基本的設計模式中并沒有發布-訂閱模式，上面也說了，他只是觀察者模式的一個別稱。但是經過時間的沉淀，似乎他已經強大了起來，已經獨立于觀察者模式，成為另外一種不同的設計模式。在現在的發布訂閱模式中，稱為發布者的消息發送者不會將消息直接發送給訂閱者，這意味著發布者和訂閱者不知道彼此的存在。在發布者和訂閱者之間存在第三個組件，稱為消息代理或調度中心或中間件，它維持著發布者和訂閱者之間的聯系，過濾所有發布者傳入的消息并相應地分發它們給訂閱者。

【2】案例

【3】優點

【4】缺點

【5】主要解決問題

發布-訂閱模式是前端常用的一種設計模式，現在主流的MVVM框架，都大量使用了此設計模式，其主要作用有以下兩點：

前端的事件綁定有三要素：

從表面上看:

往更深層次講:

從使用層面上講

常用的前端開發設計模式有哪些

常用的前端開發設計模式有：模塊模式，構造函數模式，工廠模式，混合模式，單例模式以及訂閱-發布模式。

前端開發設計模式

模塊模式:

在立即執行函數表達式中定義的變量和方法在外界是訪問不到的,只能通過其向外部提供的接口,"有限制"地訪問.通過函數作用域解決了屬性和方法的封裝問題.

var Person = (function(){

var name = "xin";

var age = 22;

function getName(){

return name;

}

function getAge(){

return age;

}

return {

getName: getName,

getAge: getAge

}

})();

買粉絲nsole.log(age); // 報錯:age未定義

買粉絲nsole.log(name); // 報錯:name未定義

買粉絲nsole.log(Person.age); // undefined

買粉絲nsole.log(Person.name); // undefined只能通過Person提供的接口訪問相應的變量

買粉絲nsole.log(Person.getName()); // xin

買粉絲nsole.log(Person.getAge()); // 22構造函數模式

function Person(name,age){

this.name = name;

this.age = age;

}

Person.prototype = {

買粉絲nstructor: Person;

printName: function(){

買粉絲nsole.log(this.name);

}, printAge: function(){

買粉絲nsole.log(this.age);

}

}var person = new Person('xin', 22);

person.printName(); // xin

person.printAge(); // 22混合模式

function Person(name,age){

this.name = name;

this.age = age;

};

Person.prototype.printName = function(){

買粉絲nsole.log(this.name);

}function Student(name,age){

//繼承 Person 的屬性

Person.call(this,name,age);

}function create(prototype){

function F(){ };

F.prototype = prototype;

return new F();

}

//讓Student的原型指向一個對象,該對象的原型指向了Person.prototype,通過這種方式繼承 Person 的方法

Student.prototype = create(Person.prototype);

Student.prototype.printAge = function(){

買粉絲nsole.log(this.age);

}var student = new Student('xin',22);

student.printName(); // "xin"工廠模式

function Person(name, age){

var person = new Object();

person.name = name;

person.age = age;

person.printName = function(){

買粉絲nsole.log(this.name);

};

person.printAge = function(){

買粉絲nsole.log(this.age);

}

return person;

}

var person = Person('xin',22);單例模式

var Singleton = (function (){

var instance;

function init(){

return {

};

} return {

getInstance: function(){

if(!instance){

instace = init();

} return instance;

}

};

})();發布-訂閱模式

發布-訂閱模式又叫做觀察者模式,定義了對象之間一對多的依賴關系,當一個對象的狀態發生改變時,所有依賴與它的對象都將得到通知.

發布-訂閱模式廣泛應用于異步編程之中,是一種替代回調函數的方案.多個事件處理函數可以訂閱同一個事件,當該事件發生后,與其相對應的多個事件處理函數都會運行取代對象之間硬編碼的通知機制,一個對象不用再顯示的調用另外一個對象的某個接口,降低模塊之間的耦合程度,雖然不清楚彼此的細節,但是不影響他們之間相互通信

應用

DOM事件

DOM事件是一種典型的發布-訂閱模式,對一個dom節點的一個事件進行監聽,當操作dom節點時,觸發相應的事件,響應函數執行.事件函數對dom節點完全未知,不用去理會是什么事件,如何觸發,執行就好.

自定義事件

指定發布者"發布-訂閱"這種關系用一個對象表示,鍵表示事件名,值是一個由事件處理程序組成的數組,相當于訂閱者的花名冊發布消息后,遍歷緩存列表,依次執行訂閱者的回調函數

var EventCenter = (function(){

//將所有的"發布-訂閱"關系放到events中

var events = { };

//給事件綁定事件處理程序,

function on(evt, handler){

//evt:事件名，handler:事件處理程序

events[evt] = events[evt]||[];

events[evt].push({

handler:hander

});

}

//發布消息(觸發事件),并執行相應的事件處理程序

function fire(evt,args){

//evt:事件名，args:給事件處理程序傳遞的參數

if(!events[evt]){

return;

}

//遍歷事件處理程序列表,執行其中每一個事件處理程序

for(var i=0;i<events[evt].length;i++){

events[evt][i].handler(args);

}

}

//使用模塊模式的方式,向外界提供綁定事件處理程序和觸發事件的接口

return {

on: on,

fire: fire

}

})();實際應用

var Event = (function(){

var events = { };

function on(evt, handler){

events[evt] = events[evt]||[];

events[evt].push({

handler:handler

});

} function fire(evt,args){

if(!events[evt]){

return;

}

for(var i=0;i<events[evt].length;i++){

events[evt][i].handler(args);

}

} function off(evt){

delete events[

很赞哦!（7675）