2. 程式人生 > >vue訂閱者模式

vue訂閱者模式

阿新 • • 發佈：2019-03-18
ice back function () round clas doctype set tlist 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--
            addeventlistener(‘click‘,fn)
            
            @click=fn
            $emit(‘事件名稱‘，‘事件內容‘)
        
 
-->
        
        <script type="text/javascript">
//            obj.addlistener(‘click‘,fn1)
//            obj.addlistener(‘click‘,fn2)
//            obj.addlistener(‘click‘,fn3)
//            
//            obj.emit(‘click‘,‘事件內容‘)


            var obj = {
                eventFns:{
//                    click:[fn1,fn2,fn3]
 

                },
                addListener:function(eventName,fn){
                    if(this.eventFns[eventName]){
                        this.eventFns[eventName].push(fn)
                    }else{
                        this.eventFns[eventName] = []
                        this.eventFns[eventName].push(fn)
                    }
                },
                emit:
 
function(eventName,content){
                    
                    this.eventFns[eventName].forEach(function(item){
                        item(content)
                    })
                    
                },
                removeListener:function(eventName,fn){
                    var index = this.eventFns[eventName].indexOf(fn)
                    if(index!=-1){
                        this.eventFns[eventName].splice(index,1)
                    }
                }
            }
            
            
            obj.addListener(‘click‘,function(e){
                console.log(e)
                console.log(‘這是訂閱者1‘)
            })
            
            obj.addListener(‘click‘,function(e){
                console.log(e)
                console.log(‘這是訂閱者2‘)
            })
            
            var fn1 = function(){
                console.log(‘這是訂閱者3‘)
            }
            
            obj.addListener(‘click‘,fn1)    
            
            obj.removeListener(‘click‘,fn1)
            
            obj.emit(‘click‘,{
                eventname:‘click‘,
                timestamp:new Date()
            })
            
            
            document.querySelector(‘body‘).removeEventListener(‘事件名稱‘,fn1)
        </script>
    </body>
</html>

vue訂閱者模式

相關推薦

vue訂閱者模式

ice back function () round clas doctype set tlist <!DOCTYPE html> <html> <head> <meta charset="UTF-

Vue 非父子關係的傳值 bus 訂閱者模式

1：通過建立Bus 的特性來訂閱 Vue.prototype.bus=new Vue() 2： 必須要儲存當前的作用域 var this_=this <!DOCTYPE html> <html lang="en"> <head>

經典的發布訂閱者模式

