百度前端学院动态数据绑定(四)及搜索替换文本

如果有问题欢迎指出，另外使用了一些常用的ES6语法。

首先看一下任务

动态数据绑定(四)

这个任务没要求实现动态数据绑定，所以之前的发布-订阅模式、事件传播机制就不用考虑了，只需要考虑渲染出数据就好。

从new一个Vue，可以看出Vue是一个构造函数。根据使用Vue的经验，不需要手动bootstrap，所以new的过程应该有个启动。但是考虑到有些框架提供手动启动(angular.bootstrap)，并且这个方法是公用的，不用每个实例都创建一个，所以把初始化的方法放在原型里。

Vue接收两个参数一个是Selector另一个是数据对象，根据Vue的使用经验就是Selector是app的应用范围，其中的特定格式的({{}}中)字符串会被Vue实例中data中的数据同名属性的值替换，这就是启动的方法做的事情。所以任务分解成两个小任务，<b>一个是在dom中找到指定的格式，其实就是搜索文本和替换；</b><b>另一个是在遍历data中的属性，把这些可能需要替换的属性保存起来；</b>

---

寻找dom中指定的字符串，通过正则去匹配，使用字符串的replace方法去替换。通过textContent这个HTML DOM Element对象的属性，获得dom节点内的文本，但是这个有个问题就是设置 textContent 属性，会删除所有子节点，并被替换为包含指定字符串的一个单独的文本节点。所以要判断到了dom树的末端，才能使用，不然会破坏dom结构。所以要用到递归和判断。

说明
兼容性

---

子任务一：

//            判断是否有textContent属性
            if (!('textContent' in document)) {
                console.log('Please upgrade your browser！');
                return
            }

 //    获取app入口的dom节点
            let appEntrance = document.getElementById(el.slice(1));
            //  将入口元素内部的符合的部分转换成对应的变量
            function translate(entrance, reg, value) {
                if (entrance instanceof HTMLElement) {
                    let children = entrance.childNodes;
                    let len = entrance.childNodes.length;
                    for (let i = 0; i < len; i++) {
                        if (children[i].childNodes.length > 0) {
                            translate(children[i], reg, value)
                        } else {
                            children[i].textContent = children[i].textContent.replace(reg, value);
                        }
                    }
                } else {
                    console.log('Entrance is invalid!');
                }
            }

先在整个启动程序前判断一下有没有textContent属性，如果没有，直接退出，因为核心就是这个方法，避免后面一次次判断了。

把dom中符合格式的内容替换成指定的内容的函数被我命名为translate，接收三个参数entrance、reg、value，分别是搜索入口、用来匹配的正则、替换成的值。先判断一下入口是不是一个dom节点，凡是dom节点都继承于HTMLElement对象。使用两个局部变量来保存一下子节点和长度，不然每次调用都会在dom中查找一遍。然后判断如果有子节点则递归调用，直到末端，通过属性获得文本，通过正则替换符合格式的内容，然后再赋予属性。至此其中一个任务完成了。

---

子任务二：

            //  遍历属性去替换
            function walk(entrance, obj, name) {
                if (entrance instanceof HTMLElement) {
                    if (obj !== null && typeof obj === 'object') {
                        let reg;
                        for (let key in obj) {
                            if (obj.hasOwnProperty(key)) {
                                if (typeof obj[key] !== 'object') {
                                    reg = name ? new RegExp(`{{${name}.${key}}}`, 'g') : new RegExp(`{{${key}}}`, 'g');
                                    translate(entrance, reg, obj[key]);
                                } else {
                                    walk(entrance, obj[key], name ? `${name}.${key}` : key);
                                }
                            }
                        }
                    }
                } else {
                    console.log('Entrance is invalid!');
                }
            }

这个遍历函数接收三个参数，entrance、obj、name，其中entrance是入口的dom节点、obj是要查找属性的对象、name是父级对象的名字，因为花括号里的是对象名称加上属性，所以需要记录下祖先名称。先判断一下入口dom节点是不是合法，再判断obj是否是对象，然后对obj遍历。通过hasOwnProperty来排除继承的属性，如果属性是对象还要递归调用，对每个非对象属性使用tranlate属性来查找替换dom中的内容。``字符串中使用${}可以解析出中间变量的内容。
感觉这样实现复杂度有点高，应该有更好的方法。
求赞，求star……
源码地址：https://github.com/rennaiqian/baiduTask/blob/master/two-way-bind-4/two-way-bind-4.html