原生开发前端模板引擎

开发前端模板引擎|前端开发用模板引擎吗?|网站前端开发

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发用模板引擎</title>
</head>
<body>
    <script type=”text/tempalte” id=”tmpl”>
        我叫
        <% name %>,我
            <% age %>岁,我在
                <% school %>上学
    </script>
    <script>
        //创建对象
        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>

web前端开发模板|web前端模块化开发|搭建前端开发环境搭建

» 本文来自:前端开发者 » 《原生开发前端模板引擎》
» 本文链接地址:https://www.rokub.com/3824.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!