cti rar 經典 pro ++ return pub callback self. function Pubsub() { this.handlers = {};}Pubsub.prototype = { on: function (eventType, h

CRM中間件裏的發布-訂閱者模式

文章 pos 列表 mes mark AC 目的 view replicat 從事務碼SMW01裏能觀察到一個BDOC可能被發送往不止一個目的site去，比如下圖所示的5個site都會收到該site，而高亮顯示的SMOF_ERPSITE代表ERP系統QI3的client 5

EventBus事件總線框架（發布者/訂閱者模式，觀察者模式）

編譯 exe 組件間通信 之間 對象 int instance vol 高效率 一、 android應用內消息傳遞的方式： 1. handler方式-----------------不同線程間傳遞消息。 2. Interface接口回調方式-------任意兩個對象。 3.

RabbitMQ-訂閱者模式

訂閱模式 模型   一個生產者有多個消費者，每個消費者都有自己的訊息佇列，生產者的訊息都沒有直接傳給訊息佇列，而是先給交換機，就是X(exchange),每個訊息佇列都繫結到交換機上，生產者傳送資訊顯示經過交換機，這樣就達到了一個訊息能被多個消費者消費。

C#使用委託和事件實現釋出訂閱者模式

事件是C#中的高階概念，和js中的滑鼠點選$("tag").click，懸停$("tag").hover或css元素樣式的改變（onChanged）等事件，當事件觸發才執行我們所委託的方法。 步驟： 1、建立一個委託； 2、將建立的委託與特定事件關聯； 3、編寫C#事件處理程式； 4、利用編

釋出訂閱者模式、觀察者模式總結

/** * 觀察者模式定義：Subject維持一系列它的物件Observer,當有關狀態發生變更時Subject物件則會通知一系列Observer物件進行更新。 * 在Subject物件添加了一系列Observer物件之後，Subject維持一系列Observer物件，

activemq釋出訂閱者模式createTopic

一個釋出者，多個訂閱者 1.釋出者JMSProducer package com.java1234.activemq2; import javax.jms.Connection; import javax.jms.ConnectionFactory; import javax.jms

原生js實現觀察者和訂閱者模式

觀察者模式也叫 釋出者-訂閱者模式，釋出者釋出事件，訂閱者監聽事件並做出反應 在傳統的前端解耦方面，觀察者模式作為比較常見一種設計模式，大量使用在各種框架類庫的設計當中。 核心程式碼： //

釋出訂閱者模式 JavaScript版

function Subscriber() { this.subs = []; } Subscriber.prototype.subscribe = function (sub) { console.log("add sub"); if(this.subs.indexOf(s

釋出者訂閱者模式（一）

自己畫了個圖 demo是用了兩個場景來描述的，一個是找工作（查的資料），一個是購物，仿照寫的，為了加深理解，根據名字可以知道訂閱者和釋出者，然後實體類分別取實現這兩個介面類，來看訂閱者 package com.fanyafeng.obser; /** * Create

RabbitMQ (五) : 訂閱者模式之分發模式 ( fanout )

class 是把 end con als connect 註冊事件 () inf 前面講到了簡單隊列和工作隊列. 這兩種隊列有個非常明顯的缺點 : 生產者發送的消息,只能進入到一個隊列. 消息只能進入到一個隊列就意味著消息只能被一個消費者消費. 盡管工作隊列模式中,一個隊列

RabbitMQ (六) : 訂閱者模式之路由模式 ( direct )

efault rect 事件 .get 我們 兩個 create 發送消息 hello 路由模式下,生產者發送消息時需要指定一個路由鍵(routingKey),交換機只會把消息轉發給包含該路由鍵的隊列 這裏,我們改變一下聲明交換機的方式. 我們通過管理後臺添加一個交換機

RabbitMQ (七) : 訂閱者模式之主體模式 ( topic )

client 生產 精確 enc connect 技術分享 包含 get hang 主體模式和路由模式很像 路由模式是精確匹配 主體模式是模糊匹配 依然先通過管理後臺添加一個交換機. 生產者 public class Producer {

PHP設計模式－觀察者模式（訂閱者模式）

相信大家都用過QQ（沒用過QQ的大叔不要扔我），而且大家都很討厭QQ的小彈窗，不時地就會跳出一個小視窗，真心煩人。那麼如果我們是騰訊訊息推送的服務端開發人員。如果要用PHP來實現這種訊息傳送那麼如果做到呢？     方案一。被動推送方式 我們採用推的方式來接收訊息。也說說

C++釋出訂閱者模式demo

#ifndef _OBSERVER_H_ #define _OBSERVER_H_ #include <map> #include <mutex> using namespace std; class Msg

JS 設計模式八 -- 發布訂閱者模式

ret 實現 耦合 通知 this ray [] strong pro 概念 發布---訂閱模式又叫觀察者模式，它定義了對象間的一種一對多（一個發布，多個觀察）的關系，讓多個觀察者對象同時監聽某一個主題對象，當一個對象發生改變時，所有依賴於它的對象都將得到通知。

vue非父子元件間的傳值 Bus/匯流排機制/釋出訂閱模式/觀察者模式

Bus/匯流排機制/釋出訂閱模式/觀察者模式 我們需要將一個元件的子元件的資料傳遞給另一個元件的子元件 ① 將Vue的例項賦值給Vue.prototype.bus，這樣只要我們之後呼叫new Vue()或者建立元件的時候，每一個元件上都會有Bus這個屬性，因為每一個元件或者Vue這個例項

C#設計模式--觀察者模式（發布-訂閱模式）

工廠方法 設計 解決 line strac itl names spa ret 0.C#設計模式--簡單工廠模式 1.C#設計模式--工廠方法模式 2.C#設計模式--抽象工廠模式 3.C#設計模式--單例模式 4.C#設計模式--建造者模式 5.C#設計模式--