前端模板

在前端,模板和框架是两个不同的概念,模板只是框架的一部分。框架比模板丰富多了。如Angular,react,vue是框架,mustache,jade,handlebars是模板。

前端模板百花齐放,百家争鸣。很多模板根本没有存在的必要。github上有人专门写了一个“templateChooser”,为人们选择模板提供指南。

template-chooser

评价一个模板的好坏,速度根本不是问题,关键在于优雅简洁好用。这么多的模板根本学不完,挑几个大众点的、好用的即可。模板之间的优劣差距也不是太大,不要纠结于到底选哪个。

前端模板分类标准很多:

  • 按照是否需要预编译:jade完全不是html语言,需要编译
  • StringTemplate和DomTemplate:如果之渲染一遍,StringTemplate比较好,如果属性变了,dom也要跟着变,则DomTemplate比较快。

一、mustache:logic-less

mustache是胡子的意思,意指“{{}}”像嘴唇上面的胡子一样。
mustache是非常简单的一个模板,它有各种语言的实现版本。不仅仅可以用于html渲染,也可以用于任何文本文件的模板渲染。
mustache js版

还有一个叫做hogan.js,完全跟mustache是一回事,应该说mustache语法的一种js实现叫做hogan.js

二、handlebars:扩展了的mustache

handlebars是“八字胡”,它兼容mustache,源于mustache。在mustache的基础上,handlebars进行了一些灵活的扩展,使得此模板更好用。

三、twig

twig原本是PHP模板,有人把它改编成了js模板。

四、jade和pug

jade 英[dʒeɪd]
美[dʒed]
n. 玉,翡翠; 翡翠色; 劣马,驽马; [宝] 碧玉;
adj. 玉制的; 翡翠色的; 绿玉色的;
v. (使) 疲; (使) 疲惫不堪; (使) 精疲力尽;

jade是一个软件商标的名字,jade模板库的作者以前不知道,结果现在被迫改名了。因为商标缘故,jade改名为pug,pug是哈巴狗的意思。
jade之于html,犹如yaml之于json。jade完全是一门新的语言,它的编译结果是html。我认为这种方式一点都不好。
jade讲解
Jade —— 源于 Node.js 的 HTML 模板引擎

五、EJS

EJS跟JSP长得太像了,只不过EJS用的是JS语言,JSP中用的是Java语言。
EJS是非常灵活的,却不是一个logic-less模板。

六、dust(尘土)

此开源库现在由领英在维护,领英是一个个人简历网站。
dust在语法上跟mustache、handlebars很像。

dust官方文档

七、jsrender

jsrender跟jquery联系非常紧密,它是jquery的一个插件。
jsrender语法简洁灵活,挺好用的,它充分发挥了js的优势。

官方给出了丰富的实例
http://borismoore.github.io/jsrender/demos/index.html

八、参考资料

一个对前端模板技术的全面总结

原文地址:https://www.cnblogs.com/weiyinfu/p/7610805.html