vue訂閱者模式

本文轉載自查看原文 2019-03-18 20:54 760 vue小案例

<!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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue發布-訂閱者模式 js里的發布訂閱模式及vue里的事件訂閱實現 Vue------發布訂閱模式實現 vue中的觀察者模式和發布訂閱者模式 vue MVVM 雙向綁定(數據劫持+發布者-訂閱者模式) 14-觀察者模式和發布訂閱的區別/vue響應式是發布訂閱模式和觀察者模式 RabbitMQ——訂閱模式類型/發布與訂閱模式淺談vue響應式原理及發布訂閱模式和觀察者模式從發布訂閱模式到redux（一） RabbitMQ入門（三）訂閱模式