每当ajax成功时,我们可能会在前端渲染一些数据,如图

blob.png

每当点击修改按钮是,会发送ajax请求,后台返回一下数据,然后前端需要将这些数据反映到前端

我们将例子简化一下,只需完成这样的效果

blob.png

  1. 暴力方案:直接回去元素,设置对应的innerHTML,这种方案,直接暴力,一旦数据过多,页面中就会有充斥各种span,显得臃肿,不好维护

html:

<div>
  name: <span></span>
  phone:<span></span>
</div>

JavaScript:

var aSpan = document.getElementsByTagName('span');
var data = {
  'name':'liubeijing',
  'phone':'18774389605'
};
aSpan[0].innerHTML = data.name;
aSpan[1].innerHTML = data.phone;

代码演示地址:http://codepen.io/cococoder/pen/bBENoq


2.自定义模板替换:

html:

<div>
  name:{{name}}
  phone:{{phone}}
</div>

JavaScript:

function render(html,data){
  var pattern = /{{(.+)}}/g;
  html = html.replace(pattern,function(){
    var key = arguments[1];
    console.log(arguments,'aaaa');
    return data[key];
  });
  console.log(html);
  return html;
}
var data = {
  'name':'liubeijing',
  'phone':'18774389605'
};
var oDiv = document.getElementsByTagName('div')[0];
var html = oDiv.innerHTML;
html = render(html,data);
oDiv.innerHTML = html;
//console.log(html);

代码演示地址:http://codepen.io/cococoder/pen/vyNqPM

3.使用第三方前端模板如mustache

html:

<div>
  name:{{name}}
  phone:{{phone}}
</div>

JavaScript:

$(function(){
  var data = {
    'name':'刘北京',
    'phone':'18774389605'
  };
  var html  = $('div').html();
  html = Mustache.render(html,data);
  console.log(html);
  $('body').html(html);
});

代码演示地址:http://codepen.io/cococoder/pen/KNdjQz

4.es6模板字符串:由于是新特性,部分浏览器不支持

JavaScript:

var data = {
  name:'liubeijing',
  phone:'18774389605'
}

var templStr = `<div>
name:${data.name}
phone:${data.phone}
</div>`;
console.log(templStr,1)
var oDiv = document.getElementsByTagName('div')[0];
oDiv.innerHTML = templStr;

代码演示地址:http://codepen.io/cococoder/pen/pNgZNv?editors=1111