一个很简易的javascript模板引擎

作者: 白云飞 分类: javascript 发布时间: 2017-04-27 13:13 阅读:

忘记在哪里看到的了,在这里记录一下,供自己平时使用。一个很简单的JavaScript模板引擎,算是能提现模板引擎的原理吧。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
 
<body>
    <script type="text/tempalte" id="tmpl">
        我叫<% name %>,我<% age %>岁,我在 <% school %>上学
    </script>
    <script type="text/javascript">
        //创建对象
        var obj = {
            "name": "张三",
            "age": 18,
            "school": "蓝翔技校"
        }
        //  把上面的obj中的数据绑定到tmpl中,输出完整的一句话
        //  正则 认识<% value %>格式
        var reg = /<%\s*([^%>]\S+)\s*%>/;
 
        function tempalte(id, obj) {
            var html = document.getElementById(id).innerHTML;
             
            var _exec = null;//初始化
            while (_exec = (reg.exec(html))) {
                html = html.replace(_exec[0], obj[_exec[1]]);
            }
            return html;
        }
       document.write(tempalte('tmpl', obj))
    </script>
 
</body>
</html>

 

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。