如何选择Javascript模板引擎(javascript template engine)?
随着前端开发的密集度越来越高,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模版引擎_templateEngine
Surge.js 是新的示例,更快的 Javascript 模板引擎,语法跟 Liquid 和 Django template一样 。Surge.js 会解析 Html 模板中的 JavaScript 函数,编译的函数会被缓存。教程速度测试 V8 Javascript engine 的测试...
Sameera M制造的前端Javascript模板引擎。 CDN 句法 #{varName} 初始化 let data = { word1 : "Hello" , word2 : "World" } let renderer = new Template ( "html" , data ) renderer . init ( ) 模板化 ...
韩语JavaScript模板语言和引擎 。 汉是我妻子的姓,也是我女儿和儿子的名字之一。 汉在汉人拼音中也是华人。 :person_raising_hand: Hanjst的目的是为了停止HTML模板引擎的“重新发明轮子”,尽管这听起来很荒谬...
原文链接:JavaScript template engine in just 20 lines (译者吐槽:只收藏不点赞都是耍流氓) 前言 我仍旧在为我的JS预处理器AbsurdJS进行开发工作。它原本是一个CSS预处理器,但之后它扩展成为了CSS/HTML预...
艺术模板 |art-template是一个简单且超快速的模板引擎,可通过范围内预先声明的技术优化模板渲染速度,从而实现接近JavaScript极限的运行时性能。 同时,它支持NodeJS和浏览器。 。 art-template是一个简约,超快的...
JS模板文字引擎 一个非常基本的,直接使用JS模板文字的模板引擎 为什么 (也称为“模板字符串”)是一种运行嵌入表达式和字符串插值的熟悉且易于使用的方法,这是模板引擎的主要功能。 该库使用传统技术(布局,...
PUG-js-模板引擎javascript模板引擎 :dog_face:文件资料[pug.org] (http://www.smartredirect.de/redir/clickGate.php?...
jSmart-JavaScript中的Smarty模板引擎 jSmart是Smarty模板引擎到Javascript的端口,Javascript是一个JavaScript模板库,它支持模板以及著名PHP模板引擎所有功能(函数,变量修饰符等)。 jSmart完全用JavaScript...
template:轻量级,高性能且运行时的javascript模板引擎
Tickplate-JavaScript的反勾号模板 用法 安装: npm install tickplate 要求: const t = require('tickplate'); 将标签t放在模板字符串之前 例子: const t = require ( 'tickplate' ) ; const data = { hello ...
micro-template 是一个基于 JavaScript 的模板引擎,类似于 embed js。 这受到启发,但具有更高效的功能: 更好的错误消息:在运行时错误中显示行号 支持源映射:在 Chrome 上调试更容易,包括语法错误 测试良好...
A Simple JavaScript Template Engine. Get Started Grammar Evaluate(过程控制) {{ for ( var item in data ) { }} Some code here... {{ } }} Interpolate(输出控制) {{= data.name }} NonEscape(非编码输出...
ES6 Renderer是用于Node和Express应用程序的简单,超快速和可扩展的模板引擎,它使用纯ES6 Javascript语法。 它的工作方式是扫描工作目录中的文件,然后读取文件的内容并将其从纯字符串转换为ES6模板字符串。 ES6...
其目的是向Javascript程序员提供一种使用与服务器端最先进的模板引擎(如Jinja和Mako)一样强大的引擎编写模板的方法。 <% var rows = _.map(_.range(0, 10), function(el) { return _.range(0, 10); });...
用于简单模板引擎 例子 < script id =" search " type =" text/template " > < input type = "text" data-bind = "search" data-action-input = "update" > < ! -- BEGIN result : loop -- > ...
速度 节点速度模板引擎。 Node Edition速度模板引擎。0.特点完全实现了速度语法。 查看模板依赖性。...在模块中使用 渲染模板var Engine = require('velocity').Enginevar engine = new Engine( {{op
SilverB-代码和文本模板引擎 介绍 SilverB是模板引擎,但用于代码和文本生成,可与一起使用。 过去,我使用PWC测试了一些模板引擎,例如Handlebars,Dot等。 但是这些模板引擎是出于其他目的而制作的(HTML模板),...
用于React的模板引擎,可以渲染Template,Assemble和Verb中的服务器端react模板。 用安装 npm i engine-react --save 用法 var engine = require ( 'engine-react' ) ; 原料药 作者 布莱恩·伍德沃德 执照 版权...
迷你模板引擎。 这是一个小型简单的模板引擎。 它只是用传递给函数的对象替换变量占位符。安装 npm install -- save mini - template - engine句法 var template = require ( 'mini-template-engine' ) ;template ( ...