摘要：本系列是一個(gè)教程，下面貼下目錄手把手教你從零寫(xiě)一個(gè)簡(jiǎn)單的手把手教你從零寫(xiě)一個(gè)簡(jiǎn)單的模板篇今天給大家?guī)?lái)的是實(shí)現(xiàn)一個(gè)簡(jiǎn)單的類似一樣的前端框架，框架現(xiàn)在應(yīng)該算是非常主流的前端數(shù)據(jù)驅(qū)動(dòng)框架，今天我們來(lái)從零開(kāi)始寫(xiě)一個(gè)非常簡(jiǎn)單的框架，主要是讓大家

本系列是一個(gè)教程，下面貼下目錄~
1.手把手教你從零寫(xiě)一個(gè)簡(jiǎn)單的 VUE
2.手把手教你從零寫(xiě)一個(gè)簡(jiǎn)單的 VUE--模板篇

今天給大家?guī)?lái)的是實(shí)現(xiàn)一個(gè)簡(jiǎn)單的類似 VUE 一樣的前端框架，VUE 框架現(xiàn)在應(yīng)該算是非常主流的前端數(shù)據(jù)驅(qū)動(dòng)框架，今天我們來(lái)從零開(kāi)始寫(xiě)一個(gè)非常簡(jiǎn)單的 VUE 框架，主要是讓大家知道最核心的 vue 部分是怎么運(yùn)轉(zhuǎn)起來(lái)的。包括數(shù)據(jù)綁定，模板處理，以及頁(yè)面渲染，數(shù)據(jù)驅(qū)動(dòng)視圖等幾個(gè)部分，代碼在文章末尾給出來(lái)，下面我們開(kāi)始~

在正式動(dòng)手之前，我們先來(lái)了解下 vue 是怎么運(yùn)轉(zhuǎn)起來(lái)的，vue 從核心來(lái)說(shuō)，是一個(gè)通過(guò)數(shù)據(jù)去驅(qū)動(dòng)頁(yè)面渲染的框架，也就是說(shuō)通過(guò)改變數(shù)據(jù)的狀態(tài)，可以控制頁(yè)面中渲染的邏輯，比如展示數(shù)據(jù)，切換樣式，這些的核心都是通過(guò)對(duì)數(shù)據(jù)改變的監(jiān)聽(tīng)，從而將數(shù)據(jù)發(fā)生改變的對(duì)應(yīng)的視圖進(jìn)行更新渲染，這是整個(gè)框架的核心運(yùn)行機(jī)制。因此我們制作的簡(jiǎn)單 vue 框架，主要是圍繞著怎么監(jiān)聽(tīng)，怎么渲染，怎么更新這個(gè)流程去做的，旨在讓大家知道 vue 怎么跑起來(lái)的，其余的 vue 組件，指令，插件等內(nèi)容將在后面的文章中寫(xiě)出。

首先我們要知道我們要做一個(gè)簡(jiǎn)單數(shù)據(jù)驅(qū)動(dòng)視圖前端框架，它包括以下幾個(gè)部分:

能夠編譯簡(jiǎn)單的模板

能夠監(jiān)聽(tīng)數(shù)據(jù)變化

數(shù)據(jù)變化的時(shí)候，能夠關(guān)聯(lián)對(duì)應(yīng)的視圖并同步的更新視圖

根據(jù)上面列舉的需求，我們需要程序抽象以下幾個(gè)部分:

存儲(chǔ)數(shù)據(jù)的$data,用于保存數(shù)據(jù)，渲染視圖

與每個(gè)模板對(duì)應(yīng)的Node對(duì)象，對(duì)象包含對(duì)應(yīng)模板的渲染函數(shù)，還有渲染函數(shù)需要使用的數(shù)據(jù)集合

對(duì)數(shù)據(jù)進(jìn)行監(jiān)聽(tīng)關(guān)聯(lián)的Watcher類，用于關(guān)聯(lián)數(shù)據(jù)和對(duì)應(yīng)的模板，監(jiān)聽(tīng)數(shù)據(jù)變化

首先介紹下項(xiàng)目用的工具及框架，項(xiàng)目使用rollup進(jìn)行項(xiàng)目模塊化構(gòu)建,使用ES6進(jìn)行編碼。下面開(kāi)始正式編碼。
首先我給框架起了個(gè)簡(jiǎn)單的名字，叫QV，這個(gè)對(duì)象會(huì)暴露到全局中，進(jìn)行實(shí)例化，實(shí)例化代碼如下:

在實(shí)例化的時(shí)候傳給了對(duì)象 el、template、data等數(shù)據(jù)，其中el是模板在頁(yè)面的掛載點(diǎn)，template 是獲取模板的選擇器，分別對(duì)應(yīng)body的標(biāo)簽和script標(biāo)簽中的模板，data 是定義的數(shù)據(jù)對(duì)象。

在QV類的構(gòu)造函數(shù)中，我們會(huì)對(duì)傳入的配置進(jìn)行處理，首先我們會(huì)對(duì)數(shù)據(jù)進(jìn)行格式化，使得其在被Watcher正常監(jiān)控。格式化數(shù)據(jù)的代碼如下：

