javascript模板引擎

本文将用最简单的示例代码描述现有的 javascript 模板引擎的原理，包括新一代 javascript 模板引擎 artTemplate 的特性实现原理，欢迎共同探讨。 artTemplate 介绍 artTemplate 是新一代 javascript 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 javascript 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。 除了性能优势外，调试功能也值得一提。模板调试器可以精确定位到引发渲染错误的模板语句，解决了编写模板过程中无法调试的痛苦，让开发变得高效，也避免了因为单个模板出错导致整个应用崩溃的情况发生。 artTemplate 这一切都在 1.7kb(gzip) 中实现！ javascript 模板引擎基本原理 虽然每个引擎从模板语法、语法解析、变量赋值、字符串拼接的实现方式各有所不同，但关键的渲染原理仍然是动态执行 javascript 字符串。 关于动态执行 javascript 字符串，本文以一段模板代码举例： 这是一段非常朴素的模板写法，其中，”" 为 closeTag (逻辑语句闭合标签)，若 openTag 后面紧跟 “=” 则会输出变量的内容。

javaScript 在生成各种页面内容时如果能结合一些模板技术，可以让逻辑和数据之间更加清晰，本文介绍 X 款 JavaScript 的模板引擎。（排名不分先后顺序） 1. Mustache 基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用! 2. EasyTemplate 在使用过 Freemarker 模 板后，感觉它的 语法比较朴实，平易近人，容易上手，于是决定按它的语法风格实现一个前端的 模板引擎，这就有了下面的EasyTemplate! EasyTemplate模板的函数大小为1.34k（未压缩），暂时只实现了 list，list index，if elseif else等功能，应该可以满足大部分的使用需求了。 EasyTemplate模板 引擎的解析速度测试，渲染1000行数据，在不同的浏览器中，平均速度大约在30豪秒以内（测试机器性能较弱）。 3. jSmart jSmart 是著名的 PHP 模板引擎 Smarty 的 JavaScript 移植版本。 4. Trimpath Trimpath JavaScript 是个轻量级的，基于JavaScript的，跨浏览器，采用APL/GPL开放源代码协议的，可以让你轻松进行基于模板编程方式的纯JS引擎。新浪的评论系统使用的就是此模板。