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的图书