js使用text/template制作模板

news/2024/9/22 22:08:39/

如果你想把模板内容放在HTML文件中，并通过JavaScript加载和渲染这些模板，你可以采用以下几种方法：

1. 使用 `<script>` 标签作为模板容器

可以使用 <script> 标签来存储模板内容，并设置 type 属性为一个特殊的值（如 text/template），这样浏览器就不会尝试执行这些脚本。

<script id="myTemplate" type="text/template">javascript"><div><h1>{{title}}</h1><p>{{content}}</p></div>
</script>

然后在JavaScript中获取这个模板的内容：

javascript">function loadTemplate(id) {return document.getElementById(id).innerHTML;
}const template = loadTemplate('myTemplate');

2. 使用外部文件

你也可以将模板保存在一个单独的HTML文件中，然后通过Ajax请求加载它。

<!-- index.html -->
<button onclick="javascript language-javascript">loadAndRender()">Load Template</button><script>javascript">
async function loadAndRender() {const response = await fetch('template.html');const template = await response.text();// 假设我们有一个数据对象const data = {title: 'Welcome',content: 'This is some content.'};const rendered = renderTemplate(template, data);document.body.appendChild(createElementFromHTML(rendered));
}function renderTemplate(template, data) {const regex = /\{\{(.+?)\}\}/g;return template.replace(regex, (match, expression) => {try {return eval(expression);} catch (e) {return '';}});
}function createElementFromHTML(htmlString) {const div = document.createElement('div');div.innerHTML = htmlString.trim();return div.firstChild;
}
</script>

示例代码

这里是一个完整的示例，使用了 <script> 标签来存储模板，并且在JavaScript中进行加载和渲染：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Template Engine Example</title>
</head>
<body><button onclick="javascript language-javascript">loadAndRender()">Load Template</button><script id="myTemplate" type="text/template">javascript"><div><h1>{{title}}</h1><p>{{content}}</p></div></script><script>javascript">function loadTemplate(id) {return document.getElementById(id).innerHTML;}function renderTemplate(template, data) {const regex = /\{\{(.+?)\}\}/g;return template.replace(regex, (match, expression) => {try {return data[expression];} catch (e) {return '';}});}function createElementFromHTML(htmlString) {const div = document.createElement('div');div.innerHTML = htmlString.trim();return div.firstChild;}function loadAndRender() {const template = loadTemplate('myTemplate');const data = {title: 'Welcome to our site!',content: 'This is the main content of the page.'};const rendered = renderTemplate(template, data);document.body.appendChild(createElementFromHTML(rendered));}</script>
</body>
</html>