前端Ajax-Day31

正则表达式：

 

 

正则用小括号包围内容可以将内容提取出来！

 

 

 

 

replace可以多次进行替换，把{{}}中的数据替换出来，就是模板引擎的思想！

 

 

 使用replace和正则循环替换对象中的值就是模板引擎的实现核心。

 

自定义模板引擎：

<!-- 需要渲染的结构 -->
    <script type="text/html" id="tpl-user">
        <div>姓名:{{name}}</div>
        <div>年龄:{{age}}</div>
        <div>性别:{{ sex}}</div>
        <div>住址:{{address }}</div>
    </script>

    <script>
        // 定义数据
        const data = { name: 'lwh', age: 18, sex: 'man', address: 'HRU' }
        // 调用模板引擎
        let str = template('tpl-user', data);
        // 渲染页面
        document.querySelector('#user-box').innerHTML = str;
    </script>

// 自定义模板引擎
function template(id, data) {
    let str = document.getElementById(id).innerHTML;
    const pattern = /{{\s*([a-zA-Z]+)\s*}}/;
    let res = null;
    while (res = pattern.exec(str)) {
        str = str.replace(res[0], data[res[1]]);
    }
    return str;
}