淺析js中mvvm模式實(shí)現(xiàn)的原理
以Vue.js框架為例子，使用的mvvm模式
view指的是頁面的html和css構(gòu)成的視圖。
model指的是從后端取到的數(shù)據(jù)模型
viewmodel 指的是前端開發(fā)人員組織生成和維護(hù)的視圖數(shù)據(jù)層。這一層包含的是視圖行為和數(shù)據(jù)。
視圖行為指的是如頁面加載進(jìn)來時(shí)請(qǐng)求什么，將指定的數(shù)據(jù)放到指定的元素上，點(diǎn)擊某個(gè)元素觸發(fā)某事件。當(dāng)viewmodel處理好后則會(huì)將對(duì)應(yīng)的數(shù)據(jù)展現(xiàn)到view層。
MVVM模式的優(yōu)點(diǎn)在于當(dāng)view和viewmodel的雙向綁定，當(dāng)數(shù)據(jù)改變后不需要改修改DOM結(jié)構(gòu)。
例如原生js實(shí)現(xiàn)一個(gè)input的值綁定另一個(gè)div的文本，首先需要監(jiān)聽input事件，每次改變觸發(fā)一次div節(jié)點(diǎn)的文本子節(jié)點(diǎn)進(jìn)行修改。使用了MVVM模式則可以自動(dòng)檢測到數(shù)據(jù)的改變從而修改div文本
mvvm的實(shí)現(xiàn)原理：利用Object.defineProperty()，該方法有g(shù)et、set兩個(gè)屬性方法，從而獲取對(duì)象屬性的值，給對(duì)象屬性重新賦值
//定義一個(gè)對(duì)象
let obj = {}
Object.defineProperty(obj,'txt'{
//obj.txt屬性賦值方法，同時(shí)為input、p文本賦同一個(gè)值
set(val){
document.getElementById('input').value = val
document.getElementById('output').innerHTML = val
},
//獲取txt屬性的方法
get(){
return obj;
}
})
//監(jiān)聽事件 觸發(fā)的時(shí)候會(huì)給obj.txt重新賦值，從而實(shí)現(xiàn)雙向綁定
document.addEventListener('keyup',(e)=>{
obj.txt = e.target.value;
})
相關(guān)文章
ECMAScript 5嚴(yán)格模式（Strict Mode）介紹
這篇文章主要介紹了ECMAScript 5嚴(yán)格模式（Strict Mode）介紹,本文講解了如何啟用嚴(yán)格模式、啟用嚴(yán)格模式后對(duì)變量和屬性、函數(shù)、with語句的影響,需要的朋友可以參考下2015-03-03
JavaScript多線程運(yùn)行庫Nexus.js詳解
這篇文章主要介紹了JavaScript多線程運(yùn)行庫Nexus.js的學(xué)習(xí)心得以及代碼分享，有需要的朋友一起參考學(xué)習(xí)下吧。2017-12-12
這篇文章主要介紹了詳解JavaScript中的blink()方法的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
這篇文章主要介紹了Javascript的this的作用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
JavaScript對(duì)象、屬性、事件手冊(cè)集合方便查詢
JavaScript對(duì)象、屬性、事件手冊(cè)查詢，對(duì)于學(xué)習(xí)js的朋友方便查找。2010-07-07
JavaScript使用過程中需要注意的地方和一些基本語法，需要的朋友可以參考下。2010-08-08
使用 Cookies 我們已經(jīng)知道，在 document 對(duì)象中有一個(gè) cookie 屬性。但是 Cookie 又是什么？2009-01-01
Javascript入門學(xué)習(xí)第八篇 js dom節(jié)點(diǎn)屬性說明
上2篇文章我們講了 用dom方式 創(chuàng)建節(jié)點(diǎn)，復(fù)制節(jié)點(diǎn)，插入節(jié)點(diǎn), 刪除節(jié)點(diǎn)，替換節(jié)點(diǎn)，查找節(jié)點(diǎn)，獲取屬性等。。。2008-07-07
這篇文章主要介紹了深入理解JavaScript中的箭頭函數(shù),文中主要針對(duì)ES6版本的JS進(jìn)行相關(guān)的講解,需要的朋友可以參考下2015-07-07
JavaScript 學(xué)習(xí)筆記二 字符串拼接
JavaScript 字符串拼接的一些知識(shí)點(diǎn)分析，對(duì)于提高效率等，都是非常值得一看的。2010-03-03