npm 包 block-helper 使用教程

简介

在前端开发中，我们经常会遇到要根据一定条件来控制某个区块的显示和隐藏，比如对于一个电商网站，用户登录后可以看到个人中心，未登录时则显示登录按钮等。在这种情况下，我们可以使用 Handlebars.js 模板引擎并借助 npm 包 block-helper 来实现这个功能。

block-helper 的主要功能是提供了一个用于控制块级元素的 helper 函数：{{#block}}...{{/block}}。这个函数接受一个条件表达式作为参数，根据表达式的结果判断是否应该渲染其中的模板内容。

安装

使用 npm 包管理器安装：

$ npm install block-helper

在需要使用的模块中引入：

const blockHelper = require('block-helper');

使用方法

通过模板文件中的 if 条件控制来演示使用 block-helper 的方式：

-- -------------------- ---- -------
-------- --------------
  ---- --------------------
    -- --------------------------------
  ------
----------

-------- ---- -------------
  ---- ---------------------
    -- --------------------
  ------
----------

如果使用了 webpack 或类似的打包工具，也可以使用 import 引入：

import blockHelper from 'block-helper';

接着就可以在模板文件中使用 block-helper 了。注意 isLoggedIn 和 userName 都是 Handlebars 模板中传入的变量。

指南

1. 在应用 {{#block}}...{{/block}} helper 时，传入的第一个参数应该是一个函数，该函数将返回一个 boolean 类型的值，表示当前的条件是否满足；
2. 当传入的函数返回 true 或 'truthy' 值时，{{#block}} helpers 内部的内容将会被渲染；
3. 当传入的函数返回 false 或 'falsy' 值时，{{#block}} helpers 内部的内容将不会被渲染；
4. {{#block}}...{{else}}...{{/block}} helper 也是同样的意思，else 中的内容将会在条件不满足的情况下渲染；
5. block-helper 不能处理复杂的条件逻辑，请确保你的模板变量对该 helper 的条件调用返回了一个简单的 true/false 值。

示例代码

const Handlebars = require('handlebars');
const blockHelper = require('block-helper');

const source = '{{#block (isGoodValue value)}}<div>Good!</div>{{else}}<div>Bad!</div>{{/block}}';
const template = Handlebars.compile(source);

console.log(template({ value: 10 }));

Handlebars.registerHelper('isAdmin', function (context) {
  return context.role === 'admin';
});

const source = '{{#block (isAdmin user)}}<div>Hello Admin!</div>{{/block}}';
const template = Handlebars.compile(source);

console.log(template({ user: { role: 'admin' } }));

结论

在前端开发中，使用 npm 包 block-helper 可以非常方便地控制模板中的块级元素是否显示。因为使用简单、语法简洁，开发人员可以更加方便地进行模板渲染，同时还能有效地提高代码的可读性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66c90