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

本文整理了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
干什么用的呢?

发表评论

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

相关推荐

  • 一个jQuery插件用于数据绑定的HTMLRender模板引擎

    a jquery Plus for javascript to DataBind Template HTML Render 模板引擎

  • jQuery模板引擎: jQuery-tmpl 和 JsRender 使用介绍

    jQuery模板引擎: jQuery-tmpl 和 JsRender 使用介绍

  • 基于jQuery开发的javascript模板引擎-jTemplates

    NULL 博文链接:https://karlhell.iteye.com/blog/463833

  • srender:jQuery 模板引擎

    srender jQuery 模板引擎

  • 10个JavaScript和jQuery模板引擎

    今天,我们已经拿出10个JavaScript和jQuery的模板引擎 ,你可能会发现有趣的学习。 请享用。 相关文章: 10个jQuery的布局教程 Sublime2 VS记事本++ 10个随机HTML5的Web工具和资源 1. NANO - jQuery的模板引...

  • 常用的JavaScript模板引擎介绍

    基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用! 2. doT.js doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎。 3. jSmart jSmart 是著名的 PHP 模板引擎 Smarty...

  • jTemplates 基于jQuery的Jvascript模板引擎

    内容索引:脚本资源,jQuery,jTemplates jTemplates是一套用作较广的基于jQuery开发的javascript模板引擎,用它可以配合ASP/PHP/JSP/等众多语言来完成诸如通过JavaScript获取JSON数据、获取一个HTML模板、构建客户端...

  • Juicer – 一个 JavaScript 模板引擎的实现和优化

    本文转载自:淘系前端团队:Juicer – 一个 JavaScript 模板引擎的实现和优化 介绍 让我们从一段代码说起,假设有一段这样的 JSON 数据: var json = { name: '流火', blog: 'ued.taobao.org' }; 我们需要根据这...

  • jqtpl:[不推荐使用]用于nodejs,浏览器和任何其他javascript环境的模板引擎

    适用于nodejs,浏览器和任何其他JavaScript环境的模板引擎。 无逻辑的。 可扩展-实施自己的标签。 HTML默认情况下转义。最初是作为jquery模板的端口开始的。 现在,由于不再开发jquery-tmpl,因此与原始引擎的兼容性...

  • 前端JQuery强大的物理模板引擎

    artTemplate的库分为两种,一个是template.js,一个是template-native.js,第一个是简洁语法版,第二个是原生语法(感觉像JSP)版,两个库的语法是不一样的,注意种类。否则报错。。。。 artTemplate学习网站 ...

  • JavaScript构建自己的模板小引擎示例

    有时候,我们不需要太牛逼太强大的JavaScript模板引擎(比如jQuery tmpl或者handlebarsjs),我们只是需要在简单的模板里绑定一些非常简单的字段,本文将使用非常简单的技巧来帮你实现这个小功能。 首先我们先来定义...

  • 【jquery Ajax 】art-template(ejs)模板引擎的概念与使用

    art-template是一个简约,超快的模板引擎,中文官网首页为首页art-template提供了{{}}这种语法格式,在大括号中可以进行变量输出,或循环数组等操作,这种语法在art-template中被称为标准语法。

  • jquery.tmplate模板引擎使用心得

    jquery.tmpl.js,是与jquey共同使用的html模板插件。该插件可通过简单的语法将数据放入到html模板中,可以很好的将数据渲染到页面上。该插件在本项目中使用较多且网上的讲解比较分散,无系统的api以及使用方法可以...

  • artTemplate.js,前端模板js引用,jquery静态模板

    artTemplate模板引擎是渲染UI界面的一个js文件,artTemplate.js加快开发速度

  • 华为OD机试C卷- 打印任务排序(Java & JS & Python & C).md-私信看全套OD代码及解析

    私信博主免费看所有华为OD真题、考试报告、手撕代码、面试记录

  • 基于Java画图形学程序(源码+使用文档)

    系统概述 图形学程序通常包括以下几个关键组件: 用户界面(UI):提供用户交互界面,展示图形和接收用户输入。 图形渲染模块:负责绘制点、线、多边形等基本图形。 图形变换模块:实现图形的平移、旋转、缩放等变换。 事件处理模块:处理用户的鼠标点击、键盘输入等事件。 数据结构:存储图形的顶点、边等数据。 主要功能 基本图形绘制:绘制点、线段、圆形、多边形等。 图形变换:对图形进行平移、旋转、缩放等操作。 颜色和样式设置:设置图形的颜色和线型。 交互操作:响应用户的鼠标和键盘操作。 图形保存与加载:将绘制的图形保存到文件,并从文件加载。 技术架构 Java:作为主要的编程语言。 AWT/Swing:用于构建图形用户界面。 Java 2D API:用于绘制图形和实现图形变换。 开发优势 跨平台:Java的跨平台特性,使程序可以在多种操作系统上运行。 丰富的图形库:Java提供了丰富的图形库,简化了图形绘制和变换的实现。 社区支持:Java有庞大的开发者社区,提供丰富的资源和支持。 结论 基于Java的图形学程序是一个展示编程技能和图形学概念的好项目,适合作为学术项目或个人兴趣开发。

  • 2024嵌入式面试资料浙江大华(1)

    2024嵌入式面试资料浙江大华(1)提取方式是百度网盘分享地址

  • 2023人形机器人技术专利分析报告.pdf

    2023人形机器人技术专利分析报告.pdf

  • sprinmgboot实习管理系统-论文

    sprinmgboot实习管理系统-论文

Global site tag (gtag.js) - Google Analytics