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

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

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

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

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

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

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

視圖行為指的是如頁面加載進來時請求什么，將指定的數(shù)據(jù)放到指定的元素上，點擊某個元素觸發(fā)某事件。當viewmodel處理好后則會將對應的數(shù)據(jù)展現(xiàn)到view層。

MVVM模式的優(yōu)點在于當view和viewmodel的雙向綁定，當數(shù)據(jù)改變后不需要改修改DOM結(jié)構(gòu)。

例如原生js實現(xiàn)一個input的值綁定另一個div的文本，首先需要監(jiān)聽input事件，每次改變觸發(fā)一次div節(jié)點的文本子節(jié)點進行修改。使用了MVVM模式則可以自動檢測到數(shù)據(jù)的改變從而修改div文本

mvvm的實現(xiàn)原理：利用Object.defineProperty()，該方法有g(shù)et、set兩個屬性方法，從而獲取對象屬性的值，給對象屬性重新賦值

//定義一個對象

let obj = {}

Object.defineProperty(obj,'txt'{

  //obj.txt屬性賦值方法，同時為input、p文本賦同一個值

  set(val){

    document.getElementById('input').value = val

    document.getElementById('output').innerHTML = val

  },

  //獲取txt屬性的方法

  get(){

    return obj;

  }

})

//監(jiān)聽事件 觸發(fā)的時候會給obj.txt重新賦值，從而實現(xiàn)雙向綁定

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

  obj.txt = e.target.value;

 })

您可能感興趣的文章: