<ol id="kp1eb"><rt id="kp1eb"></rt></ol>

  1. <input id="kp1eb"></input>

    <big id="kp1eb"><dl id="kp1eb"></dl></big>

    1. <big id="kp1eb"><dl id="kp1eb"></dl></big>

      什么是MVVM?

      發布時間:2022-06-17    知識欄目:網站建設知識

      什么是MVVM?

      2008年,V8引擎隨Chrome瀏覽器橫空出世,JavaScript這門通用的WEB腳本語言的執行效率得到質的提升。V8引擎的出現,注定是JavaScript發展史上一個光輝的里程碑。它的出現,讓當時研究高性能服務器開發、長時間一籌莫展的Ryan Dahl有了新的、合適的選擇,基于JavaScript的服務端項目node.js在2009年柏林的JSConf中對外發布,node.js不僅帶來了一個高性能的服務器,還很大程度上推動了前端工程化。它的出現,讓JavaScript可堪大任,越來越多的業務邏輯在瀏覽器端實現。前端邏輯越來越重,前端架構提上日程。隨后,我們談論的主角,MVVM模式,走進了WEB前端的架構設計中。
      廣州網站建設
      概念
      MVVM模式,顧名思義即Model-View-ViewModel模式。它萌芽于2005年微軟推出的基于Windows的用戶界面框架WPF,前端最早的MVVM框架knockout在2010年發布。

      一句話總結MVVM:操作數據,就是操作視圖。
      一句話總結WEB前端MVVM:操作數據,就是操作DOM(所以無須操作DOM)。

      為什么?因為實現MVVM模式的框架會做操作DOM的事兒,前提是你聲明綁定。MVVM最標志性的特性就是數據綁定,MVVM的核心理念也是通過聲明式的數據綁定來實現View層和其他層的分離。

      MVVM模式,是一種分層架構

      Model: 域模型,用于持久化

      View: 作為視圖模板存在

      ViewModel: 作為視圖的模型,為視圖服務

      Model層
      WEB前端MVVM里的Model層,對應數據層的域模型,它主要做域模型的同步。通過Ajax/fetch等API做客戶端和服務端業務Model的同步。它用于抽象出ViewModel中視圖的Model。

      View層
      View層,作為視圖模板存在,在MVVM里,整個View是一個動態模板,展示的是ViewModel層的狀態。View不負責處理狀態,View層做數據綁定的聲明、指令的聲明。

      ViewModel層
      ViewModel層把View需要的Model層數據暴露,對View層的數據綁定聲明和指令聲明負責。聲明綁定,數據變化,自動更新View。View中通過雙向綁定的數據、View中綁定的事件也會分別通過隱式、顯示調用的修改ViewModel的數據。

      MVVM框架的工作
      網站建設知識

      通過視圖引擎為View層作為視圖模板提供保障,達成操作數據,就是操作DOM的目標。功能完善的模板引擎,為高效率開發提供保障。

      屬性變化的監聽

      通過封裝自定義數據存取器或借助Object.defineProperty()API等方式,在自定義的數據存取器內部或setter/getter數據訪問器內部通過類似發布/訂閱模式完成對數據變化的監聽、通知,是數據綁定實現的基礎。

      組件機制

      開發者希望按面向未來的組件標準Web Componets的方式開發,就需要框架提供組件的定義、繼承、生命周期、組件間通信機制。

      周邊

      應用狀態管理

      SPA路由管理

      UI組件庫



      有了前端MVVM框架,應用就可以通過數據驅動。在View層聲明綁定后,在框架提供的視圖引擎幫助下,操作數據就可以自動更新View,完成了視圖更新的自動化,可以大大提升開發效率。談到引用框架的成本,不得不安利的是百度errorrik大神出品百度MVVM框架san,保持功能強大的同時gzip后體積僅約11k!還兼顧到IE8的市場份額,保持了良好的兼容性?,F已為百度內多個產品提供了強勁驅動,如果還沒接觸過,一定值得一試。
      +相關資訊

      廣州網站建設 廣州網站設計 廣州網站開發

      工作室工作地點分布:廣州  深圳  武漢  湖南


      (c) Copyright 2008-2018 中網互聯網站建設工作室. All Rights Reserved.
      777米奇影院奇米网狠狠_渔夫床满艳史HD高清在线直播_免费无码中文字幕a级毛片_久久九九精品国产免费看小说