淺析js中mvvm模式實(shí)現(xiàn)的原理

更新時(shí)間：2018年10月06日 10:43:58 投稿：laozhang

在本篇文章中我們給大家分享了關(guān)于js中mvvm模式實(shí)現(xiàn)的原理的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們參考下。

以Vue.js框架為例子，使用的mvvm模式

view指的是頁(yè)面的html和css構(gòu)成的視圖。

model指的是從后端取到的數(shù)據(jù)模型

viewmodel 指的是前端開(kāi)發(fā)人員組織生成和維護(hù)的視圖數(shù)據(jù)層。這一層包含的是視圖行為和數(shù)據(jù)。

視圖行為指的是如頁(yè)面加載進(jìn)來(lái)時(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)聽(tīng)input事件，每次改變觸發(fā)一次div節(jié)點(diǎn)的文本子節(jié)點(diǎn)進(jìn)行修改。使用了MVVM模式則可以自動(dòng)檢測(cè)到數(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)聽(tīng)事件 觸發(fā)的時(shí)候會(huì)給obj.txt重新賦值，從而實(shí)現(xiàn)雙向綁定

 document.addEventListener('keyup',(e)=>{

  obj.txt = e.target.value;

 })

您可能感興趣的文章: