近幾年前端技術棧真是發展的太迅速了，從以前的針對dom操作的框架如jquery，ext.js等框架逐步過渡到當前的mvvm模式，讓前端開發者將注意力從dom操作逐漸解脫出來，專注於邏輯的實現，個人認為開發效率至少提公升了1倍，mvvm模式的乙個核心便是資料的雙向繫結。
雙向資料繫結
上面說的是在vue框架中資料雙向繫結的應用，個人認為這個特性很讚，是大幅提公升開發效率的關鍵，那如果脫離mvvm的框架，我也想實現這種資料的雙向繫結，可不可以實現了，該如何實現了？
為了實現這個功能我們需要用到js的乙個方法object.defineproperty
1. 屬性介紹
屬性介紹
2. 方法介紹
方法介紹
大概的介紹了defineproperty核心的兩個方法，看到這裡，你就知道可以利用這兩個內建方法搞事情了，看下面利用該方法實現資料雙向繫結的乙個例子
例子效果如下，當姓名發生變化時後面的輸入框中的值也同步發生變化：
效果圖
原生js實現資料雙向繫結
最近接觸了vue，在談到 vue等等的 mvvm 框架之前，先了解什麼是資料雙向繫結以及如何利用原生 js實現資料雙向繫結 單向資料繫結 指先把模板寫好，然後把模板和資料 資料可能來自後台 整合到一起形成html 然後把這段 html 插入到文件流裡 缺點 一旦html 生成就沒有辦法改變，如果有新...
原生JS實現雙向繫結
現在框架都可以實現雙向繫結，vue中實現雙向繫結的原理是利用object.defineproperty 定義訪問器屬性要使用object.defineproperty，接收三個引數 屬性所在的物件，屬性的名字，乙個描述符物件。doctype html en utf 8 title title hea...
js 純js模擬雙向資料繫結
是不是很多人只是知道雙向資料繫結的實現效果，並不知道其原理，或是知道其原理並不明白的，使用js模擬乙個簡單的雙向資料繫結案例吧，就會變得容易理解 vue雙向資料繫結的原理就是它了 html class box input輸入框最能體現雙向資料繫結的效果了 type text id text 輸入內容...