模板引擎的实现原理

最新推荐文章于 2024-07-25 09:51:39 发布

A_ugust__

最新推荐文章于 2024-07-25 09:51:39 发布

阅读量113

点赞数

分类专栏：前端学习的知识点文章标签： vue.js 前端 javascript html

本文链接：https://blog.csdn.net/weixin_61769998/article/details/126521645

版权

前端学习的知识点专栏收录该内容

16 篇文章 0 订阅

订阅专栏

实现简易的模板引擎

1. 实现步骤

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

2. 定义模板结构

<script type="text/html" id="tpl-user">

<div>姓名：{{name}}</div>

<div>年龄：{{ age }}</div>

<div>性别：{{ gender}}</div>

<div>住址：{{address }}</div>

</script>

3. 预调用模板引擎

<script>

// 定义数据

var data = { name: 'zs', age: 28, gender: '男', address: '北京顺义马坡' }

// 调用模板函数

var htmlStr = template('tpl-user', data)

// 渲染HTML结构

document.getElementById('user-box').innerHTML = htmlStr

</script>

4. 封装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

}

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

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

A_ugust__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
模板引擎的实现原理

实现简易的模板引擎1. 实现步骤定义模板结构预调用模板引擎封装 template 函数导入并使用自定义的模板引擎2. 定义模板结构<scripttype="text/html"id="tpl-user"> <div>姓名：{{name}}</div> <div>年龄：{{age}}</div> <div>性别：{{gender}
复制链接

扫一扫