简单实现MVVM

最新推荐文章于 2023-01-17 21:57:47 发布

进阶的前端工作者

最新推荐文章于 2023-01-17 21:57:47 发布

阅读量158

点赞数

分类专栏： vue入门文章标签： vue js

本文链接：https://blog.csdn.net/weixin_45846177/article/details/107034820

版权

vue入门专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义MVVM</title>
</head>
<body>
    <div id="app">
        <p qcm-text="msg"></p>
        <p qcm-text="msg"></p>
        <h3 qcm-text="msg"></h3>
        <p qcm-text="info"></p>
    </div>
</body>

<script>

    // 记录监视DOM对象和定义DOM更新方法
    let Watcher = function(){};


    // 1、首先创建一个自定义的实例
    let Mvvm = function(objs){
        this.init(objs.el,objs.data);//初始化

    }

    // 2、初始化方法
    Mvvm.prototype.init = function(el,data){
        this.$el = document.querySelector(el);//获取外层关联dom
        this.$data = data;// 将对象数据私有化为临时变量
        this.deps(this.$data);// 对数据进行数据劫持操作

    }
    
    
    // 3、完成数据劫持操作
    Mvvm.prototype.deps = function(data){
        //需要一个监听器，定义一个watch,在上面定义一个,然后
        let watcher = new Watcher();

        //对data进行循环调用defineProperty()，并完成DOM关联
        for (const key in data) {
            // 完成当前变量和DOM的对象关系记录
            watcher.setDom(this.$el,key);
            console.log(this);
            Object.defineProperty(this,key,{
                get(){
                    return data[key];
                },
                set(newVlaue){
                    data[key] = newVlaue;
                    //更新当前变量对应的DOM
                    watcher.notify(key,newVlaue);
                }
            })
        }
        // 页面数据初始化
        watcher.update(data); 
    }
    // 设置变量对象的DOM集合，并在于监视实例对象中
    Watcher.prototype.setDom=function(rootDom,key){
        let selStr=`[qcm-text="${key}"]`;
        this[key]=rootDom.querySelectorAll(selStr);
        console.log(key,this[key]);
    }
    // 对应变量的DOM更新操作
    Watcher.prototype.notify=function(key,newValue){
        // 获取变量对应的DOM集合
        let domList=this[key];
        for(let i=0;i<domList.length;i++){
            // dom更新
            domList[i].textContent=newValue;
        }
    }

    // 统一初始化更新方法
    Watcher.prototype.update=function(data){
        for(let key in data){
            this.notify(key,data[key]);
        }
    }

    // 4、 模仿vue的写法
    let mv = new Mvvm({
        el:'#app',
        data:{
            msg:'hello',
            info:'hehe'
        }
    });

</script>
</html>

在这里插入图片描述

进阶的前端工作者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单实现MVVM

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义MVVM</title></head><body> <div id="ap
复制链接

扫一扫