浅谈javascript中自定义模版

当我们开发Web应用程序时，经常需要在前端页面中展示动态数据。为了实现数据的动态展示，我们需要使用前端模板技术来实现。Javascript中实现自定义模板，通常可以使用一些第三方库，如Handlebars、Mustache等。

下面将介绍如何通过使用Handlebars.js库，在Javascript中自定义模板。Handlebars是一个高度可扩展的 JavaScript 前端模板引擎，它允许您使用小段的预编译模板来动态渲染 HTML。

第一步：引入Handlebars库

首先需要在前端页面中引入Handlebars.js文件，并且定义预编译模板。引入Handlebars.js可以使用如下代码：

<script src="https://cdn.bootcdn.net/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>

第二步：编写模板

编写预编译模板的方法有多种，如在 <script> 标签中定义模板、在单独的模板文件中定义模板等。这里演示在 <script> 标签中定义模板的方式。

<script type="text/x-handlebars-template" id="template">
    <h1>{{title}}</h1>
    <ul>
        {{#each list}}
        <li>{{this}}</li>
        {{/each}}
    </ul>
</script>

在上面的模板中，我们使用 {{}} 的方式来动态插入数据，其中 {{title}} 将会插入传入模板的title变量值，{{#each list}} ... {{/each}} 中间的代码块将会循环遍历传入模板的list数组，并将每个数组元素插入到 <li> 标签中。

第三步：数据绑定

在使用模板前，需要先将数据和模板进行绑定，生成渲染后的HTML字符串。

// 定义数据
var data = {
    title: '自定义模板示例',
    list: ['模板1', '模板2', '模板3']
};

// 获取模板
var template = Handlebars.compile(document.getElementById('template').innerHTML);

// 将数据绑定到模板中
var html = template(data);

// 将生成的HTML添加到页面中
document.getElementById('container').innerHTML = html;

在上述代码中，将数据和模板分别绑定到变量 data 和 template 中，然后使用 Handlebars.compile() 函数将模板编译为渲染函数，并将 data 作为参数调用渲染函数获取可渲染的 HTML 字符串。最后将渲染后的 HTML 添加到页面中显示。

示例演示1：使用自定义模板渲染文章列表

下面演示如何使用自定义模板渲染文章列表。首先定义文章列表的数据如下：

var articles = [
    {
        id: 1,
        title: 'JavaScript中的原型与原型链',
        author: '张三',
        content: '...'
    },
    {
        id: 2,
        title: 'JavaScript中的作用域与闭包',
        author: '李四',
        content: '...'
    },
    {
        id: 3,
        title: 'JavaScript中的函数式编程',
        author: '王五',
        content: '...'
    }
];

然后定义文章列表的模板如下：

<script id="article-template" type="text/x-handlebars-template">
    {{#each articles}}
    <div class="article">
        <h2>{{title}}</h2>
        <p class="metadata">{{author}}</p>
        <p>{{content}}</p>
    </div>
    {{/each}}
</script>

然后绑定数据并渲染模板：

// 获取模板
var articleTemplate = Handlebars.compile(document.getElementById('article-template').innerHTML);

// 绑定数据并渲染模板
var html = articleTemplate({ articles: articles });

// 将渲染结果添加到页面
document.getElementById('articles-container').innerHTML = html;

示例演示2：使用自定义模板动态显示天气信息

下面演示如何使用自定义模板动态显示天气信息。首先定义天气数据如下：

var weather = {
    city: '北京',
    temperature: '23℃',
    weather: '晴',
    wind: '西北风 3级',
    humidity: '50%'
};

然后定义天气预报的模板如下：

<script id="weather-template" type="text/x-handlebars-template">
    <h2>{{city}}天气预报</h2>
    <p>温度：{{temperature}}</p>
    <p>天气：{{weather}}</p>
    <p>风力：{{wind}}</p>
    <p>湿度：{{humidity}}</p>
</script>

然后将数据和模板进行绑定并渲染：

// 获取模板
var weatherTemplate = Handlebars.compile(document.getElementById('weather-template').innerHTML);

// 绑定数据并渲染模板
var html = weatherTemplate(weather);

// 将渲染结果添加到页面
document.getElementById('weather-container').innerHTML = html;

通过以上两个示例，可以看出Handlebars.js的使用非常简单、灵活。只需要定义模板和数据，调用渲染函数即可轻松生成渲染后的HTML字符串。