1. 模板引擎的实现原理
1.1 正则与字符串操作
exec() 函数用于检索字符串中的正则表达式的匹配。
如果字符串中有匹配的值，则返回该匹配值，否则返回 null。
1.基本语法：正则表达式
2.分组
正则表达式中 ( ) 包起来的内容表示一个分组，可以通过分组来提取自己想要的内容，示例代码如下：
3. 字符串的replace函数
4. 多次replace
5. 使用while循环replace
第三次就被转成boolean值，false，while循环就不成立了
6. replace替换为真值
1.2 实现简易的模板引擎
<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: 'zs', age: 28, gender: '男', address: '北京顺义马坡' }
// 调用模板引擎，js里头定义的template.js
var htmlStr = template('tpl-user', data)
// 渲染HTML结构，拿到字符串放到页面上展示
document.getElementById('user-box').innerHTML = htmlStr
</script>
</body>封装template函数
//封装template函数，接收模板的id和数据
//通过dom操作先获取到节点，再通过innerHTML拿到模板里的字符串
function template(id, data) {
var str = document.getElementById(id).innerHTML
//定义正则表达式pattern
var pattern = /{{\s*([a-zA-Z]+)\s*}}/
//循环匹配，把花括号里的东西替换成模板里的eg：{{name}}——name
var pattResult = null
while (pattResult = pattern.exec(str)) {
str = str.replace(pattResult[0], data[pattResult[1]])
}
return str
}
加强：
1. XMLHttpRequest的基本使用
1.1 使用xhr发起GET请求
xhr.readyState === 4 && xhr.status === 200 是固定写法判断条件
1.1.2 了解xhr对象的readyState属性
1.1.3 使用xhr发起带参数的GET请求
获取id=1的图书
1.2 查询字符串
1.2.1 GET请求携带参数的本质
![[SCTF2019]Flag Shop （RUBY模板注入）](https://img-blog.csdnimg.cn/433758f938e74a86810ed22ce38bbebe.png)
