前端MVC使用JS模板替换实体实现原理

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/2/14 1:20:51 共计：3621 浏览

我们常用的框架，比如Vue、Angular等，都有属于它们自己的表达式，比如{{}}，它们的数据绑定实现原理其实是利用了正则表达式。

MVC模式

M model 模型数据

V view 视图层

C control 控制器

view。注意：这里的script标签的type属性要设置为“text/html”，这样浏览器在渲染页面时不会把script标签里面的内容渲染到页面上。

<p>height:{{height}}</p>

</script>

model和control。这里的script标签里面就是我们常写的JS代码了。

// 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>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。