vue与观察者模式

　　学习使用vue也有2个多月了，给我最直观的感受就是无需进行dom操作。以往传统的jq请求数据再在ssuccess回调里进行相关的数据dom绑定就此pass掉了。

传统方式：

 1 <script type="text/javascript">
 2  
 3    $(ajax){
 4         type: "get",
 5         url: '/getTitle',
 6         success: function(data){
              $('.title').innerHTML = data.title;
 7           //如果还有很多的数据需要绑定那么就一条一条绑定在相应的元素上
 8         },12       })
13 
14 </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>

第一次发帖，记录前端学习成长历程，新的尝试，新的开始。

猜你喜欢