构建帮助方法

1、行内 Helper：最终只输出对应数据类型的Helper

/*
公共的Helper自然是写在公共模块下的app.js文件中，以hbs文件为例
先得导入hbs库，也就是handlebars
*/
const hbs = require('hbs');//导入hbs库，扩展handlebars

//注册一个方法名称为 checkEven 的Helper,核实传过来的数据是否为偶数
hbs.registerHelper("checkEven",(num)=>  {
    //去除取余数是否为0，偶数则为0，奇数则不为0
    if (num%2 ==0){
        return true;
    } else{
        return false;
    }
});

//对应模板引擎的调用 @index 为传入到该checkEven的helper方法的参数
{{checkEven @index}}

//也可以这样配置#if方法的使用
{{#if (checkEven @index)}}
{{/if}}

helper传参的方式

//helper的第一种传参
{{testBiography index=@index name=name}}

//接收方法
hbs.registerHelper("testBiography", (data1, data2) => {
    return data1 + data2;
})

//helper的第二种接收方式
hbs.registerHelper("testBiography", (options) => {
    const {index, name} = options.hash;//Es6中的解构赋值
    return index + name;
})

接收到的参数返回值处理

//定义所传的参数为如下
{{testBiography style="color:red" text="name" href="www.baidu.com"}}

//接收helper方法要求返回的值为文本时
hbs.registerHelper("testBiography", (options) => {
    const {style, text, href} = options.hash;
    return `<a style="${style}" href="${href}">${text}</a>`;
})

//接收helper方法要求返回的值为Html时
hbs.registerHelper("testBiography", (options) => {
    const {style, text, href} = options.hash;
    return new hbs.SafeString(`<a style="${style}" href="${href}">${text}</a>`) ;
})

//接收的Helper方法中要求既有html，又包含有文本时,假设传递的text=“<span>name</span>”,而按照要求这都是属于文本，不应该作为html显示时
hbs.registerHelper("testBiography", (options) => {
    const {style, text, href} = options.hash;
    return new hbs.SafeString(`<a style="${style}" href="${href}">${hbs.Utils.escapeExpression(text)}</a>`) ;
})

2、块级的Helper：最终输出的是html/JS/CSS的helper；

对应的应用场景以项目中Jquery的引用为例，在正常情况下，按照之前的写法，我们直接在layout的公共界面上进行引用之后，在其他的界面可以直接进行应用。如下写法，在layout进行jquery文件的引用，在其它界面可以直接调用Jquery的类库进行JS的编写：

当这样写完之后，会发现，页面出现了如下错误，在查看具体的错误时，会发现引用的Jquery文件跑到下面来了导致了加载的顺序倒了，所以没有识别到Jquery。

按照此错误的第一处理办法，直接在index页面的<script> 块的上面进行jquery的再次引用，会发现该错误不存在了，但是会发现我们同时引入了两次jquery文件

应对于此类场景，需要做如下的一个处理，引用块级的helper，直接将index页面的js文件搬到layout页面下的Jquery引用的代码块下面（即将JS块挪到指定的作用域下进行使用）。因此需要如下这样两个helper方法

// 注册扩展代码块helper
const blocks = {};//代码块缓存对象
hbs.registerHelper('extend', function (name, context) {
    // context 是上下文，保存有用方法和数据，最后一个参数永远是context
    let block = blocks[name]; // block用来存放代码块
    if (!block) {
        block = blocks[name] = [];
    }
    // 变异指令中代码块并放入block
    block.push(context.fn(this));
    // 与context.fn()配对还有一个方法
    // context.inverse()
})

//该方法是将块级的JS、html、css等放在指定的位置
hbs.registerHelper('block', function (name) {
    const val = (blocks[name] || []).join('
')
    blocks[name] = [];//清空缓存
    return val;
})

定义好上面的两个方法之后，在调用的时候，具体如下：

//index界面上写的<script>标签需要包在 {{#extend}}的helper中
{{#extend 'jquery'}}
    <script type="text/javascript">
        $(function () {
            $(".remark").click(function(){
                alert("1111");
            });
        })
    </script>
{{/extend}}

//layout界面上的则需要进行指定这段js块代码的具体位置
<script src="/javascripts/jquery.js"></script>
{{{block 'jquery'}}}//指定js块

更改完毕之后运行，即达到了我们想要的效果，对于css、html 的块移动同理

3、引用N多的第三方帮助方法库https://github.com/helpers/handlebars-helpers

在引用的时候，需要注意的，因为是属于第三方的帮助方法库，所以在自己的项目中引用需要做一步转换，之后就可以直接使用了

const helpers = require('handlebars-helpers');//helpers库 
helpers.comparison({handlebars: hbs.handlebars});