建立minivue.js檔案
//建立乙個mvvm類
class mvvm
}
首先得判斷檢視是否存在，在檢視存在的時候，建立模板編譯器，來解析檢視
class mvvm
}}
// 建立乙個模板編譯工具
class templatecompiler
}
步驟分三步
把模板內容放進記憶體（記憶體片段）
解析模板
把記憶體的結果，放回到模板
class templatecompiler
上面定義node2fragment()方法和compile()方法下面我們來實現
class templatecompiler
}// 工具方法
iselementnode(node)
istextnode(node)
// 核心方法
node2fragment(node)
// 3. 返回
return fragment;
} compile(node)
}
因為文件片段存在於記憶體中，並不在dom樹中，所以將子元素插入到文件片段時不會引起頁面回流（對元素位置和幾何上的計算）。因此，使用文件片段通常會帶來更好的效能。
首先獲取每乙個子節點，然後遍歷每乙個節點，再判斷節點型別
下面childnode是類陣列沒有陣列方法
使用擴充套件運算子( spread )[...childnode]使其轉化為陣列便於操作
compile(parent) })}
接下來就要獲取元素的所有屬性，然後遍歷所有屬性，再判斷屬性是否是指令
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 = ,
// 更新規則物件
updater:
}}
重要的怎麼用驗證表示式
compile(parent) else if (this.istextnode(node)) \}/;
let expr = node.textcontent;
// 按照規則驗證內容
if (textreg.test(expr)) }})
}
// 解析表示式
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 ...