关于javascript:入门指南NodeJavaScript中的模板引擎

作者：Janith Kasun
译者：前端小智
起源：stackabuse

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

在本文中，咱们将介绍如何用 Node.js 和Express来应用 Handlebars 模板引擎。还会介绍什么是模板引擎，以及如何应用把 Handlebars 建服 务器端渲染(SSR) web 应用程序。

咱们还将探讨如何应用 Express.js 框架配置 Handlebars，以及如何应用内置helpers 创立动静页面。最初，咱们将理解如何在须要时开发自定义helper ?。

早在上世纪 90 年代，当互联网呈现时，它次要用于迷信目标，比方发表钻研论文，以及作为大学和科学家之间的沟通渠道。那时的大多数网页都是动态的。动态 web 页面对每个用户都是雷同的，不会依据每个用户而扭转，如果要更改页面上的任何内容，都必须手动实现。

在古代世界中，事物的互动性更强，并且为每个用户量身定制。明天，简直每个人都能拜访互联网。当初的大多数 web 应用程序都是动静的。例如，在一些购物网站上，不同用户登录的界面，展现是不一样的，所谓的千人千面。对于每个人来说，页面将遵循雷同的模板(即下面有用户名的间断公布)，然而内容将是不同的 ?。

模板引擎的工作内容：定义展现内容模板，而后依据以后用户和对数据库的查问，用接管到的内容填充模板。

咱们能够在后端和前端应用模板引擎。如果咱们在后端应用模板引擎来生成 HTML，这种形式叫做 服务器端渲染(SSR) ?。

Handlebars 在后端和前端模板中都很风行。例如，风行的前端框架 Ember 就是应用 Handlebars 作为模板引擎。

Handlebars 是 Mustache 模板语言的扩大，Mustache 模板语言次要专一于简略性和最小的模板。

首先，创立一个空文件夹，而后关上终端，而后运行 npm init -y 以默认配置建一个空的 Node.js 我的项目。

开始之前，咱们须要装置所需的 Node.js 库。通过运行以下命令来装置 express 和express-handlebars模块：

npm install –save express express-handlebars

留神:在服务器端应用 Handlebars 时，你可能会应用一个像 express-handlebars 这样的帮忙模块，它将 Handlebars 与 web 框架集成在一起。在本文中，咱们次要关注模板语法，这也是咱们应用 express-handlebars 的起因，然而如果你本人解决模板编译和渲染，还须要看 compilation API reference 对应的文档阐明 ?。

而后，从新创立默认的 Handlebars 目录构造。views 文件夹蕴含所有 Handlebars 手模板：

├── app.js
└── views
    ├── home.hbs
    └── layouts
        └── main.hbs

views文件夹内的 layouts 文件夹将蕴含布局或模板包装器。这些布局将蕴含模板之间共享的 HTML 构造，样式表和脚本。

main.hbs文件是主布局，home.hbs文件是咱们要构建的示例 Handlebars 模板。

在咱们的示例中，咱们应用一个脚本来放弃简略性。首先，在 app.js 文件中导入所需的库:

const express = require('express');
const exphbs = require('express-handlebars');

而后，创立一个 Express app

const app = express();

当初，咱们能够配置 express-handlebars 作为咱们的视图引擎:

const express = require('express');
const exphbs = require('express-handlebars');


const app = express();

app.engine('hbs', exphbs({
  defaultLayout: 'main',
  extname: '.hbs'
}))

app.set('view engine', 'hbs');

默认状况下，Handlebars 模板的扩展名是 .handlebars。然而在这里的设置中，咱们通过extname 标记将其更改为.hbs，因为它更短。

接着，在 main.hbs 布局增加 Bootstrap 脚本和款式：

在 home.hb 增加如下内容：

<h1>Hello World from Handlebars</h1>

在 app.js 中增加对应的路由配置：

app.get('/', (req, res) => {res.render('home');
});

而后，增加如果监听的端口号：

app.listen(3000, () => {console.log('The web server has started on port 3000');
});

这样就能够在控制台中运行 node app.js 启动应用程序。

然而咱们也能够抉择应用诸如 nodemon 之类的工具。应用 nodemon，咱们在改代码时不须要每次都要重新启动服务器，nodemon 会主动刷新服务器。

盘它：

 npm i -g nodemon

装置后，运行：

 nodemon app.js

在浏览器中关上 http://localhost:3000/：

为了展现一些 Handlebars 性能，咱们将构建一个社交媒体类的网站。这里咱们用一个简略的数组来模仿数据库。

将 home.hbs 内容更新成如下：

<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Book Face</a>
</nav>

<div class="posts">
    <div class="row justify-content-center">
        <div class="col-lg-7" style="margin-top: 50px;">
            <div class="card">

                <img src="https://picsum.photos/500/500"
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title"> 此文章由 前端小智 公布 </h5>

                    <ul class="list-group">
                        <li class="list-group-item"> 期待你们的留言 /li>
                        <li class="list-group-item"> 期待你们的留言 </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

下面咱们增加了一个 navbar 和一个帖子的展现内容 card，运行成果如下：

当初，让咱们从页面自身中删除这些硬编码的值，这些值由路由传递进来，在 app.js 中批改如下内容：

app.get('/', function (req, res) {
    res.render('home', {
        post: {
            author: '小智',
            image: 'https://picsum.photos/500/500',
            comments: []}
    });
});

post 对象蕴含 author,image 和comments等字段。咱们能够在 Handlebars 模板应用 {{post}} 来援用这些值：

<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Book Face</a>
</nav>

