译者 jjfat

日期:2012-9-17  来源: GBin1.com

随着前端开发的密集度越来越高,Ajax和JSON的使用越来越频繁,大家肯定免不了在前台开发中大量的使用标签,常见到的例子如下:

你的到了一个JSON对象,如下:

var data={
  email: 'terry.li@gbin1.com,
  gender: 'male' 
}

然后你需要将json数据组织成页面内容,如下:

var email, gender;
email= '<div class="mail">' + data.email+ </div>';
gender= '<div class="gender">' + data.gender + </div>';
$('#contentwrapper‘).append(content).append(gender);

代码执行功能非常简单,将json数据生成web页面中的内容,如下:

<div class="mail">terry.li@gbin1.com</div> 
<div class="gender">Male</div>

如果只是简单代码组合可能还好一些,但是如果页面大量使用类似的结构的话,除非一直是同一个程序员维护,否则后期的管理成本会相对非常的高。

为 了解决这个问题, 我们通常会引入"javascript模板引擎概念“,提到模板,相信大家都不会陌生,如果你开发过服务器端程序,例如J2EE相关技术的话,肯定对于 Freemarker,sitemesh等模板类库非常熟悉,它能够有效的帮助你组织和维护代码结构,提高代码编写效率和降低维护成本。

目前开源的 javascript模板引擎很多,抛给我们的问题是 - 如何选择一个js模板引擎?

为了更好的帮助大家辅助选择 模板引擎,这里推荐一个不错的工具性网站: Template-engine-chooser

打开这个网站后,我们可以看到列出了比较常用的js模板引擎,例如,mustache.js,jQuery之父John 的micorotemplate.js,还有jQuery Tmpl的替代品 - jsrender等等。

在类库列表的左边是一系列的问题,如下:

  • 模板需要在客户端使用还是服务器端?
  • 逻辑复杂程度有多少?
  • 是不是有运行速度要求?
  • 是不是需要预定义的模板?
  • 需要Partials支持吗?
  • 需要DOM结构或者String字符串类型?
  • 除了模板标签,是不是在渲染前后开发语言一致?

如果你也在寻找js模板的话,你肯定也有一些问题,或者就是上面列出的问题里。你只需要针对不同的问题回答:是或者不是,这个工具会自动选择合适的模板。

当然,这里的模板并不是很全,但是包含了比较知名的模板,希望以后它能够添加更多模板选择项。

希望大家喜欢这个工具!如果你有任何问题,请给我们留言!

来源: 如何选择Javascript模板引擎(javascript template engine)?

http://itindex.net/detail/39743-%E9%80%89%E6%8B%A9-javascript-%E6%A8%A1%E6%9D%BF

如何选择Javascript模板引擎(javascript template engine)?的更多相关文章

  1. JavaScript模板引擎Template.js使用详解

    这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下   template.js 一款 JavaScript 模板引 ...

  2. JavaScript模板引擎artTemplate.js——为什么使用模板引擎?

    作为一个工作一年的菜鸟,在公司做了几个外包项目,也接触到了不同形式的web开发.其实也没多少,就是javaweb开发和HTML5移动开发,这两者在页面展示的时候的解决方案还是有所不同的. 1.vo+e ...

  3. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  4. JavaScript 模板引擎实现原理解析

    1.入门实例 首先我们来看一个简单模板: <script type="template" id="template"> <h2> < ...

  5. JavaScript模板引擎

    JavaScript模板引擎实例应用   在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

  6. 探究Javascript模板引擎mustache.js使用方法

    这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...

  7. JavaScript模板引擎实例应用(转)

    本文将举实例向大家讲解几个常用模板引擎的简单使用. 演示地址:模板引擎示例http://demo.52fhy.com/jstemp/ 准备工作 演示数据:blog.json结构: { "li ...

  8. 推荐13款javascript模板引擎

    javaScript 在生成各种页面内容时如果能结合一些模板技术,可以让逻辑和数据之间更加清晰,本文介绍 X 款 JavaScript 的模板引擎.(排名不分先后顺序) 1. Mustache 基于j ...

  9. 最简单的JavaScript模板引擎

    在小公司待久了感觉自己的知识面很小,最近逛博客园和一些技术网站看大家在说JavaScript模版引擎的事儿,完全没有概念,网上一搜这是08年开始流行起来的...本来以为这是很高深的知识,后来在网上看到 ...

随机推荐

  1. 动态定义数组 .xml

    pre{ line-height:1; color:#3c3c3c; background-color:#d2c39b; font-size:16px;}.sysFunc{color:#627cf6; ...

  2. [转] js prototype详解

    JavaScript能够实现的面向对象的特征有:·公有属性(public field)·公有方法(public Method)·私有属性(private field)·私有方法(private fie ...

  3. 为网页设计师准备的30个使用的HTML5框架

    原文地址:http://www.goodfav.com/zh/html5-framework-8189.html 网页设计师在开始使用一些应用程序之前需要考虑几个事实,以确保在应用Web程序框架时,这 ...

  4. dom 优酷得弹出

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 解决Ubuntu系统的每次开机重启后,resolv.conf清空的问题

    问题情况描述如下: 普及知识:   /etc/resolv.conf ,其实是一个Link .它其实指向的是 /run/resolvconf/resolv.conf.  Ubuntu 有一个 reso ...

  6. HDU 2897 邂逅明下 (简单博弈,找规律)

    邂逅明下 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  7. LightOJ 1341 - Aladdin and the Flying Carpet (唯一分解定理 + 素数筛选)

    http://lightoj.com/volume_showproblem.php?problem=1341 Aladdin and the Flying Carpet Time Limit:3000 ...

  8. ZOJ 3596Digit Number(BFS+DP)

    一道比较不错的BFS+DP题目 题意很简单,就是问一个刚好包含m(m<=10)个不同数字的n的最小倍数. 很明显如果直接枚举每一位是什么这样的话显然复杂度是没有上限的,所以需要找到一个状态表示方 ...

  9. 无责任Windows Azure SDK .NET开发入门篇三[使用Azure AD 管理用户信息--3.2 Create创建用户]

    3.2 Create创建用户 [HttpPost, Authorize] public async Task<ActionResult> Create( [Bind(Include = & ...

  10. 集合类 Contains 方法 深入详解 与接口的实例

    .Net 相等性:集合类 Contains 方法 深入详解 http://www.cnblogs.com/ldp615/archive/2009/09/05/1560791.html 1.接口的概念及 ...