數(shù)據(jù)雙向綁定

wujl596 發(fā)布于2019-08-01 17:05 / 1184人閱讀

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

數(shù)據(jù)雙向綁定 頁面渲染

服務端渲染

瀏覽器端渲染

瀏覽器端渲染

提高開發(fā)效率和減少維護成本，前后端協(xié)作模式；

后端提供接口

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

在ES6和Vue這類框架出現(xiàn)以前，前端綁定數(shù)據(jù)的方式：

動態(tài)拼接html字符串

js模板引擎。

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

工作原理兩個步驟：

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

數(shù)據(jù)渲染（Render）

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

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

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

正則匹配 {{ }} 的內容，替換為模型中的數(shù)據(jù)

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內容，將數(shù)據(jù)寫入到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過程 ) 發(fā)布-訂閱模式

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

GPU云服務器云服務器雙向數(shù)據(jù)綁定 js雙向數(shù)據(jù)綁定 js雙向綁定數(shù)據(jù) asp雙向數(shù)據(jù)綁定

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

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

JavaScript數(shù)據(jù)雙向綁定的簡單演示

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

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

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

nanfeiyan 2019-08-22 10:47 評論0 收藏0
基于Object.defineProperty實現(xiàn)雙向數(shù)據(jù)綁定

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

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

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

endiat 2019-08-22 18:15 評論0 收藏0
詳解 vue 雙向數(shù)據(jù)綁定的原理，并實現(xiàn)一組雙向數(shù)據(jù)綁定

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

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

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

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