js-變數實現雙向繫結
阿新 • • 發佈：2021-07-16
單向資料繫結
指先把模板寫好，然後把模板和資料（資料可能來自後臺）整合到一起形成HTML程式碼，然後把這段HTML程式碼插入到文件流裡
缺點：一旦HTML程式碼生成就沒有辦法改變，如果有新資料重新傳入，就必須重新把模板和資料整合到一起插入到文件流中
資料雙向繫結
資料模型和檢視之間的雙向繫結，使用者在檢視上的修改會自動同步到資料模型中，同樣的，如果資料模型中的值發生變化，也會同步到檢視中去。
優點：無需進行類似單向資料繫結的那些CRUD操作。
底層實現大概有兩種：
1.手動繫結，同時使用dirty check去迴圈監聽。（代表angular js）
2.前端資料劫持，使用define Property,(代表Vue js)
以下是一個簡單的小例子，在input框裡輸入什麼，後面就會顯示什麼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" id="aa"/> <span id="bb">{{hello}}</span> <script> var obj = {}; Object.defineProperty(obj,'hello',{ set:function(val){ document.getElementById('bb').innerHTML = val; document.getElementById('aa').value = val; } }); document.getElementById('aa').onkeyup = function(e){ obj.hello = e.target.value; }; obj.hello = ""; </script> </body> </html>
本文僅提供參考，是本人閒時所寫筆記，如有錯誤，還請賜教，作者：阿蒙不萌，大家可以隨意轉載