发布一款原创JavaScript模板引擎插件（将html模板快速渲染成数据对应的HTML片段的工具）

来源：互联网发布：知乎 hiv携带者编辑：程序博客网时间：2024/05/20 23:36

一、前言

templater.js 一款 JavaScript 模板引擎，简单，好用。用户可以写一个模板区块，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。用于代替拼接字符串这样繁琐且不易于代码维护的方法。

二、使用方法

第一步：

引入插件


<head>    <script src="js/jquery-htmler-1.0.js"></script></head>

第二步：

初始化插件

var temp = new templater();

第三步：

编写模板

<script type="text/template" id="temp">    <div class="list">        <div class="headbox"><img src="{images/head1.jpg}[img]"></div>        <ul class="info">            <li>{小明}[name]</li>            <li>{1.75}[height]cm</li>            <li>{65}[weight]kg</li>            <li>爱好{游泳}[hobby,无]</li>        </ul>    </div></script>

解释：模板块放在 <script> 中，设置type属性为text/template或text/html，用id标识。用“{ }”包含预览模式下需要显示的内容，以及标识简易模式下数据显示的位置；用“[ ]”包含标准模式下的键，并标识该模式下数据显示的位置，在“,”后面写上找不到数据的时候用于替换的内容。三种模式详见后文。

如果你希望自定义分隔符“{ }”和“[ ]”，可以在初始化插件时带入参数：

var temp = new templater(["{{","}}"],["(",")"]);

上述代码将默认的“{ }”修改为“{{ }}”，将默认的“[ ]”修改为“( )”。

第四步：

渲染模板

方法：templater.getTemp(id,param) //第一个参数传入模板id，第二个参数传入需要显示的数据

根据传参的方式将分别启用三种不同模式，适应三种场景。

1、预览模式：

var html = temp.getTemp('temp')

解释：方法不带第二个参数将启用预览模式。以“第三步”的模板示例为例，该模式下，方法将返回如下HTML片段：

<div class="list">    <div class="headbox"><img src="images/head1.jpg"></div>    <ul class="info">        <li>小明</li>        <li>1.75cm</li>        <li>65kg</li>        <li>爱好游泳</li>    </ul></div>

返回的HTML片段将按模板中“{}”中的内容显示。

应用场景：编写或修改HTML模板的结构和样式的时候实现快速预览。

2、简易模式：

var data = ['images/head2.jpg','小红','165','48','画画'];var html = temp.getTemp('temp', data);

解释：第二个参数传入一个数组将启用简易模式。以“第三步”的示例模板为例，该模式下，方法将返回如下HTML片段：

<div class="list">    <div class="headbox"><img src="images/head2.jpg"></div>    <ul class="info">        <li>小红</li>        <li>1.65cm</li>        <li>48kg</li>        <li>爱好画画</li>    </ul></div>

返回HTML内容将根据模板“{}”的位置将数组里的数据依次替换进去。

应用场景：模板简单，需要传入数据比较少的情况，实现快速渲染模板。

3、标准模式：

var data = {    img: 'images/head3.jpg',    name: '王强',    height: '172',    weight: '68',    hobby: '武术'};var html = temp.getTemp('temp',data);

解释：第二个参数传入一个对象将启用标准模式。以“第三步”的示例模板为例，该模式下，方法将返回如下HTML片段：

<div class="list">    <div class="headbox"><img src="images/head3.jpg"></div>    <ul class="info">        <li>王强</li>        <li>1.72cm</li>        <li>68kg</li>        <li>爱好武术</li>    </ul></div>

返回HTML片段将把模板“[ ]”里的内容作为键，并显示为data中对应的值。若找不到对应的值将显示为“[ ]”内的“,”后面的内容，若没有写 “,”将显示为空字符串。

应用场景：模板复杂，需要传入数据比较多的情况，实现准确渲染模板，便于代码维护。

点击此处下载插件

下载包里包含了插件、说明文档及demo。

0 0