数据双向绑定

NusterCache 发布于2019-08-20 17:46 / 1173人阅读

摘要：数据双向绑定页面渲染服务端渲染浏览器端渲染浏览器端渲染提高开发效率和减少维护成本，前后端协作模式后端提供接口前端视图和交互逻辑。在和这类框架出现以前，前端绑定数据的方式动态拼接字符串模板引擎。

数据双向绑定 页面渲染

服务端渲染

浏览器端渲染

浏览器端渲染

提高开发效率和减少维护成本，前后端协作模式；

后端提供接口

前端视图和交互逻辑。通过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双向数据绑定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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