数据双向绑定
页面渲染
服务端渲染
浏览器端渲染
浏览器端渲染
-
提高开发效率和减少维护成本，前后端协作模式；
后端 提供接口
前端 视图和交互逻辑。通过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过程 ) 发布-订阅模式