成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Handlebars模板部署時發(fā)布為預編譯過的模板函數(shù)

SnaiLiu / 2507人閱讀

摘要：靜態(tài)模板文件的內(nèi)容，如模板等，多為字符串，如果直接部署上線，則需要在線上實時編譯，引入的模板引擎也需要包含編譯的部分。如果部署時之前先進行模板預編譯，則模板文件內(nèi)容為一個預編譯后生成的模板函數(shù)。使用進行預編譯，有幾種方式。

靜態(tài)模板文件的內(nèi)容，如 Handlebars模板等，多為字符串，如果直接部署上線，則需要在線上實時編譯，引入的模板引擎也需要包含編譯的部分。

如果部署時之前先進行模板預編譯，則：
1. 模板文件內(nèi)容為一個預編譯后生成的模板函數(shù)。
2. 線上的性能更高，因為不再需要實時編譯模板。
3. 引入的模板引擎更精簡，可以將編譯的部分功能去掉。

使用 Handlebars 進行預編譯，有幾種方式。

首先需要安裝 nodejs

具體安裝方式可去官網(wǎng)查找，現(xiàn)在 Mac 和 Linux 版也有編譯過的 Binaries 文件，不必下載源碼編譯安裝，設(shè)置一下 PATH （增加一條，指向 $node_root/bin/），NODE_PATH （指向 $node_root/lib/node_modules/） 變量即可，非常方便。

安裝 Handlebars

npm install -g handlebars 根據(jù)情況決定是否安裝到全局。

編譯模板文件

按照 Handlebars 官網(wǎng)的說法，只需：handlebars -f 即可。

但是這種方式局限性非常大。
1. 必須在命令行直接使用 handlebars 命令，不太容易配合 build 工具
2. 生成的編譯后的模板內(nèi)容（函數(shù)），被直接賦值給了 Handlebars.templates 字典，且 key 被設(shè)置為 文件名 ，而非 路徑名 或 模塊名，容易 命名沖突！這樣的話，需要后期自己處理。
這樣一來，頁面的引用方式會有較大變化，即：

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

變?yōu)椋?/p> 

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"));
// 根據(jù)情況 可以將內(nèi)容先轉(zhuǎn)換為 seajs 模塊，再 writeFile
var content = "define("xx/id",[],function(){return " + compiledFn + "});";
fs.writeFileSync("path/to/dest/tpl.tpl.js", content);

然后再引用的地方只需將 Handlebars.compile 改為 Handlebars.template 即可（根據(jù)情況，require 的路徑做相應調(diào)整）：

var a,b, tpl = require("./path/to/tpl.tpl.js");
var tpl = Handlebars.template(tpl);
下面舉一個實例來演示：

開發(fā)時的結(jié)構(gòu)可能如下（假設(shè)與 seajs 配合）：

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

index.html 內(nèi)容如下：

...
seajs.use("./index");
...

index.js 內(nèi)容如下：

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 內(nèi)容如下：


    
{{Title}}

部署時，運行上面提到的 compile.js，之后：
index.html 不變，index.js 內(nèi)容：

...
// 其實這里已經(jīng)是編譯后的函數(shù)了，而非 String
var tplStr = require("../tpl/index.tpl.js");
var tplFn = Handlebars.template(tplStr);
...

index.tpl.js 內(nèi)容如下：

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 += "

  
";
        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)
          + "


";
        return buffer;
  }
});

轉(zhuǎn)載請注明來自[超2真人]
本文鏈接：http://www.peichao01.com/static_content/doc/html/Handlebars_precompile.html

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/77994.html

相關(guān)文章

  • 利用 webpack 處理開發(fā)與線上環(huán)境靜態(tài)資源切換問題

    摘要：但在產(chǎn)品模式下，我們非常有必要在的屬性里的里配置一個來變向的為靜態(tài)資源注入版本號，如下，以便上線之后頁面可以引入版本更新后的代碼。通過給靜態(tài)資源注入值來作為版本號的好處主要有兩個實現(xiàn)策略。 前言 webpack，作為一個處理模塊加載、資源依賴管理、構(gòu)建化的工具，已經(jīng)逐漸成為了前端工程化領(lǐng)域的新貴。其創(chuàng)造性的把每個靜態(tài)資源歸為一個 module（模塊）并能被其強大的 loader 所加載...

    RyanHoo 評論0 收藏0

  • Handlebars中文文檔（譯自官方版）

    摘要：使用這段上下文數(shù)據(jù)會得到如下結(jié)果不會再對安全字符串進行編碼。的在模板中可以訪問任何的上下文?？梢酝ㄟ^方法注冊一個。使用這個上下文會得到事實上，可以使用表達式在任何上下文中表示對當前的上下文的引用。 Handlebars 為你提供了一個可以毫無挫折感的高效率書寫 語義化的模板 所必需的一切。 Mustache 模板和 Handlebars 是兼容的，所以你可以把Mustache模板拿來...

    hikui 評論0 收藏0

  • 前端常用插件、工具類庫匯總

    摘要：頁面調(diào)試騰訊開發(fā)維護的代碼調(diào)試發(fā)布，錯誤監(jiān)控上報，用戶問題定位。同樣是由騰訊開發(fā)維護的代碼調(diào)試工具，是針對移動端的調(diào)試工具。前端業(yè)務(wù)代碼工具庫。動畫庫動畫庫，也是目前通用的動畫庫。 本人微信公眾號：前端修煉之路，歡迎關(guān)注 本篇文章整理自己使用過的和看到過的一些插件和工具，方便日后自己查找和使用。 另外，感謝白小明，文中很多的工具來源于此。 彈出框 layer：http://layer....

    GitCafe 評論0 收藏0

  • 如何實現(xiàn)一個腳手架進階版（Vue-cli v2.9學習篇）

    摘要：如果沒有看過之前一篇博客的，或者對的腳手架沒有了解過的同學，推薦先看上一篇如何實現(xiàn)一個簡單的腳手架。它是一個用來構(gòu)建靜態(tài)網(wǎng)站的類庫，也能夠用來對文件進行處理。有任何問題歡迎進行交流。 前言 在之前一篇博客介紹了關(guān)于Node腳手架的一些基礎(chǔ)的知識，這篇博客是在之前的基礎(chǔ)上針對在Node中開發(fā)腳手架中遇到的問題，如： 終端樣式、交互問題 文件處理問題 通過對Vue-cli 2.9.2的...

    thekingisalwaysluc 評論0 收藏0

  • handlebars.js模板引擎

    摘要：基于，可以在中導入模板。利用對象函數(shù)替換對象或者運行函數(shù)支持點語法可以對象等屬性值使用時，直接標簽引入文件。模塊會自動匹配相應的數(shù)值，對象或者是函數(shù)。也可以單獨建立一個模板，或者可以用來唯一確定一個模板，是固定寫法，不可或缺。 前言：常用的末班引擎有很多，但寫法都大同小異。handlebars.js就是一個純JS庫，因此你可以向其他腳本一樣用script包起來。調(diào)用內(nèi)部封裝好的功能。 ...

    SimpleTriangle 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<