handlebars

​ 开发一个页面组件，原本想着本人纯手工撸，通过大大的领导发现有个叫handleBars的模版工具，能够缩小很多开发工作量，于是试了一下，这货色有点老，也有坑，但总体用下来比本人纯手写款式还是香很多。

​ Handlebars是一种简略的模版语言，应用模版和输出对象来生成HTML或者其余文本格式，是个带有嵌入式的handlebars表达式，就相似{{表达式}}，在执行模版时，这些表达式就会被输出对象中的值所替换

1.装置

​ 1.应用Handlebars最快的形式就是cdn

<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script>
  // compile the template
  var template = Handlebars.compile("Handlebars <b>{{doesWhat}}</b>");
  // execute the compiled template and print the output to the console
  console.log(template({ doesWhat: "rocks!" }));
</script>

2.应用npm装置

（1）npm install handlebars

应用webpack进行打包，还须要额定安装包（handlebars-loader 和 handlebars-webpack-plugin）进行配置

const HtmlWebpackPlugin = require("html-webpack-plugin");
const HandlebarsWebpackPlugin = require("handlebars-webpack-plugin");

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.ts",
  output: {
    filename: "handlebars-demo.js",
    libraryTarget: "umd",
    globalObject: "this",
    library: "Demo",
    libraryExport: "default",
  },
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: {
          fix: true,
          formatter: "eslint-friendly-formatter",
        },
      },
      {
        test: /\.hbs$/,
        loader: "handlebars-loader",
        exclude: /node_modules/,
        options: {
          partialDirs: [
            path.join(__dirname, "../src/generatedpartial", "partials"), // partials的门路，注册所有该门路下的代码模块
          ],
          helperDirs: [
            path.join(__dirname, "../src/generatedpartial", "helper"),// helper的门路，注册所有该门路下的代码模块
          ],
        },
      },
     
    ],
  },

  resolve: {
    extensions: [".ts", ".tsx", ".js"],
    alias: {
      "@": path.resolve(__dirname, "../src/"),
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
      // the output file name
      filename: "index.html",
      // inject: "head",
    }),
    new HandlebarsWebpackPlugin({
      htmlWebpackPlugin: {
        enabled: true, // register all partials from html-webpack-plugin, defaults to `false`
        prefix: "html", // where to look for htmlWebpackPlugin output. default is "html"
        HtmlWebpackPlugin, // optionally: pass in HtmlWebpackPlugin if it cannot be resolved
      },
      entry: path.join(process.cwd(), "src", "generatedpartial", "*.hbs"), // 会将generatedpartial目录下的hbs文件输入为html
      output: path.join(process.cwd(), "dist", "[name].html"),
      partials: [path.join(process.cwd(), "src", "partials", "*", "*.hbs")], // 将所有的partials进行转换
    }),
  ],
};

hbs次要蕴含helper和partials两大模块，具体模块用法在接下来具体解说。

（2）操作模版时在对应的js文件中将hbs文件require引入就好

const headerTpl = require("./generatedpartial/head.hbs");
const data={
 title:[{
            label: "demo1",
            type: "",
            key: "demo1",
             }],
 srcAddr:'',
 destAddr:'',
 orderStatus:'',
 demo1:'这是一个demo'
};
const basicMsgWrap = document.createElement("div");
      basicMsgWrap.classList.add("basic-msg");
      basicMsgWrap.innerHTML = headerTpl(data); // data对应的是须要传入的对象
// data外面须要蕴含head.hbs中的字段 

