关于模板引擎的简单原理

最新推荐文章于 2023-03-20 18:14:59 发布

老南孩

最新推荐文章于 2023-03-20 18:14:59 发布

阅读量523

点赞数

文章标签：模板引擎

本文链接：https://blog.csdn.net/qq_44386005/article/details/92637844

版权

相信用过vue框架或者是简单了解过vue的人都知道模板引擎这个东西，大致就是代码复用 数据和页面分离这两个概念这里就不多说概念的东西了很多东西还是直接上代码自己看懂了意会了也就明白了

1丶模板引擎丶模板引擎~~ 很简单，首先你需要一个模板

<body>
	<script type="text/tamplate" id="index">
	    <!--  视图  -->
		<div class="box">
			<div class="top">{*name*}</div>
			<div class="footer">{*something*}</div>
		</div>	
	</script>
</body>

首先我们看上面这段代码，你需要明白此时这个div（.box）容器并没有加载进页面里面而对于 {name} 你有没有很熟悉是不是很像vue里面的 {{name}} 这个形式我们的目的很相似也是用后面分离出来的name变量something变量去替换页面中的{name}和{something} 具体怎么做我们继续往下

2丶数据

	//数据
	let data = {
		name:'tom',
		something:'我是帅哥'
	}

3丶获取模板

    //获取模板
	let script = document.getElementsByTagName('script')[0];
	let tamplate = script.innerHTML;

主要就是将我们的模板当成字符串去处理替换里面的变量这里我们将这个处理过程封装成一个函数

4丶处理函数

function change(data,str){
		let newStr = str.replace(/{\*(\w+)\*}/g,function(a,b){
				return data[b];
		})
		return newStr
	}

参数数据和需要被操作的字符串这个函数的主要功能就是将字符串里的变量替换成我们预先准备好的数据（或者你也可以替换成从后台获取到的数据）只是我们这里并没有加数据监听所以页面并不会实时的更新

5丶最后加载

document.body.innerHTML = change(data,tamplate)

我们渲染的就是被处理过的字符串这样你在页面的任何地方去加载这个模板都是一样的效果

6丶总结思路

如果还是不明白的可以看这里
首先自写一个模板装进script标签通过js获取将标签等元素当成字符串去处理使用replace方法利用正则和预先设置的数据去替换里面的你自己定好的模板形式（如：{name}）最后使用body.innerHTML加载即可

老南孩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于模板引擎的简单原理

相信用过vue框架或者是简单了解过vue的人都知道模板引擎这个东西，大致就是代码复用数据和页面分离这两个概念这里就不多说概念的东西了很多东西还是直接上代码自己看懂了意会了也就明白了1丶模板引擎丶模板引擎~~ 很简单，首先你需要一个模板<body> <script type="text/tamplate" id="index"> <!-- ...
复制链接

扫一扫