可以看到formatData方法在原來(lái)的data上面又掛載了一個(gè)_od_屬性，然后將原始數(shù)據(jù)進(jìn)行格式化，每個(gè)數(shù)據(jù)分別包含value(數(shù)據(jù)值),linkNodes(被使用的節(jié)點(diǎn)值),mounted(是否已經(jīng)被格式化過(guò))，通過(guò)對(duì)數(shù)據(jù)進(jìn)行預(yù)處理，方便后面的數(shù)據(jù)監(jiān)控綁定

模板的能力是一個(gè)前端框架的重要組成部分，vue將模板轉(zhuǎn)化為AST（抽象語(yǔ)法樹(shù)），然后去解析其中的語(yǔ)法，比如{{}}、v-for v-if等等，模板解析的總體思路如下:

將模板字符串通過(guò)正則表達(dá)式等方法進(jìn)行切割，切割點(diǎn)為模板定義的關(guān)鍵字

將切割完的字符串進(jìn)行分析，可以生成AST(抽象語(yǔ)法樹(shù))或者是直接進(jìn)行處理操作

將分析完的東西進(jìn)行字符串拼接，通過(guò)new Function生成模板函數(shù)

本例子只做流程的說(shuō)明，所以模板很簡(jiǎn)單，只有賦值語(yǔ)法，如下:

可以看到模板中只有{{}}的賦值語(yǔ)法，插入變量為a、sdf、ccc的語(yǔ)法
那么這個(gè)是怎么進(jìn)行解析的呢，代碼如下:

下面重點(diǎn)講一講這個(gè)函數(shù)，可以看到函數(shù)的開(kāi)頭定義了一個(gè)正則表達(dá)式 /{{[ ]*([wW]*?)[ ]*}}/g,用于匹配和分割用{{}}界定的變量,通過(guò) exec的運(yùn)行，匹配出來(lái)的結(jié)果如下:

可以看到a,sdf,ccc都被匹配出來(lái)了，然后通過(guò)slice進(jìn)行分割后重建，變成一段模板函數(shù)字符串,如下：

然后再通過(guò)new Function將上面的字符串變成一個(gè)函數(shù),方法如下

其中的new Function("od",$t)中的od是這個(gè)函數(shù)的參數(shù)，可以在函數(shù)中使用
最后生成的模板函數(shù)如下：

這樣子就完成了模板函數(shù)的開(kāi)發(fā)，而且還將模板用的變量進(jìn)行抽取，標(biāo)記這個(gè)模板用到了哪些變量

監(jiān)聽(tīng)器作為連接數(shù)據(jù)和視圖更新的紐帶，是vue的核心部分，vue是使用Object.defineProperty對(duì)數(shù)據(jù)進(jìn)行處理后實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽(tīng)的，本程序也是使用這個(gè)核心方法進(jìn)行數(shù)據(jù)監(jiān)聽(tīng)的，核心代碼如下：

下面我具體說(shuō)下這段代碼：
之前格式化數(shù)據(jù)的時(shí)候在原始數(shù)據(jù)里面添加了_od_字段，是用在數(shù)據(jù)監(jiān)控時(shí)候的，Object.defineProperty可以設(shè)置get set屬性，分別在對(duì)應(yīng)的數(shù)據(jù)被獲取或者被修改的時(shí)候會(huì)進(jìn)行回調(diào)，因此如果直接操作原始數(shù)據(jù)，會(huì)導(dǎo)致監(jiān)控程序發(fā)生死循環(huán)，因此通過(guò)_od_的拷貝數(shù)據(jù)進(jìn)行操作，能夠避免這種情況，可以看到get函數(shù)會(huì)直接返回_od_里面對(duì)應(yīng)屬性的value，而set函數(shù)我做了一個(gè)優(yōu)化節(jié)流，對(duì)于連續(xù)修改數(shù)據(jù)只發(fā)生一次更新，將使用到這個(gè)數(shù)據(jù)的Node對(duì)象進(jìn)行update操作

程序最核心的方法已經(jīng)開(kāi)發(fā)完成了，演示下結(jié)果，直接打開(kāi)頁(yè)面，可以看到下面的視圖

可以看到程序?qū)?shù)據(jù)a sdf ccc賦值給模板，然后替換頁(yè)面的app節(jié)點(diǎn)，渲染到頁(yè)面上
接下來(lái)我們通過(guò)實(shí)例直接修改data，
qv.$data.a = "change data a"
可以看到頁(yè)面會(huì)更新成為

下面說(shuō)下重新渲染的流程：

數(shù)據(jù)修改之后觸發(fā)了Object.defineProperty的set方法，方法檢測(cè)到設(shè)置數(shù)據(jù)與原數(shù)據(jù)不同，回去獲取linkNodes屬性，里面包含了使用這個(gè)數(shù)據(jù)的Node節(jié)點(diǎn)，然后分別調(diào)用Node節(jié)點(diǎn)的update方法

update方法被調(diào)用之后，Node會(huì)重新獲取data去生成dom元素，然后替換現(xiàn)有的模板元素，至此完成一次更新

這篇文章的例子旨在跟大家說(shuō)明Vue是怎么運(yùn)作的，希望可以幫助到大家在日常使用的時(shí)候遇到一些坑，可以從根本原理上面去找原因，當(dāng)然這個(gè)demo 離Vue還是非常不完整的，缺少了各種模板語(yǔ)法，指令，事件綁定，組件系統(tǒng)，只是把核心的流程展現(xiàn)出來(lái)，希望大家喜歡

最后附上源碼 點(diǎn)我點(diǎn)我，喜歡的話給個(gè) star 唄~~