<div class="posts">
    <div class="row justify-content-center">
        <div class="col-lg-7" style="margin-top: 50px;">
            <div class="card">

                <img src="https://picsum.photos/500/500"
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title"> 此文章由 {{post.author}} 公布 </h5>

                    <ul class="list-group">
                        <li class="list-group-item"> 期待你们的留言 /li>
                        <li class="list-group-item"> 期待你们的留言 </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

成果如下：

因为这里须要一些逻辑判断，即 comments 没数据不显示，咱们看看如何在 Handlebars 模板中应用条件：

<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Book Face</a>
</nav>

<div class="posts">
    <div class="row justify-content-center">
        <div class="col-lg-7" style="margin-top: 50px;">
            <div class="card">

                <img src="https://picsum.photos/500/500"
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title"> 此文章由 {{post.author}} 公布 </h5>
                    {{#if post.comments}}
                    <ul class="list-group">
                    </ul>
                    {{else}}
                    <ul class="list-group">
                        <li class="list-group-item"> 期待你们的留言 </li>
                    </ul>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
</div>

这里咱们的 comments 为空，所以显示了 期待你们的留言。

#if是把 Handlebars 的内置帮忙器。如果 if 语句返回 true，则将渲染#if 块外部的块。如果返回 false，undefined，null，""，0 或[]，则不会渲染该块。

#if仅承受一个条件，并且不能应用 JS 比拟语法（===）。如果须要应用多个条件或其余语法，则能够在代码中创立一个变量，而后将其传递给模板。另外，你能够定义本人的 helper，咱们将在上一节中进行操作。

因为帖子能够蕴含多个评论，因而咱们须要一个循环渲染它们。首先，咱们先增加一些数据：


app.get('/', function (req, res) {
  res.render('home', {
      post: {
          author: '小智',
          image: 'https://picsum.photos/500/500',
          comments: [
            '前端小智一生学习者',
            '前端小智继续分享者',
            '尽管没啥流量，但也心愿你也能保持分享上来，帮忙更多的初学者 ?'
          ]
      }
  });
});

当初，在咱们的模板中，应用 #each 循环遍历它们：

<nav class="navbar navbar-dark bg-dark">
    <a class="navbar-brand" href="#">Book Face</a>
</nav>

<div class="posts">
    <div class="row justify-content-center">
        <div class="col-lg-7" style="margin-top: 50px;">
            <div class="card">

                <img src="https://picsum.photos/500/500"
                    class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title"> 此文章由 {{post.author}} 公布 </h5>
                    {{#if post.comments}}
                    <ul class="list-group">
                      {{#each post.comments}}
                      <li class="list-group-item">{{this}}</li>
                      {{/each}}
                    </ul>
                    {{else}}
                    <ul class="list-group">
                        <li class="list-group-item"> 期待你们的留言 </li>
                    </ul>
                    {{/if}}
                </div>
            </div>
        </div>
    </div>
</div>

在 #each 循环中，能够应用 this 来援用以后迭代中的元素。在咱们的示例中，它援用了一个随后被渲染的字符串

如果 posts 是一个对象数组，你也能够拜访该对象的任何属性。例如，如果有一个人员数组，你能够简略地应用 this.name 来拜访 name 字段。

当初，为咱们的 posts 增加多个数据:

app.get('/', function (req, res) {
  res.render('home', {
      posts: [
        {
          author: '小智',
          image: 'https://picsum.photos/500/500',
          comments: [
            '前端小智一生学习者',
            '前端小智继续分享者',
            '尽管没啥流量，但也心愿你也能保持分享上来，帮忙更多的初学者 ?'
          ]
        },
        {
          author: '前端大智',
          image: 'https://picsum.photos/500/500?2',
          comments: []}
      ]
  });
});

而后，应用 #each 来遍历 posts：

<div class="posts">
    <div class="row justify-content-center">
      {{#each posts}}
        <div class="col-lg-7" style="margin-top: 50px;">
            <div class="card">
                <img src="{{this.image}}" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title"> 此文章由 {{post.author}} 公布 </h5>
                    {{#if this.comments}}
                    <ul class="list-group">
                      {{#each this.comments}}
                      <li class="list-group-item">{{this}}</li>
                      {{/each}}
                    </ul>
                    {{else}}
                    <ul class="list-group">
                        <li class="list-group-item"> 期待你们的留言 </li>
                    </ul>
                    {{/if}}
                </div>
            </div>
        </div>
      {{/each}}
    </div>
</div>

在本文中，咱们介绍了 Handlebars 的基础知识，Handlebars 是 Node.js 和前端 JavaScript 的模板引擎。应用 Handlebars，咱们能够创立在服务器端或客户端渲染的动静网页。应用 Handlebars 的条件，循环，部分和自定义帮忙器性能，咱们的网页将不仅仅是动态 HTML。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://stackabuse.com/guide-…

文章每周继续更新，能够微信搜寻 【大迁世界】 第一工夫浏览，回复 【福利】 有多份前端视频等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，欢送 Star。

关于javascript:入门指南NodeJavaScript中的模板引擎

简介

什么是模板引擎

Handlebars

在 Node.js 中应用 Handlebars

Handlebars 更多功能

向模板传递参数

应用条件

应用循环

总结

交换

Just My Socks（注册教程内含优惠码）

关于javascript:入门指南NodeJavaScript中的模板引擎

简介

什么是模板引擎

Handlebars

在 Node.js 中应用 Handlebars

Handlebars 更多功能

向模板传递参数

应用条件

应用循环

总结

交换

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）