前端MVC,JS模板替换实现原理

我们常用的框架,比如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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值