/* head.hbs */
<div class="basic-msg__main"> 
    {{#each title}}
    {{>msg parameter=(lookup .. key)}}
    {{/each}}
  <div class="msg__value">
    <span id="src-short">{{srcAddr}}</span> — <span id="dest-short">
     {{destAddr}}
    </span>
    </div> 
</div>
<div class="basic-msg__status">
  <span class="basic-msg__status__text">
     {{orderStatus}}
  </span>
  </div>

hbs文件看起来和html文件相似，然而外面多了一些特有的语法，具体的语法接下来具体解说。

2.语法详解

（1）partials，代码片段

​ 代码片段顾名思义就是一个某段代码，在编写模版的时候会呈现一些可复用的模块，此时就须要应用块助手，实现编写一次模块，可在多个中央重复使用的目标。

应用代码片段用{{> 代码片段名称 param=data}}，param用于传参

// 注册代码片段
Handlebars.registerPartial('myPartial', '{{prefix}}');
// 应用注册的代码片段
{{> myPartial }}

​ head.hbs中的msg就是已写好的一个代码片段，因为我我的项目用webpack打包，注册代码片段的过程webpack曾经帮忙做了，在代码中就不须要手动进行registerPartial

（2）helper，块助手

​ 块助手实质上就是一些辅助函数，通过块助手代码来调用模板上下文，以此实现在模板中解决渲染逻辑，使模板更加通用化。

// 注册块助手代码
Handlebars.registerHelper("noop", function(options) {
  return options.fn(this);
});

// 自定义的块助手代码 equal.js
// this对应的就是上下文参数，option是默认的参数，option蕴含一个option.fn函数
// 这个函数的意义是v1等于v2时才返回上下文，否则不返回任何值
module.exports = function (v1, v2,option) {
  if (v1 === v2) {
    return option.fn(this);
  }
};
// 应用equal
// 次数如果传入的title等于操作历史时才会走入equal两头的逻辑
{{#equal title '操作历史'}}
     {{>history data=(lookup ../this content)}}
  {{/equal}}

​ 和代码片段一样，用webpack打包之后咱们不须要用registerHelper进行注册，而是间接exports对应函数就好（目前是一个函数一个js模块）

​ 应用块助手用{{#块助手名称 参数1 参数2 ...}}代码块{{/块助手名称}}，块助手代码必须闭环，否则会报错，满足逻辑的代码块将被渲染

（3）内置助手代码

Handlebars定义了几个内置的助手代码，方便使用，接下来简略介绍一下

• if

  依据条件渲染代码块，如果参数返回false，undefined，null，””，0或者[]时，该代码块将不会被渲染

  {{#if 0 === 1}}<div>我永远不会被渲染</div>{{/if}}

• unless

  和#if相同，当表达式返回false时渲染代码块{{#unless 0 === 1}}<div>我会被渲染</div>{{/unless}}

• each

  遍历列表，能够应用this来援用被迭代的元素{{#each title}}{{this.key}}{{/each}}

  假如title是个对象数组，此时渲染进去的就是每个对象中key的值，若title是head.hbs中的title，此时this.key === 'demo1'

  在each中还提供了一个else，该代码块只会在列表为空时显示

  {{#each paragraphs}}<p>{{this}}</p>{{else}}<p class="empty">No content</p> {{/each}}

  当遍历 each 中的我的项目时，你能够抉择通过 {{@index}} 援用以后循环的索引。

  对于对象迭代，能够应用 {{@key}} 援用以后的键名，通过 @first 和 @last 变量记录迭代的第一项和最初一项，要拜访父级的索引，能够应用 {{@../index}}

• with

  更改上下文表达式，就是说#with前面的参数就能够做为#with内容中的this，这个对于多重嵌套的模板非常好用，嵌套档次很深的时候，就不再须要a.b.c.d这种模式进行数据援用

  `{{#with city as | city |}}
  {{#with city.location as | loc |}}

  {{city.name}}: {{loc.north}} {{loc.east}}

  {{/with}}
  {{/with}}`

  其中as用于给对应的参数取别名，取别名之后就能够应用别名进行援用了

  each也能够应用{{else}}

• lookup

  lookup容许应用变量进行动静的参数解析，它的应用办法跟下面的#不一样，是间接应用，相似于函数，动静的参数解析在进行数组索引时非常有用

  const data={
   title:[{
              label: "demo1",
              type: "",
              key: "demo1",
               },{
              label: "demo2",
              type: "",
              key: "demo2",
               }],
   srcAddr:'',
   destAddr:'',
   orderStatus:'',
   demo1:'这是一个demo',
    demo2:'this is demo'
  };
  // hbs代码局部
  {{#each title}}
      {{>msg parameter=(lookup .. key)}}
      {{/each}}

  此时parameter传回的是父级对应的key值的字段对应的值，也就是’这是一个demo’和’this is demo’。

• log

  容许在执行模板时记录上下文的状态

  （4）补充语法

  {{{外面的内容原样输入}}}

3.模板语言的原理（本身了解）

模板语言分为预设解决模块和模板编辑模块两个局部，预设解决模块是预设一些模板的解决逻辑，当零碎遇到这些逻辑时，就会进行相应的解决，比方在解决handlebars时，遇到{{}}时，零碎就会将双括号内的代码辨认为非凡逻辑，进行对应的解决。

一个简略的demo，实现字符串的替换（ps:正则真的很重要）

const mapping = (data)=>({
  title:'test',
  key:'testKey',
}[data])
const demo = text =>{
if(text){
 return text.replace(/\{\{(.*?)\}\}/g, (match, key) => mapping(key)}
}
demo('{{title}}&{{key}}') // test&testKey