前端_网页编程 Form表单与模板引擎（下）
目录
- 续上一篇
- 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 = '我是{{name}}'
var pattern = /{{([a-zA-Z]+)}}/ // + 号表示任意多个
var patternResult = pattern.exec(str)
console.log(patternResult)
// 得到 name 相关的分组信息
// ["{{name}}", "name", index: 7, input: "我是{{name}}", 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 = '我是{{name}}'
var pattern = /{{([a-zA-Z]+)}}/
var patternResult = pattern.exec(str)
str = str.replace(patternResult[0], patternResult[1]) // replace 函数返回值为替换后的新字符串
// 输出的内容是：我是name
console.log(str)
6.1.4 多次replace
代码示例：
var str = '{{name}}今年{{ age }}岁了'
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
代码示例：
<script>
var str = '{{name}}今年{{ age }}岁了'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var patternResult = null
while (patternResult = pattern.exec(str)) {
str = str.replace(patternResult[0], patternResult[1])
}
console.log(str) // 输出 name今年age岁了
</script>
控件台输出：
6.1.6 replace替换为真值
代码示例：
<script>
var data = {
name: '张三',
age: 20
}
var str = '{{name}}今年{{ age }}岁了'
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
var patternResult = null
while ((patternResult = pattern.exec(str))) {
// 模板引擎的核心代码
str = str.replace(patternResult[0], data[patternResult[1]])
}
console.log(str) // 输出：张三今年20岁了
</script>
控制台输出：
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>
页面渲染：
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表单与模板引擎（中）