专栏首页编程微刊前端最常用的模板引擎-Handlebars

前端最常用的模板引擎-Handlebars

接触过的模板引擎不算多,只用过jsp和ejs,jsp属于Java语系范畴也不算难,对于大前端来说,Handlebars怎么能够缺席,前端必须掌握技能之一,模板引擎Handlebars。

Handlebars 是 JavaScript 一个语义模板库,通过对viewdata的分离来快速构建Web模板。Handlebars是全球使用率最高的模板引擎,也成为全球最受欢迎的模板引擎,Handlebars模板看起来和HTML一样,只是嵌入了handlebars表达式。

附上参考教程:https://www.jianshu.com/p/2ad73da601fc

优点: 1:使用Handlebars,可以轻松创建语义化模板; 2:可以保证模板加载和运行的速度; 3:基本语法极其简单,使用{{value}}将数据包装起来即可; 4:轻量级,兼容性好;

步骤:

1:使用<script>标签引入handlebars模板:

<!--创建一个模版,id是必须的-->
<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
     
    </div>
</script>

2:在javascript中使用Handlebars.compile编译模板:

 //获取模版里面的内容
    var source = $("#entry-template").html();
    //模版渲染
    var template = Handlebars.compile(source);

3:看一下具体的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdn.bootcss.com/handlebars.js/4.0.6/handlebars.js"></script>
    <title>handlebars</title>
</head>
<body>

<div class="box"></div>
</body>
<!--创建一个模版,id是必须的-->
<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        <h1>{{title}}</h1>
        <div class="body">
            {{body}}
        </div>
    </div>
</script>

<script type="text/javascript">
    //获取模版里面的内容
    var source = $("#entry-template").html();
    //模版渲染
    var template = Handlebars.compile(source);
    //定义数据
    var context = {title: "王小婷的空间", body: "欢迎来到王小婷的世界里"};
    var html = template(context);
    //模版装载到dom节点上
    $(".box").html(html);
</script>
</html>

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery实现下拉框选中对应的div

    这是一个很简单的功能,jquery实现下拉框选中对应的div。 虽然简单但是会在项目之中经常会用到,尤其是统计的时候,按照不同类型或者不同的年月日来选择相对应...

    祈澈菇凉
  • jDate移动端用法

    前面写过选择年月日的方法,其实也可以用在移动端,样式也还算可以,用法与pc端类似;

    祈澈菇凉
  • 从零开始学习React-属性绑定(三)

    前面两节用的是HBuilder编辑器,很多童鞋说Visual Studio Code很好用,确实如此,因为平时开发用习惯了前者,写教程的时候,为了方便大家体验,...

    祈澈菇凉
  • CentOS6.5菜鸟之旅:安装ATI显卡驱动

    一、前言                                       自从安装了CentOS,我的显卡就没消停过,一直在彪高温而且噪音特别大,于...

    ^_^肥仔John
  • 20个高级Java面试题汇总

    这是一个高级Java面试系列题中的第一部分。这一部分论述了可变参数,断言,垃圾回收,初始化器,令牌化,日期,日历等等Java核心问题。

    Java后端工程师
  • JavaScript:string

    JavaScript 的字符串是不可变的(immutable),String 类定义的方法都不能改变字符串的内容,返回的是全新的字符串,而不是修改原始字符串。

    奋飛
  • 【开源游戏/节日】蛋旦很疯狂(新年/元旦专用)

    用户5997198
  • Java日期格式化

    爱撒谎的男孩
  • 20个高级Java面试题汇总

    这是一个高级Java面试系列题中的第一部分。这一部分论述了可变参数,断言,垃圾回收,初始化器,令牌化,日期,日历等等Java核心问题。

    Java团长
  • 20个高级Java面试题汇总

    这是一个高级Java面试系列题中的第一部分。这一部分论述了可变参数,断言,垃圾回收,初始化器,令牌化,日期,日历等等Java核心问题。

    Java后端工程师

扫码关注云+社区

领取腾讯云代金券