數據雙向綁定

NusterCache 發布于2019-08-20 17:46 / 1243人閱讀

摘要：數據雙向綁定頁面渲染服務端渲染瀏覽器端渲染瀏覽器端渲染提高開發效率和減少維護成本，前后端協作模式后端提供接口前端視圖和交互邏輯。在和這類框架出現以前，前端綁定數據的方式動態拼接字符串模板引擎。

數據雙向綁定 頁面渲染

服務端渲染

瀏覽器端渲染

瀏覽器端渲染

提高開發效率和減少維護成本，前后端協作模式；

后端提供接口

前端視圖和交互邏輯。通過Ajax請求數據，拼接html字符串或者使用js模板引擎、數據驅動的框架如Vue進行頁面渲染。

在ES6和Vue這類框架出現以前，前端綁定數據的方式：

動態拼接html字符串

js模板引擎。

作用：分離數據和視圖。模板對應視圖，關注如何展示數據，在模板外頭準備的數據，關注那些數據可以被展示。

工作原理兩個步驟：

模板解析 / 編譯（Parse / Compile）

數據渲染（Render）

主流的前端模板 三種方式：

String-based templating ( 基于字符串的parse和compile過程 )

基于正則表達式的模板引擎

正則匹配 {{ }} 的內容，替換為模型中的數據

es6 模板字符串

const template = data => `
            name: ${data.name}
            age: ${data.profile.age}
            
            ${data.skills.map(skill => `
                ${skill}
            `).join("")}
        `
const data = {
        name: "zhaomenghuan",
        profile: { age: 24 },
        skills: ["html5", "javascript", "android"]
}
document.body.innerHTML = template(data)

Dom-based templating ( 基于Dom的link或compile過程 )

遍歷dom樹，提取屬性和dom內容，將數據寫入到dom樹

function MVVM(opt) {
  this.dom = document.querySelector(opt.el);
  this.data = opt.data || {};
  this.renderDom(this.dom);
}

MVVM.prototype = {
  init: {
    sTag: "{{",
    eTag: "}}"
  },
  render: function (node) {
    var self = this;
    var sTag = self.init.sTag;
    var eTag = self.init.eTag;

    var matchs = node.textContent.split(sTag);
    if (matchs.length){
      var ret = "";
      for (var i = 0; i < matchs.length; i++) {
        var match = matchs[i].split(eTag);
        if (match.length == 1) {
            ret += matchs[i];
        } else {
            ret = self.data[match[0]];
        }
        node.textContent = ret;
      }
    }
  },
  renderDom: function(dom) {
    var self = this;

    var attrs = dom.attributes;
    var nodes = dom.childNodes;

    Array.prototype.forEach.call(attrs, function(item) {
      self.render(item);
    });

    Array.prototype.forEach.call(nodes, function(item) {
      if (item.nodeType === 1) {
        return self.renderDom(item);
      }
      self.render(item);
    });
  }
}

var app = new MVVM({
  el: "#app",
  data: {
    name: "zhaomenghuan",
    age: "24",
    color: "red"
  }
});

Living templating ( 基于字符串的parse 和基于dom的compile過程 ) 發布-訂閱模式

http://www.tuicool.com/articl...

云服務器 GPU云服務器雙向數據綁定 js雙向數據綁定 js雙向綁定數據 asp雙向數據綁定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83853.html

JavaScript數據雙向綁定的簡單演示

摘要：對于前端，有時候需要實現視圖層和數據層的雙向綁定例如當前流行的各種框架和類庫。為代表前端數據劫持。參考資料實現數據雙向綁定的三種方式談談中的雙向數據綁定非常簡單的雙向數據綁定框架三對于前端，有時候需要實現視圖層和數據層的雙向綁定(two-way-binding), 例如當前流行的各種框架和類庫:Vue.js、Angular.js、React.js。然而，他們最原始的實現方式其實都相...

snifes 2019-08-19 17:57 評論0 收藏0
Vue 雙向數據綁定原理分析

摘要：關于雙向數據綁定當我們在前端開發中采用的模式時，，指的是模型，也就是數據，，指的是視圖，也就是頁面展現的部分。參考沉思錄一數據綁定雙向數據綁定實現數據與視圖的綁定與同步，最終體現在對數據的讀寫處理過程中，也就是定義的數據函數中。關于雙向數據綁定當我們在前端開發中采用MV*的模式時，M - model，指的是模型，也就是數據，V - view，指的是視圖，也就是頁面展現的部分。通常，...

nanfeiyan 2019-08-22 10:47 評論0 收藏0
基于Object.defineProperty實現雙向數據綁定

摘要：雙向數據綁定可算是前端領域經久不衰的熱詞，不管是前端開發還是面試都會有所涉及。因此，中的挺身而出，拯救了中對數組數據處理的不足。有興趣的朋友請期待筆者的下一篇博客，討論下用實現雙向數據綁定。雙向數據綁定可算是前端領域經久不衰的熱詞，不管是前端開發還是面試都會有所涉及。而且不同的框架也想盡一切辦法去實現這一特性，比如：Knockout / Backbone --- 發布-訂閱模式Ang...

fredshare 2019-08-22 18:23 評論0 收藏0
160行代碼仿Vue實現極簡雙向綁定[詳細注釋]

摘要：兼容性更詳細的可以看一下實現思路系列的雙向綁定，關鍵步驟實現數據監聽器，用重寫數據的，值更新就在中通知訂閱者更新數據。 showImg(https://segmentfault.com/img/remote/1460000015375220?w=640&h=426); 前言現在的前端面試不管你用的什么框架，總會問你這個框架的雙向綁定機制，有的甚至要求你現場實現一個雙向綁定出來，那對于...

endiat 2019-08-22 18:15 評論0 收藏0
詳解 vue 雙向數據綁定的原理，并實現一組雙向數據綁定

1：vue 雙向數據綁定的原理： Object.defineProperty是ES5新增的一個API，其作用是給對象的屬性增加更多的控制Object.defineProperty(obj, prop, descriptor)參數 obj: 需要定義屬性的對象（目標對象）prop: 需被定義或修改的屬性名（對象上的屬性或者方法）對于setter和getter，我的理解是它們是一對勾子（hook...

Stardustsky 2019-08-23 11:40 評論0 收藏0
Vue雙向綁定原理，教你一步一步實現雙向綁定

摘要：儲存訂閱器因為屬性被監聽，這一步會執行監聽器里的方法這一步我們把也給弄了出來，到這一步我們已經實現了一個簡單的雙向綁定了，我們可以嘗試把兩者結合起來看下效果。總結本文主要是對雙向綁定原理的學習與實現。當今前端天下以 Angular、React、vue 三足鼎立的局面，你不選擇一個陣營基本上無法立足于前端，甚至是兩個或者三個陣營都要選擇，大勢所趨。所以我們要時刻保持好奇心，擁抱變化，...

Labradors 2019-08-23 12:31 評論0 收藏0