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

由于我但愿这是一个系列的文章，因此开始以前先简单说一下，我几乎没用过vue这个框架写过项目，因此文章中不免会有一些比较外行的说法。固然，我用过一些时间的angular，也曾经解决过一些同行们vue方面的问题。因此若是有人缘由看的话，也不用担忧我过于外行。
就像前些日子看到阮一峰老师说的话，我以为老师这里真的说出了不少技术人员的心声，这里借用一下。
“个人技术文章，主要用来整理我还不懂的知识。我只写那些我尚未彻底掌握的东西，那些我精通的东西，每每没有动力写。炫耀历来不是个人动机，好奇才是。”

言归正传，我准备了一本书，里面由浅入深地介绍了vue的用法（听人说的，我边看边写）。
先整理vue用法，而后再整理本身的框架。
最基本用法

<div id='app'>
    {{title}}
</div>

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

简单分析一下，{{}} 用来声明这是一个model，而后在js中定义这个model

由于涉及到正则以及dom树的一些解析及递归等，我先写点简单点的，否则看的人都跑了。

<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>

这段代码应该能够勉强应付上面的vue语句，固然vue确定不会是这么实现的，由于这是一次性的。明天换个es6版本的写法。今天就先写到这里吧。