数据双向绑定

页面衬着

• 服务端衬着

• 浏览器端衬着

浏览器端衬着

• 进步开辟效力和削减保护本钱，前后端合作形式；

  • 后端 供应接口

  • 前端 视图和交互逻辑。经由历程Ajax要求数据，拼接html字符串或许运用js模板引擎、数据驱动的框架如Vue举行页面衬着。

• 在ES6和Vue这类框架涌现之前，前端绑定数据的体式格局：

  • 动态拼接html字符串

  • js模板引擎。

    • 作用：星散 数据和视图。模板对应视图，关注怎样展现数据，在模板外头预备的数据， 关注那些数据能够被展现。

    • 事情道理 两个步骤：

      • 模板剖析 / 编译（Parse / Compile）

      • 数据衬着（Render）

  • 主流的前端模板 三种体式格局：

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

• 基于正则表达式 的 模板引擎

• 正则婚配 {{ }} 的内容，替换为模子中的数据

• es6 模板字符串

const template = data => `
            <p>name: ${data.name}</p>
            <p>age: ${data.profile.age}</p>
            <ul>
            ${data.skills.map(skill => `
                <li>${skill}</li>
            `).join('')}
        </ul>`
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…