js使用text/template制作模板

svygh123

于 2024-08-18 23:07:34 发布

阅读量773

点赞数 15

分类专栏：编程 js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/svygh123/article/details/141284747

版权

编程同时被 2 个专栏收录

178 篇文章 3 订阅

订阅专栏

33 篇文章 0 订阅

订阅专栏

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

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

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

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

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

function loadTemplate(id) {
    return document.getElementById(id).innerHTML;
}

const template = loadTemplate('myTemplate');

2. 使用外部文件

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

<!-- index.html -->
<button onclick="loadAndRender()">Load Template</button>

<script>
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="loadAndRender()">Load Template</button>
    <script id="myTemplate" type="text/template">
        <div>
            <h1>{{title}}</h1>
            <p>{{content}}</p>
        </div>
    </script>
    <script>
        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>