zoukankan      html  css  js  c++  java
  • 前端模板

    在前端,模板和框架是两个不同的概念,模板只是框架的一部分。框架比模板丰富多了。如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

    八、参考资料

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

  • 相关阅读:
    接口(interface)的使用于注意事项
    构造方法
    MySQL数据库软件
    final与static的作用
    区分like和in
    list,set,map各有什么异同?
    简述 Overload 与 Override
    标识符的基础知识
    类的继承关系
    MySQL常见索引失效
  • 原文地址:https://www.cnblogs.com/weiyinfu/p/7610805.html
Copyright © 2011-2022 走看看