脚本宝典收集整理的这篇文章主要介绍了数据双向绑定,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
数据双向绑定
页面渲染
- @H_777_7@服务端渲染
浏览器端渲染
浏览器端渲染
-
-
在ES6和Vue这类框架出现以前,前端绑定数据的方式:
动态拼接html字符串
-
js模板引擎。
作用:分离 数据和视图。模板对应视图,关注如何展示数据,在模板外头准备的数据, 关注那些数据可以被展示。
-
工作原理 两个步骤:
模板解析 / 编译(Parse / Compile)
数据渲染(Render)
主流的前端模板 三种方式:
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过程 )
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过程 ) 发布-订阅模式
以上是脚本宝典为你收集整理的数据双向绑定全部内容,希望文章能够帮你解决数据双向绑定所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。