DMQ / mvvm

剖析vue实现原理,自己动手实现mvvm
5.21k stars 1.26k forks source link

修复模版{{}}可能存在的空格问题导致解析属性跟vm.data不对应 #35

Closed jgchenu closed 5 years ago

jgchenu commented 5 years ago

亲爱的作者:你好!

感谢您为我们提供一个如此通俗易懂的案例,在按照你的文章的实践过程中,可能遇到一点不太完善的地方, 位于compile.js下第40行

compileElement: function(el) {
        var childNodes = el.childNodes,
            me = this;

        [].slice.call(childNodes).forEach(function(node) {
            var text = node.textContent;
            var reg = /\{\{(.*)\}\}/;

            if (me.isElementNode(node)) {
                me.compile(node);

            } else if (me.isTextNode(node) && reg.test(text)) {
                me.compileText(node, RegExp.$1);
            }

            if (node.childNodes && node.childNodes.length) {
                me.compileElement(node);
            }
        });
    },

建议修改为 me.compileText(node, RegExp.$1.trim());因为很多情况下,由于ide或者其他情况下

<div id="mvvm-app">
    <input type="text" v-model="someStr">
    <input type="text" v-model="child.someStr">
    <p>{{ someStr }}</p>
    <p v-html="htmlStr"></p>
    <button v-on:click="clickBtn">change model</button>
</div>

通过/\{\{(.*)\}\}/.test(text)匹配到的RegExp.$1:' somStr ',,前后带有空格,正常情况下应该为RegExp.$1:'somStr' 自己在实践过程中,如果不加过滤,会导致不能正常拿到实例的属性。

在尝试作者的mvvm.html demo也出现了这个问题,所以提出来了,第一次提pull request ,不好之处请作者大大多多担待~

DMQ commented 5 years ago

nice!