译者 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:#1e1e1e; background-color:#d2d2d2; font-size:16px;}.sysFunc{color:#627cf6; ...

  2. Chapter12&Chapter13:程序实例

    文本查询程序 要求:程序允许用户在一个给定文件中查询单词.查询结果是单词在文件中出现的次数及所在行的列表.如果一个单词在一行中出现多次,此行只列出一次. 对要求的分析: 1.读入文件,必须记住单词出现 ...

  3. (转载)OC学习篇之---协议的概念和用法

    在前一篇文章中我们介绍了OC中类的延展,这一篇文章我们在来看一下OC中协议的概念以及用法,协议也是OC中的一个重点,Foundation框架以及我们后面在写代码都会用到. OC中的协议就是相当于Jav ...

  4. 彻底弄懂css中单位px和em的区别(转)

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了e ...

  5. how to install flash

    Choice 1: Install  Flash from Repository: This is fairly simple and easy and should work from most p ...

  6. Hadoop学习笔记(6) ——重新认识Hadoop

    Hadoop学习笔记(6) ——重新认识Hadoop 之前,我们把hadoop从下载包部署到编写了helloworld,看到了结果.现是得开始稍微更深入地了解hadoop了. Hadoop包含了两大功 ...

  7. 《学习OpenCV》练习题第五章第二题abc

    代码: #include <stdio.h> #include <opencv/highgui.h> #include <opencv/cv.h> #include ...

  8. CUDA ---- Hello World From GPU

    本篇博文仅实现hello world,先看到效果,具体细节将在后续博文解释. 准备 如果你是第一次使用CUDA,在Linux下可以使用下面的命令来检查CUDA编译器是否安装正确: $ which nv ...

  9. RFID第二次作业

    1.简述智能卡的发展,以及射频电子标签在其中所处的位置. 智能卡(Smart Card)又称为集成电路卡(IC卡),内部带有微处理器和存储单元等部件. 射频电子标签是一种非接触式的IC卡,是后期发展起 ...

  10. IIS6.0禁止用户下载txt文件

    服务器win2003+IIS6.0,在IIS上限制下载.txt文件,方法比较简单,在IIS的应用程序扩展名映射中为资源扩展名指定一个错误的可执行文件即可. 打开记事本,直接将空内容保存为C:\WIND ...