dom基础3 — 简易版template.js

weixin_30878501

于 2019-03-24 18:41:00 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/popeyesailorman/p/10589486.html

本文介绍了一个简单的JavaScript模板引擎实现，该引擎使用正则表达式替换占位符为实际数据，展示了如何将数据绑定到HTML模板中。

<template id="template">
    <div class="content" data-id="{{id}}">
        {{content}}
    </div>
</template>

<script type="text/javascript">
    "use strict";
    var console = window.console; 


    var htmlTpl = document.getElementById('template').innerHTML;
    var data = {
        id: '1',
        content: '我是一段文字'
    }

    function template(htmlTpl,data) {
        return htmlTpl.replace(/{{\w+}}/g,function(matchs){
            matchs = matchs.replace(/{{/g,'').replace(/}}/g,'');
            matchs = data[matchs];
            return matchs;
        });

    }
    console.log(template(htmlTpl,data));
</script>