原理"/>
【挥舞JS】前端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">// modelvar data = {name: 'splendid',age: 22,height: 173,weight: 60,hobby: '阅读'};// controlvar 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>
更多推荐
【挥舞JS】前端MVC,JS模板替换实现原理
发布评论