Ajax(五) Ajax加强

最新推荐文章于 2024-08-14 20:15:00 发布

Bella..

最新推荐文章于 2024-08-14 20:15:00 发布

阅读量524

点赞数 1

分类专栏： Ajax 文章标签：正则表达式

本文链接：https://blog.csdn.net/weixin_57826863/article/details/128344200

版权

Ajax 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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
}