当前位置：首页 > 全部内容 > 正文

TrimPath JavaScript模板引擎使用详解

作者：函数茶馆

时间：2026-10-30

浏览：390

本文详细介绍TrimPath JavaScript模板引擎的使用方法。通过parseDOMTemplate和processDOMTemplate两个核心API，实现从DOM元素或字符串解析模板并替换数据。文章涵盖条件控制(if/else)、循环(for/forelse)、宏定义及CDATA区域等语法，并结合.NET MVC后台交互示例，展示如何在前端动态生成HTML内容。

文章目录

TrimPath初始化与核心API

在页面中引入template.js文件后，脚本会自动创建一个名为TrimPath的全局对象，供开发者调用。

    parseDOMTemplate(elementId,optionalDocument)　　//获得模板字符串代码

该方法用于获取指定ID为elementId的DOM元素的innerHTML内容，并将其解析为一个模板对象。解析成功后返回一个templateObject实例；若解析过程中出现错误，则会抛出异常。

optionalDocument是一个可选参数，主要用于处理iframe或frameset等多文档环境。在某些场景下，模板源可能是一个隐藏的textarea元素，此时该参数可用于指定对应的文档对象。

获取到的模板字符串需进一步调用process()方法进行解析，最终生成包含实际数据的源代码。

具体用法示例如下：

var result = parseDOMTemplate(elementId,optionalDocument).process();　　//用数据替换模板

该方法同样支持直接对字符串进行解析操作：


var data = { Name:"张辽" }; 　　　　　　//不输入就包ul，输入就包你输入的那个
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
alert("hello ${Name}".process(data)); //process()就是一个将数据解析模板的函数，这里输出hello,张辽

若希望一步完成模板解析与数据替换，可使用以下便捷方法：

TrimPath.processDOMTemplate(elementId,contextObject,optionalFlags,optionalDocument)

这是一个封装好的辅助函数，其内部依次调用了TrimPath.parseDOMTemplate()和process()方法。最终返回经过数据替换后的完整代码字符串。

该函数的作用等同于直接调用parseDOMTemplate().process()，即从指定的textarea元素中读取模板，并将传入的数据进行替换后返回结果。

基础使用示例

首先来看一个最简单的应用案例：


<html> 
　　<head> 
　　　　<title>TrimPath学习测试</title>
　　　　<script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
　　</head> 
<body> 
　　<div id="ShowDiv"> 
　　</div> 
　　<textarea id="temp" style="display:none;"> 
　　　　${Name}败走麦城!
　　</textarea> 
</body> 
</html> 
<script language="javascript">
　　var data = { Name: "关云长" };
　　var result = TrimPath.processDOMTemplate("temp", data);
　　document.getElementById("ShowDiv").innerHTML = result;
</script>

执行上述代码后，页面将输出文本：关云长败走麦城!。

模板引擎原理对比

从原理上看，TrimPath与C#或PHP中的模板引擎并无本质区别，均遵循“读取模板+替换数据”的模式。不同之处在于，后台语言通常从HTML或TXT文件中读取模板，而TrimPath则直接从HTML中的<textarea>标签内读取模板内容。

条件与循环语法

以下是条件控制语法（if/else）的演示：


<html> 
　　<head> 
　　　　<title>TrimPath学习测试</title>
　　　　<script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
　　</head> 
<body> 
　　<div id="ShowDiv"> 
　　</div> 
　　<textarea id="temp" style="display:none;"> 
　　　　{if Name == "关云长"}
　　　　${Name}龙卷旋风斩!
　　　　{elseif Name == "郭嘉"}
　　　　${Name}冰河爆裂破!
　　　　{else}
　　　　${Name}放大!
　　　　{/if}
　　</textarea> 
</body> 
</html> 

<script language="javascript">
var data = { Name: "郭嘉" };
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script>

接下来是循环控制语法（for/forelse）的演示：


<html>
<head>
　　<title>TrimPath学习测试</title>
　　<script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body>
　　<div id="ShowDiv">
　　</div>
　　<textarea id="temp" style="display: none;"> 
　　<table width="400" cellspacing="0" cellpadding="0" border="1">
　　　　{for i in data}
　　　　　　<tr>
　　　　　　　　<td>${i.Name}</td>
　　　　　　　　<td>${i.Big}</td>
　　　　　　</tr>
　　　　{/for}
　　</table>
　　</textarea>
</body>
</html>

<script type="text/javascript">
var data = [
{ Name: "关羽", Big: "龙卷旋风斩" },
{ Name: "郭嘉", Big: "冰河爆裂破" },
{ Name: "诸葛", Big: "卧龙光线", },
]; //他妈的for循环多了一次
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script>

其基本语法结构如下所示：

