专栏首页张培跃最易理解的VUE双向绑定原理不足70行代码搞定,逐行注释!

最易理解的VUE双向绑定原理不足70行代码搞定,逐行注释!

VUE双向绑定原理是前端小伙伴很难绕过的一道面试题!本篇文章对其原理进行了最大程度的精简,希望对面试VUE开发的前端小伙伴有所帮助!我在这里将指令 v-改为z-,主要完成z-model、z-click、z-text以及z-html四个提令。

为了能够快速读懂代码,首先要先弄明白以下三个概念:

1、观察者(observer):也就是数据监听器,负责数据对象的所有属性进行监听劫持,并将消息发送给订阅者进行数据更新
2、订阅者(watcher):负责接收数据的变化,更新视图(view),数据与订阅者是一对多的关系。
3、解析器(compile):负责对你的每个节点元素指令进行扫描和解析,负责相关指令的数据初始化及创造订阅者

实现效果如下:

html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/zhang.js"></script>
</head>
<body>
    <div id="myApp">
        <input type="button" value="加个!" z-on:click="fn">
        <input type="text" style="width:400px" z-model="site">
        <div z-text="site"></div>
        <div z-html="site"></div>
    </div>
</body>
<script>
    var vm = new Zhang({
        el: "#myApp",
        data: {
            site: "<a href='http://www.zhangpeiyue.com'>zhangpeiyue</a>"
        },
        methods: {
            fn() {
                this.site += "!";
            }
        }
    })
</script>
</html>
zhang.js完整代码如下,不足70行:
function Zhang(options){// 创建构造函数Zhang,并接收对象结构体options
    this.$el=document.querySelector(options.el);// 指定挂载元素
    this.$data=options.data;// 存放你的数据内容
    this.$methods=options.methods;// 存放设你的方法
    this.binding={};// 所有数据相关的订阅者对象都存放于此。最终结构为{数据属性:[订阅者对象,订阅者对象……]}
    this.observer();// 调用观察者,对数据进行劫持
    this.compile(this.$el);// 对元素指令进行解析,订阅者也是在此处创建的
}
Zhang.prototype.observer=function(){// 观察者
    var value="";// 定义用于存放数据属性值的变量value
    for(var key in this.$data){ // 遍历数据对象
        value=this.$data[key];// 对象属性值
        this.binding[key]=[];// 数据订阅者初始化,是一个数组,
        var binding=this.binding[key];// 用于存放本数据相关的所有订阅者,初始为[]
        Object.defineProperty(this.$data,key,{// 开始设置劫持
            get(){
                return value;// 读取值为value
            },
            set(v){// v为设置的值
                if(v!==value){// 当设置的值与当前值不相等时
                    value=v;// 将读取值更新为v
                    binding.forEach(watcher=>{
                        watcher.update();// 通知与本数据相关的订阅者们进行视图更新
                    })
                }
            }
        })
    }
}
Zhang.prototype.compile=function(el){// 解析器
    var nodes=el.children;// 获得所有子节点
    for(var i=0;i<nodes.length;i++){// 对子节点进行遍历
        var node=nodes[i];// 具体节点
        if(node.children.length>0)// 判断是否具有子节点
            this.compile(node);// 如果有子点进行递归操作
        if(node.hasAttribute("z-on:click")){// 该节点是否拥有z-on指令
            var attrVal=node.getAttribute("z-on:click");// 得到指令对应的方法名
            // 为元素绑定click事件,事件方法为$methods下的方法,并将其this指向this.$data
            node.addEventListener("click",this.$methods[attrVal].bind(this.$data))
        }
        if(node.hasAttribute("z-model")){// 该节点是否拥有z-model指令
            var attrVal=node.getAttribute("z-model");// 获得指令对应的数据属性
            node.addEventListener("input",((i)=>{// 为指令添加input事件
                this.binding[attrVal].push(new Watcher(node,"value",this,attrVal));// 为该数据添加订阅者
                return ()=>{
                    this.$data[attrVal]=nodes[i].value;// 更新$data的属性值,会在观察者中进行劫持
                }
            })(i))
        }
        if(node.hasAttribute("z-html")){// 该节点是否拥有z-html指令
            var attrVal=node.getAttribute("z-html");// 获得指令对应的数据属性
            this.binding[attrVal].push(new Watcher(node,"innerHTML",this,attrVal));
        }
        if(node.hasAttribute("z-text")){// 该节点是否拥有z-text指令
            var attrVal=node.getAttribute("z-text");// 获得指令对应的数据属性
            this.binding[attrVal].push(new Watcher(node,"innerText",this,attrVal));
        }
    }
}
function Watcher(el,attr,vm,val){// 观察者
    this.el=el;     // 指令所在的元素
    this.attr=attr;// 绑定的属性名
    this.vm=vm;    // 指令所在实例
    this.val=val;  // 指令的值
    this.update(); // 更新视图view
}
Watcher.prototype.update=function(){
    this.el[this.attr]=this.vm.$data[this.val];
}

本文分享自微信公众号 - 张培跃(zhangpeiyue8),作者:张培跃

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-01-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • es6中class类的全方面理解(二)------继承

    继承是面向对象中一个比较核心的概念。ES6 class的继承与java的继承大同小异,如果学过java的小伙伴应该很容易理解,都是通过extends关键字继承。...

    用户1272076
  • React如何处理事件

    以上示例在点击链接时,会报错:Uncaught TypeError: Cannot read property 'setState' of undefined。...

    用户1272076
  • web前端工程师眼中的母亲节

    很多人的眼中都认为程序员很闷骚,很无聊。其实在我们程序员眼中不仅仅只有代码,还有爱,因为我们也是一个正常的人! 我们在代码中也可以彰显对父母的爱:

    用户1272076
  • element表单校验问题

    新增时,校验为空未通过,点击取消按钮。重新打开编辑,明明有值,显示校验未通过。

    崔笑颜
  • Javascript中关键参数this浅析

    Sb_Coco
  • 《你不知道的JavaScript》:js委托设计的真实案例与总结

    实际需求,web开发中有一个典型的前端场景,创建UI控件(按钮、下拉列表等)。用jq的选择器来简化选择过程,与实现思路不冲突。

    前端_AWhile
  • 深入浅出JavaScript之this

    JavaScript中的this比较灵活,根据在不同环境下,或者同一个函数在不同方式调用下,this都有可能是不同的。但是有一个总的原则,那就是this指的是,...

    哲洛不闹
  • 社区开源框架网络模块:ConnectionManager详解

    地址:https://github.com/Golangltd/LollipopCreator

    李海彬
  • ActiveMQ源码分析——生产消息

    创建Session时,第一个传入是否开启事务,第二个传入session提交消费消息的方式 接下来看源码处理,生产者id对象由当前sessionID加上使用内部s...

    歪歪梯
  • ActiveMQ源码分析——消费消息

    请先查看上一篇分析生产消息源码的博客之后再查看本篇 先看看本博客把consumer端分析后完整的activemq流程图

    歪歪梯

扫码关注云+社区

领取腾讯云代金券