前端_网页编程 Form表单与模板引擎（下）

朱雀 2022-11-29 03:04 129阅读 0赞

### 目录 ###

*  续上一篇
 *   *  6. 模板引擎的实现原理
     *   *  6.1 正则与字符串操作
         *   *  6.1.1 基本语法
             *  6.1.2 分组
             *  6.1.3 字符串的replace函数
             *  6.1.4 多次replace
             *  6.1.5 使用while循环replace
             *  6.1.6 replace替换为真值
         *  6.2 实现简易的模板引擎
         *   *  6.2.1 实现步骤
             *  6.2.2 定义模板结构
             *  6.2.3 预调用模板引擎
             *  6.2.4 封装 template 函数
             *  6.2.5 导入并使用自定义的模板引擎
 *  总结

--------------------

# 续上一篇 #

--------------------

## 6. 模板引擎的实现原理 ##

在模板引擎内部用的最主要的技术就是**正则表达式**和**字符串替换**的操作。

### 6.1 正则与字符串操作 ###

这里补充一下正则和字符串的基本知识

#### 6.1.1 基本语法 ####

正则函数`exec()`，用于检索字符串中的正则表达式的匹配。  
如果字符串中有**匹配**的值，则返回该匹配值，否则返回 null。

**语法格式：**

// RegExpObject 表示正则表达式
    RegExpObject.exec(string)

**代码示例**：

var str = 'hello'
    var pattern = /o/       // 正则表达式
    // 输出的结果["o", index: 4, input: "hello", groups: undefined]
    console.log(pattern.exec(str))

#### 6.1.2 分组 ####

正则表达式中 `()` 包起来的内容表示一个**分组**，可以通过分组来提取自己想要的内容，示例代码如下

var str = '<div>我是{ {name}}</div>'
     var pattern = /{ { ([a-zA-Z]+)}}/  // + 号表示任意多个
    
     var patternResult = pattern.exec(str)
     console.log(patternResult)
     // 得到 name 相关的分组信息
     // ["{ {name}}", "name", index: 7, input: "<div>我是{ {name}}</div>", groups: undefined]

正则`/{ {([a-zA-Z]+)}}/`里的小括号`()`代表提取分组。

#### 6.1.3 字符串的replace函数 ####

replace() 函数用于在字符串中用一些字符**替换**另一些字符，语法格式如下：

// 将1、2、3替换为a、b、c
    var result = '123456'.replace('123', 'abc') // 得到的 result 的值为字符串 'abc456'

**代码示例**：

var str = '<div>我是{ {name}}</div>'
    var pattern = /{ {([a-zA-Z]+)}}/
    
    var patternResult = pattern.exec(str)
    str = str.replace(patternResult[0], patternResult[1]) // replace 函数返回值为替换后的新字符串
    // 输出的内容是：<div>我是name</div>
    console.log(str)

#### 6.1.4 多次replace ####

**代码示例**：

var str = '<div>{ {name}}今年{ { age }}岁了</div>'
        var pattern = /{ {\s*([a-zA-Z]+)\s*}}/
    
        // 第一次匹配
        var res1 = pattern.exec(str)
        str = str.replace(res1[0], res1[1])
        console.log(str)
    
        // 第二次匹配
        var res2 = pattern.exec(str)
        str = str.replace(res2[0], res2[1])
        console.log(str)
    
        // 第三次匹配
        var res3 = pattern.exec(str)
        console.log(res3)
      </script>

\\s\* 表示空字符串，出现一次或多次。

#### 6.1.5 使用while循环replace ####

**代码示例：**

**控件台输出：**  
![在这里插入图片描述][2020081911084211.png_pic_left]

#### 6.1.6 replace替换为真值 ####

**代码示例：**

**控制台输出：**  
![在这里插入图片描述][20200819112300141.png_pic_center]

### 6.2 实现简易的模板引擎 ###

#### 6.2.1 实现步骤 ####

*  定义模板结构；
 *  预调用模板引擎；
 *  封装 template 函数；
 *  导入并使用自定义的模板引擎；

#### 6.2.2 定义模板结构 ####

**模板代码示例：**

<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>

#### 6.2.3 预调用模板引擎 ####

**js代码示例：**

<script>
            // 定义数据
            var data = {  
                    name: '张三疯',
                     age: 128,
                     gender: '男',
                     address: '湖北武当山' 
                }
                // 调用模板函数
            var  htmlStr  =  template('tpl-user', data)
                // 渲染HTML结构
            document.getElementById('user-box').innerHTML = htmlStr
        </script>

**页面渲染：**  
![在这里插入图片描述][20200819114823163.png_pic_left]

#### 6.2.4 封装 template 函数 ####

**代码：**

// 封装template函数
    	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
    	}

#### 6.2.5 导入并使用自定义的模板引擎 ####

<head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>自定义模板引擎</title>
    
        
        <script src="./js/template.js"></script>
    </head>

--------------------

# 总结 #

上一篇：[前端\_网页编程 Form表单与模板引擎（中）][Form]

[2020081911084211.png_pic_left]: /images/20221124/76f190824cf6403c85db8c3b518700f6.png
[20200819112300141.png_pic_center]: /images/20221124/2bcf57abe3ec4f85a38b23966552ec74.png
[20200819114823163.png_pic_left]: /images/20221124/61fbc316d21040b8ba71d3c24c9abab9.png
[Form]: https://oldriver.blog.csdn.net/article/details/108048255