從零單排系列之寫一個類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版本的寫法。今天就先寫到這裏吧。