• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

从零单排系列之写一个类vue框架(二)

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0703/5130.html 1190000019642871

昨天写了一下节点绑定model的替换,已经如何检测model 的方法
今天优化一下,勉强实现一个双向绑定
看下昨天的代码

<script>
    function Vue(obj) {
        var app = document.querySelector(obj.el);
        for(let i in obj.data) {
            this[i] = obj.data[i];
        }
 
        var html = app.childNodes;
        var that = this;
        html.forEach(function(data) {
            if(data.nodeName == '#text') {
                data.data = data.data.replace(/\{\{([\s\S]+)\}\}/g, function(a, b){return that[b]})
            }
        })
    }
</script>
<div id='app'>
    这里是{{title}}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: 'Hello World'
        }
    })
</script>

在实现双向绑定之前,先普及一个set 和 get 的知识。我说点大白话,反正也不是专业的。
一个对象的key在被赋值 value 的时候,被拦截,触发set方法,set的参数就是那个 value
但是这个赋值就会被拦截了,所以需要给一个新的key一个值。然后把value赋值到新的值上面去。如果强行给之前的key赋值,就会发生无限set 的情况。

稍微加工了一下

<script>
    function Vue(obj) {
        this.app = document.querySelector(obj.el); // 获取函数作用域
        this.data = obj.data; //获取data值
        this.getData(this.data); //设置钩子函数
        this.getWatcher(this.app.childNodes); // 获得包含Model的节点
    }

    Vue.prototype.getData = function(data) {
        for(var i in data) { // 遍历 data 里面的数据
            Object.defineProperty(this, i, { // 在this里面 设置同名key,比如,data里面有title, 那么就去设置一个this.title
                set: function(e) {
                    this.data[i] = e; // 当this.title 被设置 value 的时候,将 this.data.title = value 
                    this.digest(i);  // 更新包含这个model 的 dom
                }.bind(this),
                get: function() {
                    return this.data[i]; // 想获取this.title 的话,就去调取 this.data.title 返回
                }
            })
        }
    }

    Vue.prototype.getWatcher = function(inner) { // 这个代码昨天写过,就是去检测节点中包不包含model
        this.watcher = {};
        var that = this;
         inner.forEach(function(data) {
            if(data.nodeName == '#text') { 
                data.data = data.data.replace(/\{\{([\s\S]+)\}\}/g, function(a, b){
                data.realData = data.data; //自定义一个属性realData,把原始内容保存一下,方便复用 dom.realData = 这里是{{title}}
                 if(!that.watcher[b])
                     that.watcher[b] = [];
                 that.watcher[b].push(data); //把这个节点添加到被监听对象中去 {title:[dom]}
                 return that[b]; // 先把{{title}}替换成 helloworld
             })
            }
        })
    }


    Vue.prototype.digest = function(e) {
        var that = this;
        this.watcher[e].forEach(function(node) {
            node.data = node.realData.replace(/\{\{([\s\S]+)\}\}/g, function(a, b) {return that[b]}); // 把title那个节点改成新的数值
        })
    }
</script>
<div id='app'>
    这里是{{title}}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: 'Hello World'
        }
    })
    setTimeout(function(){app.title = 5;}, 1000)
    setTimeout(function(){app.title = 10;}, 2000)
</script>

代码有些粗劣,但是功能是实现了。
1.首先 先读取 new Vue传入对象时候,data 里面的数据, 然后对其进行遍历,给 实例化对象添加 同名属性, 这个同名属性主要就是用来被监听set,get(双向绑定实现的基本原理)。 也就是 vue.prototype.getData

2.然后呢,去递归dom树(这个以后再写,先简单就一层,不然写的内容会增多很多),然后用正则过滤出里面 {{}}类型的节点,将 这个节点的原始内容(比如{{title}}保存到这个节点的一个自定义属性里,我写的是realData),并将这个节点添加到watcher里面去。 也就是vue.prototype.watcher

3.然后呢,在同名属性被设置的时候呢,就触发钩子函数,将这个同名属性所涉及到的节点的data给更新。 也就是vue.prototype.digest

如果上面的内容没有看的太明白的话,可以参考一下代码注释。。。我下线看看怎么优化代码或者优化思路,晚上或者明天更新。我还得看看vue的文档。毕竟还在正式学习期。

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!