手把手写vue2.0发布者订阅模式

最新推荐文章于 2024-05-29 14:40:07 发布

世间惆怅者

最新推荐文章于 2024-05-29 14:40:07 发布

阅读量371

点赞数 1

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_44694172/article/details/122447499

版权

好多同学对响应式理解不够明确，本章代码详解响应式的源码，包括数据联动，订阅器，发布器都想详细的见解，不喜勿喷！！！谢谢大家支持

在这里插入图片描述

// 订阅器模型
    let Dep={
        // 容器
        clientlist:{},
        // 添加订阅
        listen:function(key,fn){
            if(!this.clientlist[key]){//如果没有容器为空，就给它设置默认值
                this.clientlist[key]=[];
            }
            this.clientlist[key].push(fn)
        },
        // 发布
        trigger:function(){
            let key=Array.prototype.shift.call(arguments),//类数组转换(arguments本身就是类数组)
                fns=this.clientlist[key];//获取打的容器内容
            
                if(!fns || fns.length===0){   //容器或容器内容为空直接结束
                    return false
                }
                for(let i=0,fn;fn=fns[i++];){//通过遍历吧每个信息单独存起来
                    fn.apply(this,arguments)//改变this的指向
                }
        } 
    }


// 数据劫持

let dataHijack=function({data,tag,tagkey,selector}){//data数据，tag目标值，tagkey目标的键值，selector选择的元素
    let value='',
        el=document.querySelector(selector);

        //双向数据绑定
        Object.defineProperty(data,tagkey,{   
            get:function(){
                console.log('取值')
                return value;
            },
            set:function(val){
                console.log('设置值')
                value=val
                Dep.trigger(tag,val)//调用发布
            }
        })
        // 绑定订阅(必须先订阅才能出发)
        Dep.listen(tag,function(text){
            el.innerHTML = text
        })
}

HTML

<body>
    <div>
        订阅者1：<span class="div1"></span>
        订阅者2：<span class="div2"></span>
    </div>
    <script src="index.js"></script>
    <script>
        let obj={};
        dataHijack({
            data:obj,
            tag:'view-1',
            tagkey:'one',
            selector:'.div1'
        })
        dataHijack({
            data:obj,
            tag:'view-2',
            tagkey:'two',
            selector:'.div2'
        })
        //程序首次运行： 初始化赋值()
        obj.one='视图1'
        obj.two='视图2'
        //所有劫持数据，更新者重新渲染 N次
    </script>```

世间惆怅者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
手把手写vue2.0发布者订阅模式

好多同学对响应式理解不够明确，本章代码详解响应式的源码，包括数据联动，订阅器，发布器都想详细的见解，不喜勿喷！！！谢谢大家支持JS// 订阅器模型 let Dep={ // 容器 clientlist:{}, // 添加订阅 listen:function(key,fn){ if(!this.clientlist[key]){//如果没有容器为空，就给它设置默认值 this.
复制链接

扫一扫