ajax中的模板引擎art-template

前端学习@

于 2023-04-17 16:35:08 发布

阅读量98

点赞数 1

文章标签： ajax javascript ecmascript

本文链接：https://blog.csdn.net/weixin_52504437/article/details/130183318

版权

模板引擎art-template

模板引擎art-template

模板引擎art-template

什么是模板引擎

模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。

模板引擎的好处

减少了字符串的拼接操作
使代码结构更清晰
使代码更易于阅读与维护

在这里插入图片描述正则表达式
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]

字符串的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)

多次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

使用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>

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)

ps:正则表达式小知识

    /s表示 [ \t\v\n\r\f]。表示空白符，包括空格、水平制表符、垂直制表符、换行符、回车符、换页符。
    分组中exec返回的是一个数组，["{{name}}", "name",index: , input: "{{name}}f"]

2.5.2 实现简易的模板引擎

实现步骤

定义模板结构
预调用模板引擎
封装 template 函数
导入并使用自定义的模板引擎
定义模板结构

<!-- 定义模板结构 -->
<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: '北京顺义马坡' }
   // 调用模板函数
   var htmlStr = template('tpl-user', data)
   // 渲染HTML结构
   document.getElementById('user-box').innerHTML = htmlStr
</script>

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

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

 <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>

前端学习@

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
ajax中的模板引擎art-template

var result = ‘123456’.replace(‘123’, ‘abc’) // 得到的 result 的值为字符串 ‘abc456’模板引擎，顾名思义，它可以根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面。// 得到 name 相关的分组信息。2.5.2 实现简易的模板引擎。封装 template 函数。导入并使用自定义的模板引擎。我是{{name}}我是{{name}}
复制链接

扫一扫