template模板引擎的原理,并手动封装

1,核心原理

利用正则表达式对字符进行替换;
正则替换方法:https://blog.csdn.net/weixin_44134588/article/details/108327043
封装的模板引擎函数:

function template(id, data) {
     
    let str = document.getElementById('tpl-user').innerHTML;
    console.log(str);
    let pattern = /{
     {
     \s*([a-zA-Z]+)\s*}}/ //匹配{
     {包裹的空格和字母}}
    var patternResult = null;
    while (patternResult = pattern.exec(str)) {
      //如果有匹配到的字符串,则进行替换
        // patternResult[1] 为匹配到的组
        // data[patternResult[1]] 为数据中的对应值  
        str = str.replace(patternResult[0], data[patternResult[1]])
        console.log(patternResult);
        console.log(data[patternResult[1]]);
    }
    return str;
}

测试:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./01-mytemplate.js"></script>  //1,导入
</head>

<body>
    <div id="user-box"></div>
    <script type="text/html" id="tpl-user"> // 3,定义模板
        <div>姓名: {
     {
     name }}</div>
        <div>性别: {
     {
      sex}}</div>
        <div>年龄: {
     {
     age}}</div>
    </script>
    <script>
        data = {
       // 2,定义数据
            name: '李四',
            sex: '男',
            age: 21
        }
        var htmlStr = template('#tpl-user', data); // 4,进行函数调用
        document.querySelector('#user-box').innerHTML = htmlStr; // 5,进行渲染
    </script>
</body>

</html>

结果正常:
template模板引擎的原理,并手动封装_第1张图片

2,what?

模板引擎,顾名思义,它可以根据程序员指定的模板结构和数据,自动生成一个完整的HTML页面。

3,好处

利用模板引擎的好处
① 减少了字符串的拼接操作
② 使代码结构更清晰
③ 使代码更易于阅读与维护

4,使用步骤

基本使用步骤:
① 导入 art-template
② 定义数据
③ 定义模板
④ 调用 template 函数
⑤ 渲染HTML结构

安装:
在浏览器中访问 http://aui.github.io/art-template/zh-cn/docs/installation.html 页面,找到下载链接后,鼠标右键,
选择“链接另存为”,将 art-template 下载到本地,然后,通过

具体用法:

<script type="text/html" id="tpl-user">
        <h1>{
     {
     name}}-------{
     {
     age}}</h1>
        <!-- 真值输出 -->
        {
     {
     @ test}}
        <div>
            <!-- 条件 -->
            {
     {
     if flag===0}}
            flag的值为0
            {
     {
     else if flag==1}}
            flag的值为1
            {
     {
     /if}}
        </div>
        <ul>
            <!-- 循环 -->
            {
     {
     each hobby}}  
            <li>索引是{
     {
     $index}},循环项是{
     {
     $value}}</li>
            {
     {
     /each}}
        </ul>
        <!-- 使用过滤器 -->
        <h3>{
     {
     regTime | dateFormat}}</h3>
    </script>

时间过滤器:

 template.defaults.imports.dateFormat = function (date) {
     
            let y = date.getFullYear();
            let m = date.getMonth() + 1;
            let d = date.getDate();

            return y + '-' + m + '-' + d;
        }

你可能感兴趣的:(原理,模板引擎,javascript)