簡單實現迷你Vue框架

建立minivue.js檔案

//建立乙個mvvm類
class mvvm 
}

mvvm類的作用: 解析檢視模板，把對應的資料，渲染到檢視

首先得判斷檢視是否存在，在檢視存在的時候，建立模板編譯器，來解析檢視

class mvvm 
}}

// 建立乙個模板編譯工具
class templatecompiler 
}

當快取好重要的屬性後，就要解析模板了

步驟分三步

把模板內容放進記憶體（記憶體片段）

解析模板

把記憶體的結果，放回到模板

class templatecompiler

上面定義node2fragment()方法和compile()方法下面我們來實現

class templatecompiler 
}// 工具方法
iselementnode(node) 
istextnode(node) 
// 核心方法
node2fragment(node) 
// 3. 返回
return fragment;
}  compile(node) 
}

documentfragments 是dom節點。它們不是主dom樹的一部分。通常的用例是建立文件片段，將元素附加到文件片段，然後將文件片段附加到dom樹。在dom樹中，文件片段被其所有的子元素所代替。

因為文件片段存在於記憶體中，並不在dom樹中，所以將子元素插入到文件片段時不會引起頁面回流（對元素位置和幾何上的計算）。因此，使用文件片段通常會帶來更好的效能。

首先獲取每乙個子節點，然後遍歷每乙個節點，再判斷節點型別

下面childnode是類陣列沒有陣列方法

使用擴充套件運算子( spread )[...childnode]使其轉化為陣列便於操作

compile(parent) })}

下面來實現compileelement()方法當前呼叫傳過來的是元素節點

接下來就要獲取元素的所有屬性，然後遍歷所有屬性，再判斷屬性是否是指令

v-text是vue的指令，像ng-***指令是不進行收集的

compileelement(node) })}

compilerutils = ,
// 更新規則物件
updater: 
}}

isdirective(attrname)

// 建立乙個模板編譯工具
class templatecompiler 
// 工具方法
iselementnode(node) 
istextnode(node) 
isdirective(attrname) 
// 核心方法
node2fragment(node) 
// 3. 返回
return fragment;
}  compile(parent) 
})}  // 解析元素節點的指令
compileelement(node) 
})}  // 解析表示式
compiletext() 
}compilerutils = ,
// 更新規則物件
updater: 
}}

修改如下**

compileelement(node) })}

在compilerutils類新增實現

compilerutils = ,
// 更新規則物件
updater: 
}}

實現（v-html）就由讀者自行新增對應的方法，形式和（v-model）差不多

重要的怎麼用驗證表示式

compile(parent)  else if (this.istextnode(node)) \}/;
let expr = node.textcontent;
// 按照規則驗證內容
if (textreg.test(expr)) }})
}

下面來實現文字解析器，通過分析（v-text）和表示式解析差不多

// 解析表示式
compiletext(node, expr)

完整實現**

// 建立乙個模板編譯工具
class templatecompiler 
// 工具方法
iselementnode(node) 
istextnode(node) 
isdirective(attrname) 
// 核心方法
node2fragment(node) 
// 3. 返回
return fragment;
}  compile(parent)  else if (this.istextnode(node)) \}/;
let expr = node.textcontent;
// 按照規則驗證內容
if (textreg.test(expr)) }})
}  // 解析元素節點的指令
compileelement(node) 
})}  // 解析表示式
compiletext(node, expr) 
}compilerutils = ,
// 解析model指令
model(node, vm, expr) ,
// 更新規則物件
updater: ,
// 輸入框更新方法
modelupdater(node, value) 
}}

後續內容更精彩

迷你測評框架

驗證演算法是否正確評估演算法執行用時比較輸出和正確答案間區別能通過快取檔案獲得輸出檔案，然後利用vscode的檔案比較功能兩個版本mac linux win10，都通過測試程式的輸入 in 檔案程式的正確輸出 out 檔案測評檔案本文提供將輸入輸出檔案放在同乙個目錄下，且同一組資...

實現簡單購物車 vue框架

剛剛接觸vue框架不久，vue用起來確實很方便，省去了許多重複的操作，但是一開始使用vue框架確實不習慣，因為vue主要是通過改變資料來進行操作，轉變思維方式很重要！這是我第一次嘗試使用vue實現基本的購物車邏輯，主要包括新增減少單個商品刪除已選商品刪除單選全選操作。如有錯誤，還請指正，萬...

Vue 實現mvvm框架

observe obj 訂閱 key 資料 if this.binding key let binding this.binding key 重寫getter,setter object.defineproperty obj,key,set newval proxydata data,vm set ...

簡單實現迷你Vue框架

迷你測評框架

實現簡單購物車 vue框架

Vue 實現mvvm框架

相關推薦