Trimpath Template 及JS模板引擎原理

这个是一个很老的JS模板引擎。看了下源码,理解下模拟条件语句的替换原则。感觉有点复杂~

简记之。

如果不涉及条件语句,可以直接在代码里构建模板,ajax请求回来的数据套用即可。最原始方式。

Trimpath JavaScript 是个轻量级的,基于JavaScript的,跨浏览器,采用APL/GPL开放源代码协议的,可以让你轻松进行基于模板编程方式的纯JS引擎。

它有如下的特点:
1、采用标准的JavaScript编写,支持跨浏览器
2、模板语法类似于:FreeMarker,Velocity,Smarty
3、采用简易的语言来描述大段的字串以及Dom/DHTML操作
4、可以很方便的解析XML文件格式的数据到指定模板。

采用该引擎,可以让它来完全处理View方面的事情,服务端Module直接输出Data就可以。让你的MVC模式连成一体,而且由于View由浏览器来处理,大大减少了服务器的负担,用来构建Ajax技术的网络信息系统应用是一个非常好的选择。

几个API:

processDOMTemplate、process、parseDOMTemplate等,用于解析DOM结构、填充数据。

像vm、jd这些,在目前公司内基本是由后端人员处理。个人以为,这种与页面相关的东西还是由前端来处理比较快捷,而事实也证明,尽管模板里有数据及业务逻辑的处理,前端处理的效率还是高于后端人员的。

如果一些不能放在vm里,需要动态渲染的结构,就会建议使用模板,ajax请求的数据,去渲染的时候,如果逻辑稍微一复杂,就想找点省事的,于是慢慢积累,便出现了JS模板引擎。市面上有各种各样的模板引擎,特别是在大前端、NodeJS的环境里。可对比使用。

模板的应用一般都比较简单,初始化下,请求个带数据参数的方法,基本搞定。

而模板的原理也不是很复杂,有一个准则:设置一个规则,解析这个规则。能够自圆其说。

性能和调试,也是在写模板引擎时需要注意的一项。

时间: 2024-11-08 19:14:56

Trimpath Template 及JS模板引擎原理的相关文章

js模板引擎原理,附自己写的简洁模板引擎

js处理DOM交互非常普遍,但DOM结构单纯用js字符串拼接简直难以维护,不方便理解和扩展. 下面展现了js模板引擎的实现原理: html中的模板 <script id="mytpl"> <div> 我的名字是:$name$ <br/> 今年$age$了! </div> </script> 因为script不会被浏览器解析和渲染,最大限度节省了浏览器资源,textarea标签同样可以达到效果.Template标签就是这样的目的

js模板引擎介绍搜集

js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTemplate等),如何从这么多纷繁的模板引擎中选择一款适合自己的呢,笔者最近对主流的js模板引擎(mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore)做了一番调研,分享出来希望对大家有用. 从这几个指标来比较js模板

调研js模板引擎

js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTemplate等),如何从这么多纷繁的模板引擎中选择一款适合自己的呢,笔者最近对主流的js模板引擎(mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore)做了一番调研,分享出来希望对大家有用. 从这几个指标来比较js模板

JavaScript模板引擎原理,几行代码的事儿

JavaScript模板引擎原理,几行代码的事儿 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age%> years old.'; 通过模板引擎函数把数据塞进去, var data = { "name": "Barret Lee", "age": "20" }; var result

掌握js模板引擎

最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一种痛苦. 听过这样一句话:"技术没有缺席,只有姗姗来迟",很多技术自己不知道,并非没有.今天我想介绍的就是一个简单的js模板引擎artTemplate,让我们扬帆起航吧- 一.概述 artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了质的飞跃,并且充

浅析js模板引擎

js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTemplate等),如何从这么多纷繁的模板引擎中选择一款适合自己的呢,笔者最近对主流的js模板引擎(mustache,doT,juicer,artTemplate,baiduTemplate,Handlebars,Underscore)做了一番调研,分享出来希望对大家有用. 从这几个指标来比较js模板

JavaScript模板引擎原理与用法

这篇文章主要介绍了JavaScript模板引擎原理与用法,结合实例形式详细分析了javascript模版引擎相关概念.原理.定义及使用方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下 一.前言 什么是模板引擎,说的简单点,就是一个字符串中有几个变量待定.比如: var tpl = 'Hei, my name is <%name%>, and I\'m <%age%> years old.'; 通过模板引擎函数把数据塞进去, var data = { &q

js模板引擎--artTemplate

js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址),貌似最近耳边听到得最多的模板引擎也就是artTemplate了,所以就花个时间来研究下吧... artTemplate是新一代的javascript模板引擎,若采用拥有V8引擎的chrome浏览器进行测试,其渲染性能甚至能达到知名模板引擎Mustache的20倍以上以及模板引擎tmpl的40倍以上

各种JS模板引擎对比数据(高性能JavaScript模板引擎)

最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,从而出现在各大型网站 Twitter.淘宝网.新浪浪微博.腾讯QQ空间.腾讯微博等.那么他们各自性能怎么样?请看下面. 通常模板引擎 baiduTemplate(百度)\artTemplate(腾讯)\juicer(淘