vue响应性实现

最新推荐文章于 2024-08-25 09:57:22 发布

SuperLuxy

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量313

点赞数

分类专栏：个人笔记文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_45158336/article/details/122676958

版权

个人笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

html源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式实现</title>
    
</head>
<body>
    <div id="app">
        订阅试图-1:  <span class="box-1"></span>
        订阅试图-2:  <span class="box-2"></span>
    </div>
    <script src="xxx.js"></script>
    <script>
        
        let obj = {}
        dataHi({
            data:obj,
            tag:'view-1',
            datakey:'one',
            selector:'.box-1'
        })

        dataHi({
            data:obj,
            tag:'view-2',
            datakey:'two',
            selector:'.box-2'
        })

        //1.初始化赋值
        obj.one = '这个是视图1'
        obj.two = '这个是视图2'
        //2.劫持数据 更新者负责重新渲染N次



        //响应式
        //1.数据联动（双向绑定）
        //2.数据捕获到修改
    </script>
</body>
</html>

js源码

//订阅器模型
let Dep = {
    clientList:{},//容器
    //添加订阅
    listen: function(key,fn){
        // if(!this.clientList[key]){
        //     this.clientList[key] = []
        // }
        //this.clientList[key].push(fn)
        //短路表达式写法
        (this.clientList[key] || (this.clientList[key] = [])).push(fn);
    },
    //key为要添加订阅的唯一id,fn可不止一个 为附送消息
    //发布
    trigger:function(){
        let key = Array.prototype.shift.call(arguments),//类数组转换成数组 用call方法可使用数组原型方法
            fns = this.clientList[key];
        if(!fns || fns.length ===0 ){
            //如果没有该订阅者 或者是 该订阅者没有订阅内容 代码结束
            return false;
        }
        //如果有内容的话 for循环取出其中内容
        for(let i=0, fn; fn=fns[i++];){
            fn.apply(this,arguments)
            //改变this指向 目的为 张三订阅指向张三 李四订阅指向李四
        }
    }
}
//数据劫持
//data劫持的数据
//tag具体目标元素
//datakey目标元素key
//selector选择器
let dataHi = function({data,tag,datakey,selector}){
    let value = '',
        el = document.querySelector(selector);
        Object.defineProperty(data,datakey,{
            //取值
            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
        })
        console.log(el);
}

SuperLuxy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue响应性实现

html源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
复制链接

扫一扫