JavaScript原生實現(xiàn)觀察者模式的示例

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 22:23:42

JavaScript原生實現(xiàn)觀察者模式的示例

JavaScript原生實現(xiàn)觀察者模式的示例:觀察者模式又叫做發(fā)布訂閱模式，它定義了一種一對多的關系，讓多個觀察者對象同時監(jiān)聽某一個主題對象，這個主題對象的狀態(tài)發(fā)生改變時就會通知所有觀察著對象。它是由兩類對象組成，主題和觀察者，主題負責發(fā)布事件，同時觀察者通過訂閱這些事件來觀察該主體

推薦度：

點擊下載本文 文檔為doc格式

導讀JavaScript原生實現(xiàn)觀察者模式的示例:觀察者模式又叫做發(fā)布訂閱模式，它定義了一種一對多的關系，讓多個觀察者對象同時監(jiān)聽某一個主題對象，這個主題對象的狀態(tài)發(fā)生改變時就會通知所有觀察著對象。它是由兩類對象組成，主題和觀察者，主題負責發(fā)布事件，同時觀察者通過訂閱這些事件來觀察該主體

觀察者模式又叫做發(fā)布訂閱模式，它定義了一種一對多的關系，讓多個觀察者對象同時監(jiān)聽某一個主題對象，這個主題對象的狀態(tài)發(fā)生改變時就會通知所有觀察著對象。它是由兩類對象組成，主題和觀察者，主題負責發(fā)布事件，同時觀察者通過訂閱這些事件來觀察該主體，發(fā)布者和訂閱者是完全解耦的，彼此不知道對方的存在，兩者僅僅共享一個自定義事件的名稱。

在Nodejs中通過EventEmitter實現(xiàn)了原生的對于這一模式的支持。

在JavaScript中事件監(jiān)聽機制就可以理解為一種觀察者模式。通過onclick進行事件綁定，然后通過交互行為進行觸發(fā)或者事件主動觸發(fā)。

下面給出一個JS自定義的PubSub，仔細閱讀下面這段代碼有助于你理解觀察者模式。

一、定義觀察者類Pubsub

/* Pubsub */
 function Pubsub(){
 //存放事件和對應的處理方法
 this.handles = {};
 }

二、實現(xiàn)事件訂閱on

//傳入事件類型type和事件處理handle
 on: function (type, handle) {
 if(!this.handles[type]){
 this.handles[type] = [];
 }
 this.handles[type].push(handle);
 }

三、實現(xiàn)事件發(fā)布emit

emit: function () {
 //通過傳入?yún)?shù)獲取事件類型
 var type = Array.prototype.shift.call(arguments);
 if(!this.handles[type]){
 return false;
 }
 for (var i = 0; i < this.handles[type].length; i++) {
 var handle = this.handles[type][i];
 //執(zhí)行事件
 handle.apply(this, arguments);
 }
 }

需要說明的是Array.prototype.shift.call(arguments)這句代碼，arguments對象是function的內置對象，可以獲取到調用該方法時傳入的實參數(shù)組。

shift方法取出數(shù)組中的第一個參數(shù)，就是type類型。

四、實現(xiàn)事件取消訂閱off

off: function (type, handle) {
 handles = this.handles[type];
 if(handles){
 if(!handle){
 handles.length = 0;//清空數(shù)組
 }else{
 for (var i = 0; i < handles.length; i++) {
 var _handle = handles[i];
 if(_handle === handle){
 handles.splice(i,1);
 }
 }
 }
 }
 }

完整代碼：

/* Pubsub */
 function Pubsub(){
 //存放事件和對應的處理方法
 this.handles = {};
 }
 Pubsub.prototype={
 //傳入事件類型type和事件處理handle
 on: function (type, handle) {
 if(!this.handles[type]){
 this.handles[type] = [];
 }
 this.handles[type].push(handle);
 },
 emit: function () {
 //通過傳入?yún)?shù)獲取事件類型
 var type = Array.prototype.shift.call(arguments);
 if(!this.handles[type]){
 return false;
 }
 for (var i = 0; i < this.handles[type].length; i++) {
 var handle = this.handles[type][i];
 //執(zhí)行事件
 handle.apply(this, arguments);
 }
 },
 off: function (type, handle) {
 handles = this.handles[type];
 if(handles){
 if(!handle){
 handles.length = 0;//清空數(shù)組
 }else{
 for (var i = 0; i < handles.length; i++) {
 var _handle = handles[i];
 if(_handle === handle){
 handles.splice(i,1);
 }
 }
 }
 }
 }
 }

五、測試

var p1 = new Pubsub();
 p1.on('mm', function (name) {
 console.log('mm: '+ name);
 });
 p1.emit('mm','哈哈哈哈');
console.log('===============');
 var p2 = new Pubsub();
 var fn = function (name) {
 console.log('mm2: '+ name);
 };
 var fn2 = function (name) {
 console.log('mm222: '+ name);
 };
 p2.on('mm2', fn);
 p2.on('mm2', fn2);
 p2.emit('mm2','哈2哈2哈2哈2');
 console.log('-------------');
p2.off('mm2', fn);
 p2.emit('mm2','哈2哈2哈2哈2');
 console.log('-------------');
p2.off('mm2');
 p2.emit('mm2','哈2哈2哈2哈2');
 console.log('-------------');

以上這篇JavaScript原生實現(xiàn)觀察者模式的示例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JavaScript原生實現(xiàn)觀察者模式的示例

推薦度：

點擊下載本文 文檔為doc格式

標簽： js 示例實例

熱門焦點

JavaScript原生實現(xiàn)觀察者模式的示例

JavaScript原生實現(xiàn)觀察者模式的示例

JavaScript原生實現(xiàn)觀察者模式的示例

最新推薦

猜你喜歡

熱門推薦