vue與觀察者模式

　　學習使用vue也有2個多月了，給我最直觀的感受就是無需進行dom操作。以往傳統的jq請求數據再在ssuccess回調里進行相關的數據dom綁定就此pass掉了。

傳統方式：

<script type="text/javascript">
 
   $(ajax){
        type: "get",
        url: '/getTitle',
        success: function(data){
              $('.title').innerHTML = data.title;
          //如果還有很多的數據需要綁定那么就一條一條綁定在相應的元素上
        },12       })

</script>    

 

   vue(這里引用官方文檔案例):

/* template */

<div id="app">
  {{ title}}
</div>

/* script */

var app = new Vue({
  el: '#app',
  data: {
    title: 'Hello Vue!' 
  },
  methods:{
   getdata(){
　　 this.$http.get('/getTitle').then(data=>{
　　　　this.title = data.title
　　　　})
　　}
 }
})

　　由此引出vue的template部分是如何與data部分進行響應式關聯設計的呢？？？

這就得提到今天的主要話題——觀察者設計模式也叫發布訂閱者模式

　　data里面的title可以理解為被觀察者或者說發布者，template 里面使用的title可以理解為觀察者或者訂閱者， 本文以觀察者和被觀察者為例。

使用場景

　　一對多的model→view場景。

 model里面應應定義為被觀察者，而view里面進行一處或多處依賴數據綁定即為觀察者。被觀察者應該作為一個主導位置，因此它應該具有添加、刪除觀察者方法，消息設置方法，和消息推送方法（即通知被觀察者我的消息改變了），而被觀察者應該有接收觀察者消息推送更新觀察者消息的方法。如是就有了下邊的案例：

<script type="text/javascript">
        
        Array.prototype.remove=function(val){
            var index=this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        }


        //被觀察者對象
        function Iobject(){
            this.msg=null;
        }

        Iobject.prototype={
            observorList:[],
            //添加觀察者
            add:function(o){
                this.observorList.push(o);
            },
            //刪除觀察者
            remove:function(o){
                this.observorList.remove(o);
            },
            //通知所有觀察者，調用其更新的方法
            notify:function(){
                var msg=this.msg
                this.observorList.forEach(function(i){
                    i.update(msg)
                })
            },
            //設置消息，在主體對象設置消息時，通知所有觀察者，
            setMessage:function(msg){
                this.msg=msg;
                this.notify();
            }
        }

        //觀察者對象
        function Iobservor(){
            this.msg=null;
        }

        Iobservor.prototype={
            //更新數據
            update:function(msg){
                this.msg=msg
                console.log(this.msg)
            }
        }
        
                //創建一個被觀察者 
        var obj=new Iobject();
                //創建三個觀察者
        var obs=new Iobservor();
        var obs1=new Iobservor();
        var obs2=new Iobservor();
              
        //給obj對象添加2個觀察者
        obj.add(obs1);
        obj.add(obs2);
        //當主題對象數據發生變化時，觀察者對象，立即更新數據
        obj.setMessage("hello world")
    </script>

 

第一次發帖，記錄前端學習成長歷程，新的嘗試，新的開始。