js中mvvm模式實現的原理（附程式碼）

這篇文章帶給大家的內容是關於js中mvvm模式實現的原理（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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

view#指的是頁面的html和css構成的視圖。
model指的是從後端取到的資料模型
viewmodel 指的是前端開發人員組織產生和維護的視圖資料層。這一層包含的是視圖行為和資料。
視圖行為指的是如頁面載入進來時請求什麼，將指定的資料放到指定的元素上，點擊某個元素觸發某事件。當viewmodel處理好後則會將對應的資料展現到view層。

MVVM模式的優點在於當view和viewmodel的雙向綁定，當資料改變後不需要改修改DOM結構。
例如原生js實作一個input的值綁定另一個div的文本，首先需要監聽input事件，每次改變觸發一次div節點的文本子節點進行修改。使用了MVVM模式則可以自動偵測到資料的改變從而修改div文本

mvvm的實作原理：利用Object.defineProperty()，該方法有get、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;
    }
})
//监听事件 触发的时候会给obj.txt重新赋值，从而实现双向绑定
 document.addEventListener('keyup',(e)=>{
   obj.txt = e.target.value;
 })

以上是js中mvvm模式實現的原理（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！