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

本系列是一個教程，下面貼下目錄~
1.手把手教你從零寫一個簡單的 VUE
2.手把手教你從零寫一個簡單的 VUE--模板篇

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

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

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

能夠編譯簡單的模板

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本例子只做流程的說明，所以模板很簡單，只有賦值語法，如下:

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

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

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

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

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

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

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

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

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

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

下面說下重新渲染的流程：

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

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

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

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