數據綁定

時間 2019-12-11

標籤數據綁定简体版

原文原文鏈接

MVC，MVP，MVVM的區別：html

MVC：Model View Controller ,全部通訊都是單向的。前端

    視圖（View）：用戶界面。
    控制器（Controller）：業務邏輯
    模型（Model）：數據保存

   1. View 傳送指令到 Controller
   2. Controller 完成業務邏輯後，要求 Model 改變狀態
   3. Model 將新的數據發送到 View，用戶獲得反饋

MVP：vue

1. 各部分之間的通訊，都是雙向的。
2. View 與 Model 不發生聯繫，都經過 Presenter 傳遞。
3. View 很是薄，不部署任何業務邏輯，稱爲"被動視圖"（Passive View），即沒有任何主動性，而 Presenter很是厚，全部邏輯都部署在那裏。

MVVM：瀏覽器

基本與MVP相似，區別是採用雙向綁定（data-binding）：View的變更，自動反映在 ViewModel，反之亦然

單向綁定和雙向綁定：性能

單向數據綁定缺點：HTML代碼一旦生成完之後，就沒有辦法再變了，若是有新的數據來了，那就必須把以前的HTML代碼去掉，再從新把新的數據和模板一塊兒整合後插入到文檔流中。spa

React能夠算做單向數據中的一種。3d

雙向數據綁定最常常的應用場景是表單，這樣當用戶在前端頁面完成輸入後，不用任何操做，就能夠拿到用戶的數據存放到數據模型中了。雙向綁定

實現雙向數據綁定的作法有大體以下幾種：code

1.發佈者-訂閱者模式（backbone.js）orm

 
   vm.set('property', value) 
  

2.髒檢查（angular.js）

原理是設置了一些條件，當你觸發了這些條件以後，它就執行一個檢測來遍歷全部的數據，對比你更改了地方，而後執行變化。

缺點是效率不高，很耗性能。

3.ES7的Object.observe()

最完美的方法，可是不少瀏覽器並不支持

4.封裝屬性訪問器/數據劫持（vue.js）

結合發佈者-訂閱者模式的方式，經過ES5的Object.defineProperty()來劫持各個屬性的setter，getter

簡單實現原理：

 
   <!DOCTYPE html> 
  
   <html> 
  
    <head> 
  
    　　<meta charset="UTF-8"> 
  
    　　<title>vue雙向數據綁定原理</title> 
  
    </head> 
  
    <body> 
  
    　　<input type="text" id="ipt" /> 
  
    　　<span id="txt"></span> 
  
    <script> 
  
    var obj = {};  
  
    Object.defineProperty(obj,'ipt',{ 
  
    　　set:function(newVal){ 
  
    　　　　document.getElementById('ipt').value = newVal;  
  
    　　　　document.getElementById('txt').innerHTML = newVal;  
  
    　　} 
  
    });  
  
    document.addEventListener('keyup',function(event){  
  
    　　obj.ipt = event.target.value;  
  
    }); 
  
    </script> 
  
    </body> 
  
   </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。