{for varName in listExpr} 主循环体 {forelse} 当输入为null，或listExpr数量为0时 {/for}

高级语法特性

宏定义的使用示例如下：


<html>
<head>
　　<title>TrimPath学习测试</title>
　　<script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body>
　　<div id="ShowDiv">
　　</div>
　　<textarea id="temp" style="display: none;"> 
　　　　{macro htmlList(list, optionalListType)}
　　　　{var listType = optionalListType != null ? optionalListType : "ul"}
　　　　<${listType}>
　　　　　　{for item in list}
　　　　　　　　<li>${item}</li>
　　　　　　{/for}
　　　　</${listType}>
　　　　{/macro}
　　　　${htmlList(["AA","BB","CC"], "")}
　　　　</textarea>
</body>
</html>

<script type="text/javascript">
var data = {}; //不输入就包ul，输入就包你输入的那个
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script>

CDATA区域的处理方式如下：


<html>
<head>
<title>TrimPath学习测试</title>
　　<script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body>
　　<div id="ShowDiv">
　　</div>
　　　　<textarea id="temp" style="display: none;"> 
　　　　　　{cdata}${Name}{/cdata} 被解释成了 ${Name}
　　　　</textarea>
</body>
</html>
<script type="text/javascript">
var data = { Name:"张辽" }; //不输入就包ul，输入就包你输入的那个
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script>

内联JavaScript代码的嵌入方式如下：


<html>
<head>
　　<title>TrimPath学习测试</title>
　　<script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
</head>
<body>
　　<div id="ShowDiv">
　　</div>
　　　　<textarea id="temp" style="display: none;"> 
　　　　　　<select onchange="sel_onchange()">
　　　　　　　　<option value="1">1</option>
　　　　　　　　<option value="2">2</option>
　　　　　　</select>
　　　　　　{eval}
　　　　　　　　sel_onchange = function() {
　　　　　　　　alert('我不小心被change了'); //此js事件会被触发，并且此处的注释没影响
　　　　　　　　}
　　　　　　{/eval}
　　　　</textarea>
</body>
</html>

<script type="text/javascript">
var data = { Name:"张辽" }; //不输入就包ul，输入就包你输入的那个
var result = TrimPath.processDOMTemplate("temp", data);
document.getElementById("ShowDiv").innerHTML = result;
</script>

后端集成示例

结合.NET MVC后台程序的实际应用场景如下：


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace 测试jQuery_EasyUI.Controllers
{
  [HandleError]
  public class HomeController : Controller
  {
    public ActionResult Index()
    {
      return View();
    }

    public ActionResult GetJson()
    {
      Person p1 = new Person(1, "刘备", 30);
      Person p2 = new Person(2, "关羽", 28);
      Person p3 = new Person(3, "张飞", 36);
      List<Person> ListPerson = new List<Person>();
      ListPerson.Add(p1);
      ListPerson.Add(p2);
      ListPerson.Add(p3);
      return Json(ListPerson,JsonRequestBehavior.AllowGet);
    }
  }

  public class Person
  {
    public Person(int id, string name, int age) { Id = id; Name = name; Age = age; }

    public int Id { get; set; }

    public string Name { get; set; }

    public int Age { get; set; }
  }
}

前端相关代码如下：


<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<html>
<head>
  <title>TrimPath学习测试</title>
  <script src="../../Scripts/jquery.min.js" type="text/javascript"></script>
  <script src="../../Scripts/trimpath/template.js" type="text/javascript"></script>
  
</head>
<body>
  <div id="ShowDiv">
  </div>
  <textarea id="temp" style="display: none;"> 
    
    <table width="400" cellspacing="0" cellpadding="0" border="1">
      <tr>
        <td>Id</td>
        <td>姓名</td>
        <td>年龄</td>
      </tr>
      {for i in data}
       <tr>
        <td>${i.Id}</td>
        <td>${i.Name}</td>
        <td>${i.Age}</td>
      </tr>
      {/for}
    </table>
  </textarea>
</body>
</html>

<script type="text/javascript">
    var data;

    $(function() {
      $.ajax({
        url: "/Home/GetJson",
        type: 'post',
        async: true,
        dataType: 'json',
        success: function(response) {
          data = response;
          var result = TrimPath.processDOMTemplate("temp", data);
          document.getElementById("ShowDiv").innerHTML = result;
        }
      })
    })
</script>

最终输出的结果如下所示：

TrimPath初始化与核心API

以上就是本文的全部内容，希望对大家有所帮助，谢谢对本站的支持！

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JS split切割后出现空字符串怎么过滤

在 React 或 Vue 项目中封装使用 JS 节流防抖

JavaScript中怎么将带小数的字符串转为整数？

怎么用JavaScript策略模式重构电商促销计算逻辑？

JS使用constructor判断数据类型可靠吗

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法