模板引擎的实现原理

最新推荐文章于 2024-08-10 07:07:55 发布

Lotus_fragrance

最新推荐文章于 2024-08-10 07:07:55 发布

阅读量189

点赞数

文章标签： javascript ajax

本文链接：https://blog.csdn.net/Lotus_fragrance/article/details/125491000

版权

这篇博客详细介绍了JavaScript中的正则表达式操作，包括基本语法、分组、replace函数的使用，以及如何通过while循环实现多次替换。此外，还展示了如何利用正则实现简易的模板引擎，通过示例代码演示了从模板字符串到动态数据填充的整个过程。

摘要由CSDN通过智能技术生成

#博学谷IT学习技术支持#

1. 正则与字符串操作

1. 基本语法

exec() 函数用于检索字符串中的正则表达式的匹配。

如果字符串中有匹配的值，则返回该匹配值，否则返回 null。

RegExpObject.exec(string)

示例代码如下：

var str = 'hello'

var pattern = /o/

// 输出的结果["o", index: 4, input: "hello", groups: undefined]

console.log(pattern.exec(str))

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]

3. 字符串的replace函数

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

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)

4. 多次replace

var str = '<div>{{name}}今年{{ age }}岁了</div>'

var pattern = /{{\s*([a-zA-Z]+)\s*}}/

var patternResult = pattern.exec(str)

str = str.replace(patternResult[0], patternResult[1])

console.log(str) // 输出 <div>name今年{{ age }}岁了</div>

patternResult = pattern.exec(str)

str = str.replace(patternResult[0], patternResult[1])

console.log(str) // 输出 <div>name今年age岁了</div>

patternResult = pattern.exec(str)

console.log(patternResult) // 输出 null

5. 使用while循环replace

var str = '<div>{{name}}今年{{ age }}岁了</div>'

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) // 输出 <div>name今年age岁了</div>

6. replace替换为真值

var data = { name: '张三', age: 20 }

var str = '<div>{{name}}今年{{ age }}岁了</div>'

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)

2 .实现简易的模板引擎

1. 实现步骤

定义模板结构

预调用模板引擎

封装 template 函数

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

2.代码演示：

<body>
    <div id="container"></div>
    <!--1.定义模板结构 -->
    <script type="text/html" id="tpl-user">
        <div>姓名：{{name}}</div>
        <div>年龄：{{age}}</div>
        <div>性别：{{gender}}</div>
        <div>住址：{{address}}</div>
    </script>
    <script>
        //2.预调用模板引擎
        // 定义数据
        var data = { name: 'zs', age: 28, gender: '男', address: '北京顺义马坡' }
        //调用模板函数
        var htmlStr = template('tpl-user', data)
        //渲染HTML结构
        document.getElementById('container').innerHTML = htmlStr
    </script>
</body>

3.封装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
}