资讯频道 → Web前端
阅读更多

4顶
0踩

Web前端

原创新闻 10 个强大的JavaScript / jQuery 模板引擎推荐

2012-04-12 17:29 by 副主编 wangguo 评论(6) 有79803人浏览
JavaScript jQuery 模板引擎 JSON

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

模板引擎是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档。由于在开发过程中，网站或应用程序的界面与数据实现分离，大大提升了开发效率，良好的设计也使得代码重用变得更加容易。

本文整理了10 款基于JavaScript和jQuery的模板引擎，希望能对你的开发工作带来一些帮助。

1. NANO

最简单的jQuery模板引擎，完美实现对JSON的解析。



源码 / 演示

2. The “template” binding

该工具通过渲染模板将相关联的DOM元素组织到一起。



源码 / 演示

3. JsViews

下一代的jQuery模板，交互式数据驱动视图，建立在JsRender模板的基础上。



源码 / 演示

4. JsRender

针对高性能和纯字符串渲染进行了优化，无需依赖DOM和jQuery。



源码 / 演示

5. google-jstemplate

针对Ajax Web应用程序的简单、强健的浏览器端模板处理工具。



源码 / 演示

6. The jQuery Templates Plugin

一个jQuery模板插件，该插件的开发工作目前处于停滞状态。



源码 / 演示

7. jQote2

这是jQote的第2个版本，是基于jQuery的最强大、通用的客户端模板引擎。



源码 / 演示

8. kite

这是一个基于JavaScript的模板引擎。



源码 / 演示

9. mustache.js

基于JavaScript的Logic-less（无逻辑或轻逻辑）模板。



源码 / 演示

10. Tempo 1.7

Tempo是一个微型JSON渲染引擎，允许你使用纯HTML制作数据模板。



源码 / 演示

英文原文：10 JavaScript and jQuery Templates Engines
  • 大小: 60.3 KB
  • 大小: 62.8 KB
  • 大小: 65.6 KB
  • 大小: 69.7 KB
  • 大小: 64.7 KB
  • 大小: 60.6 KB
  • 大小: 92.1 KB
  • 大小: 67.9 KB
  • 大小: 73.4 KB
  • 大小: 57.3 KB
4
顶
0
踩
评论 共 6 条 请登录后发表评论
6 楼 witcheryne 2012-04-13 20:11
aixinnature 写道
mengyancui 写道
witcheryne 写道
mengyancui 写道
干什么用的呢？

velocity, freemarker 了解么?

了解，但他们都是和服务器端交互的啊


原理类似，这个是js端的模板，主要用于拼装html字符，因为直接操作dom效率很低。直接用字符串平html代码很难维护，于是就出来这种模式  模板+json（或其他数据） = html字符串。常用的应用场景就是 ajax从后台取到json数据，然后用模板渲染成html，然后更新

不局限于生成html . 生成各种文本都行.
以mustache为例:

@Log4j
@Getter@Setter
@SuppressWarnings("serial")
@Component("{{actionName}}Action")
public class {{ActionClass}} extends AppAction {

	private String id = null;
	
	private {{ServiceClass}} {{serviceId}} = null;
	
	private {{DomainClass}}{{domainSuffix}} {{domainName}} = new {{DomainClass}}{{domainSuffix}}();

        // ... ...
}
5 楼 aixinnature 2012-04-13 14:42
mengyancui 写道
witcheryne 写道
mengyancui 写道
干什么用的呢？

velocity, freemarker 了解么?

了解，但他们都是和服务器端交互的啊


原理类似，这个是js端的模板，主要用于拼装html字符，因为直接操作dom效率很低。直接用字符串平html代码很难维护，于是就出来这种模式  模板+json（或其他数据） = html字符串。常用的应用场景就是 ajax从后台取到json数据，然后用模板渲染成html，然后更新
4 楼 mengyancui 2012-04-13 13:05
witcheryne 写道
mengyancui 写道
干什么用的呢？

velocity, freemarker 了解么?

了解，但他们都是和服务器端交互的啊
3 楼 witcheryne 2012-04-13 09:49
mengyancui 写道
干什么用的呢？

velocity, freemarker 了解么?
2 楼 witcheryne 2012-04-13 09:49
mustache.js 不错... 国内好像豆瓣再用.

jade, node.js下的express在用,
underscore的template, backbone在用
1 楼 mengyancui 2012-04-12 19:17
干什么用的呢？

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Global site tag (gtag.js) - Google Analytics