发布：2023/2/5 17:07:27作者：管理员 来源：本站 浏览次数：604
我们常用的框架，比如Vue、Angular等，都有属于它们自己的表达式，比如{{}}，它们的数据绑定实现原理其实是利用了正则表达式。
MVC模式
M model 模型 数据
V view 视图层
C control 控制器
view。注意：这里的script标签的type属性要设置为“text/html”，这样浏览器在渲染页面时不会把script标签里面的内容渲染到页面上。
<script type="text/html" id="template">
<p>name:{{name}}</p>
<p>age:{{age}}</p>
<p>height:{{height}}</p>
</script>
model和control。这里的script标签里面就是我们常写的JS代码了。
<script type="text/javascript">
// model
var data = {
name: "splendid",
age: 21,
height: 173,
weight: 60,
hobby: "阅读"
};
// control
var mtp1 = function(tp1, data){
var tp1 = document.getElementById(tp1).innerHTML;
var exp = /\{\{(\w+)\}\}/g;
while(result = exp.exec(tp1)){
if(result[1]){
tp1 = tp1.replace(result[0], data[result[1]]);
}
}
return tp1;
};
document.getElementById("box").innerHTML = mtp1("template", data);
</script>
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4