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

最新推荐文章于 2024-05-23 09:18:11 发布

原创最新推荐文章于 2024-05-23 09:18:11 发布 · 置顶 · 966 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JS #mvc

本文介绍了MV*框架中数据绑定的基本实现原理，通过使用正则表达式来解析模板中的占位符，并替换为实际数据。以Vue和Angular为例，展示了如何通过简单的JavaScript代码实现这一过程。

我们常用的框架，比如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>