Handlebars模板布置时宣布为预编译过的模板函数

静态模板文件的内容,如 Handlebars模板等,多为字符串,假如直接布置上线,则须要在线上及时编译,引入的模板引擎也须要包括编译的部份。

假如布置时之前先举行模板预编译,则:
1. 模板文件内容为一个预编译后天生的模板函数。
2. 线上的机能更高,由于不再须要及时编译模板。
3. 引入的模板引擎更精简,能够将编译的部份功用去掉。

运用 Handlebars 举行预编译,有几种体式格局。

起首须要装置 nodejs

详细装置体式格局可去官网查找,如今 Mac 和 Linux 版也有编译过的 Binaries 文件,没必要下载源码编译装置,设置一下 PATH (增添一条,指向 $node_root/bin/),NODE_PATH (指向 $node_root/lib/node_modules/) 变量即可,异常轻易。

装置 Handlebars

npm install -g handlebars 依据状况决议是不是装置到全局。

编译模板文件

根据 Handlebars 官网的说法,只需:handlebars <input> -f <output> 即可。

然则这类体式格局局限性异常大。
1. 必须在敕令行直接运用 handlebars 敕令,不太轻易合营 build 东西
2. 天生的编译后的模板内容(函数),被直接赋值给了 Handlebars.templates 字典,且 key 被设置为 文件名 ,而非 途径名模块名,轻易 定名争执!如许的话,须要后期本身处置惩罚。
如许一来,页面的援用体式格局会有较大变化,即:

var a, b, tpl = require('./path/to/tpl.tpl');
var tpl = Handlebars.compile(tpl);

变成:

require('./path/to/tpl.tpl');
var tpl = Handlebars.templates['tpl.tpl'];

变化太大,很难用自动化的东西还自动转变援用(除非用很强的誊写商定)。

更好的体式格局:
写一段 compile.js 剧本:

var fs = require('fs');
var h = require('handlebars');

var compiledFn = h.precompile(fs.readFileSync('path/to/tpl.tpl'));
// 依据状况 能够将内容先转换为 seajs 模块,再 writeFile
var content = 'define("xx/id",[],function(){return ' + compiledFn + '});';
fs.writeFileSync('path/to/dest/tpl.tpl.js', content);

然后再援用的处所只需将 Handlebars.compile 改成 Handlebars.template 即可(依据状况,require 的途径做响应调解):

var a,b, tpl = require('./path/to/tpl.tpl.js');
var tpl = Handlebars.template(tpl);

下面举一个实例来演示:

开辟时的构造能够以下(假定与 seajs 合营):

__index.html
  |__script
  |  |__index.js
  |__tpl
  |  |__index.tpl
  |__style

index.html 内容以下:

...<scritp>
seajs.use('./index');
</script>...

index.js 内容以下:

define(function(require){
    // 假如没有引入 seajs-text.js 插件,
    // 则:require('../tpl/index.tpl.js');
    var tplStr = require('../tpl/index.tpl');
    var tplFn = Handlebars.compile(tplStr);

    var context = {
        Title: 'Hi, Handlebars!'
    };
    var html = tplFn(context);
});

index.tpl 内容以下:

<div>
    <h1>{{Title}}</h1>
</div>

布置时,运转上面提到的 compile.js,以后:
index.html 稳定,index.js 内容:

...
// 实在这里已经是编译后的函数了,而非 String
var tplStr = require('../tpl/index.tpl.js');
var tplFn = Handlebars.template(tplStr);
...

index.tpl.js 内容以下:

define("id",[], function(require, exports, module){
    // 或 return function (Handlebars, ...
    module.exports = function (Handlebars,depth0,helpers,partials,data) {
        this.compilerInfo = [4,'>= 1.0.0'];
        helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
        var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression;


        buffer += "<div>\r\n  <p>";
        if (stack1 = helpers.Title) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
        else { stack1 = (depth0 && depth0.Title); stack1 = typeof stack1 === functionType ? stack1.call(depth0, {hash:{},data:data}) : stack1; }
        buffer += escapeExpression(stack1)
          + "</p>\r\n</div>";
        return buffer;
  }
});

转载请说明来自[超2真人]
本文链接:http://www.peichao01.com/static_content/doc/html/Handlebars_precompile.html

    原文作者:超2真神
    原文地址: https://segmentfault.com/a/1190000000367035
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