7.手写一个模版引擎，并能解释其中原理

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

模板引擎的原理

模板引擎的实现方式有很多，最简单的是“置换型”模板引擎，这类模板引擎只是将指定模板内容（字符串）中的特定标记（子字符串）替换一下便生成了最终需要的业务数据（比如网页）。

置换型模板引擎

实现简单，但其效率低下，无法满足高负载的应用需求（比如有海量访问的网站），因此还出现了“解释型”模板引擎和“编译型”模板引擎等。

 

简单实现

template.js

function template(id, data) {
    var str = document.getElementById(id).innerHTML;
    var pattern = /{{\s*([a-zA-Z]+)\s*}}/

    var pattResult = null;
    while (pattResult = pattern.exec(str)) {
        str = str.replace(pattResult[0], data[pattResult[1]]);
    }
    return str
}

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/template.js"></script>
</head>

<body>
    <div id="user-box"></div>
    <script type="text/html" id="tpl-user">
        <div>姓名：{{name}}</div>
        <div>年龄：{{ age }}</div>
        <div>性别：{{  gender}}</div>
        <div>地址：{{address  }}</div>
    </script>

    <script>
        var data = {
            name: '张三',
            age: 28,
            gender: '男',
            address: '无锡'
        };

        var htmlStr = template('tpl-user', data);

        var box = document.getElementById('user-box');
        box.innerHTML = htmlStr;
    </script>
</body>

</html>

 

posted @ 2023-03-05 10:24  不想做混子的奋斗远  阅读(69)  评论(0)    收藏  举报