详解Js模板引擎（TrimPath）

2024-12-23 22:21:57

当页面中引用template.js文件之后，脚本将创建一个TrimPath对象供你使用。

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

　　得到页面中Id为elementId的DOM组件的InnerHTML，将其解析成一个模板，这个返回一个templateObject对象，解析出错时将抛出一个异常。

　　optionalDocument一个可选参数，在使用iframe,frameset或者默认多文档时会有用，通常用来做模板的DOM元素师一个隐藏的<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>

　以上代码在页面上输出：关云长败走麦城!

　　其实，这个东西与C#，PHP的模板引擎，并没有本质上的区别，都是读入模板，然后替换数据。只不过，C#与PHP等后台语言，一般都从文件里面读取模板，如Html,txt等。而TrimPath就从<textarea></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 /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;">
　　<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>

　内联js：

<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>

输出结果如下：

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

浅谈轻量级js模板引擎simplite

模板地址:https://github.com/zhangshaolong/simplite欢迎各位提出宝贵意见及贡献代码.特点: 1:代码量少,学习成本低: 2:默认jsp语法标签方式,熟悉jsp的朋友可以直接按照jsp的语法书写模板: 3:使用原生js语法进行逻辑处理,只要熟悉js语法即可直接上手,没有学习成本. 4:支持原生js的所有语法作为代码逻辑片段,支持宽泛的书写格式. 5:支持重定义模板语言的标签符,默认的逻辑标签为<%和%>,默认的属性标签为<%=和%>. 6:支持
教你使用javascript简单写一个页面模板引擎

于是我又想着能不能写一些简单的代码来完善这个模板引擎,又能与其它现有的逻辑协同工作.AbsurdJS本身主要是以NodeJS的模块的形式发布的,不过它也会发布客户端版本.考虑到这些,我就不能直接使用现有的引擎了,因为它们大部分都是在NodeJS上运行的,而不能跑在浏览器上.我需要的是一个小巧的,纯粹以Javascript编写的东西,能够直接运行在浏览器上.当我某天偶然发现John Resig的这篇博客,我惊喜地发现,这不正是我苦苦寻找的东西嘛!我稍稍做了一些修改,代码行数差不多20行左右.其中的
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法

本文实例讲述了PHP针对常规模板引擎中与CSS/JSON冲突的解决方法,有一定的实用价值,具体分析如下: 本文主要针对对象为Smarty与Dwoo 在Smarty中经常会出现和CSS/JS的语法存在冲突的情况,因为二者都需要使用大括号{}.虽然可以改Smarty的界定符,但你在一个现存系统中,去修改所有相关代码,是不划算的.解决方法如下: 1. 避免同时出现通过外部引用的方式避免.问题是避无所避.所以这种情况只适合少量简单的情况. 2. 修改Smarty界定符 3.可以使用Smarty的lit
探究Javascript模板引擎mustache.js使用方法

我们将为大家详解Mustache.js轻量级JavaScript模版引擎使用方法. 简单示例 function show(t) { $("#content").html(t); } var view = { title: 'YZF', cacl: function () { return 6 + 4; } }; $("#content").html(Mustache.render("{{title}} spends {{cacl}}", view
node.js 使用ejs模板引擎时后缀换成.html

这是一个小技巧,看着.ejs的后缀总觉得不爽,使用如下方法,可以将模板文件的后缀换成我们习惯的.html. 1.在app.js的头上定义ejs: 复制代码代码如下: var ejs = require('ejs'); 2.注册html模板引擎: 复制代码代码如下: app.engine('html',ejs.__express); 3.将模板引擎换成html: 复制代码代码如下: app.set('view engine', 'html'); 4.修改模板文件的后缀为.html. 好了,任
laytpl 精致巧妙的JavaScript模板引擎

laytpl是一款颠覆性的JavaScript模板引擎,它用巧妙的实现方式,将自身的体积变得小巧玲珑,不仅性能接近极致,并且还具备传统前端引擎的几乎所有功能.所有的变身魔法都由不到1KB的代码创造,这仿佛是一场革命,又或者不是,但毋庸置疑的是,laytpl的确在用最轻量的方式呈现给世人.如果你从未接触这方面的应用,没关系,下面的讲述将会让你迫不及待地选择laytpl,从此更好地把握页面的数据渲染,走上人生巅峰! laytpl优势 •性能卓绝,执行速度比号称性能王的artTemplate.doT还
Node.js的Web模板引擎ejs的入门使用教程

Node 开源模板的选择很多,但推荐像我这样的老人去用 EJS,有 Classic ASP/PHP/JSP 的经验用起 EJS 来的确可以很自然,也就是说,你能够在 <%...%> 块中安排 JavaScript 代码,利用最传统的方式 <%=输出变量%>(另外 <%-输出变量是不会对 & 等符号进行转义的).安装 EJS 命令如下: npm install ejs JS 调用 JS 调用的方法主要有两个: ejs.compile(str, options); //
详解Javascript模板引擎mustache.js

本文总结它的使用方法和一些使用心得,内容不算很高深,纯粹是入门内容,看看即可.不过要是你还没有用过此类的javascript引擎库,那么本文还是值得你一读的,相信在你了解完它强大的功能和简单用法之后,一定会迫不及待地将之用于你的工作当中. 1. 从一个简单真实的需求讲起目前公司做了一个统一的开发平台,后台封装了MVC的接口和数据增删改查的接口,前端我自己用bootstrap+手写各类组件的方式弄了一套开发框架:集成了CAS,在CAS的基础上,首先做了一套统一权限管理系统,这个系统是我们开发平台
javascript轻量级模板引擎juicer使用指南

使用方法编译模板并根据数据立即渲染出结果 juicer(tpl, data); 仅编译模板暂不渲染,返回一个可重用的编译后的函数 var compiled_tpl = juicer(tpl); 根据给定的数据对之前编译好的模板进行渲染 var complied_tpl = juicer(tpl); var html = complied_tpl.render(data); 注册/注销自定义函数(对象) juicer.register('function_name', function); ju
高性能JavaScript模板引擎实现原理详解

随着 web 发展,前端应用变得越来越复杂,基于后端的 javascript(Node.js) 也开始崭露头角,此时 javascript 被寄予了更大的期望,与此同时 javascript MVC 思想也开始流行起来.javascript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,近一年来在开源社区中更是百花齐放,在 Twitter.淘宝网.新浪微博.腾讯QQ空间.腾讯微博等大型网站中均能看到它们的身影. 本文将用最简单的示例代码描述现有的 javascript 模板引擎

详解Js模板引擎（TrimPath）

相关推荐

随机推荐