小編給大家分享一下javascript實(shí)現(xiàn)數(shù)據(jù)雙向綁定的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序設(shè)計(jì)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了東區(qū)免費(fèi)建站歡迎大家使用！

前端數(shù)據(jù)的雙向綁定方法

前端的視圖層和數(shù)據(jù)層有時(shí)需要實(shí)現(xiàn)雙向綁定(two-way-binding)，例如mvvm框架，數(shù)據(jù)驅(qū)動(dòng)視圖，視圖狀態(tài)機(jī)等，研究了幾個(gè)目前主流的數(shù)據(jù)雙向綁定框架，總結(jié)了下。目前實(shí)現(xiàn)數(shù)據(jù)雙向綁定主要有以下三種。

1、手動(dòng)綁定

比較老的實(shí)現(xiàn)方式，有點(diǎn)像觀察者編程模式，主要思路是通過(guò)在數(shù)據(jù)對(duì)象上定義get和set方法(當(dāng)然還有其它方法)，調(diào)用時(shí)手動(dòng)調(diào)用get或set數(shù)據(jù)，改變數(shù)據(jù)后出發(fā)UI層的渲染操作；以視圖驅(qū)動(dòng)數(shù)據(jù)變化的場(chǎng)景主要應(yīng)用與input、select、textarea等元素，當(dāng)UI層變化時(shí)，通過(guò)監(jiān)聽(tīng)dom的change，keypress，keyup等事件來(lái)出發(fā)事件改變數(shù)據(jù)層的數(shù)據(jù)。整個(gè)過(guò)程均通過(guò)函數(shù)調(diào)用完成。