Handlebars.js 官网上对预编译1是这样说的：

  1. 你需要安装 Node.js
  2. 你需要在全局环境中，通过 Npm 安装 handlebars 包

然后你就可以通过命令预编译你的 handlebars 模板文件：

$ handlebars <input> --output <output>

假设我有一个模板文件，名称为 person.handlebars，内容很简单，如下：

<table>

    <tr>

        <td>This is {{firstname}} {{lastname}}</td>

    </tr>

</table>

假定编译后输出文件的名称为 person.js2，检查 person.js 文件内容，可以看到，一个 Handlebars.templates 对象下增加了一个 person 属性名：

var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};

templates['person'] = template(function (Handlebars,depth0,helpers,partials,data) {

    ......

之后，我们只要在页面 HTML 页面引用 handlebars.runtime.js、person.js 文件，并且通过 js 传入数据：

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Handlebar.js 模板</title>

</head>

<body>

    <div id="person"></div>

    <script src="js/handlebars.runtime.js"></script>

    <script src="js/person.js"></script>

    <script>

        var compiledTemplate = Handlebars.templates['person'],

        html = compiledTemplate({"firstname": "三", "lastname": "陈"});

        document.getElementById('person').innerHTML = html;

    </script>

</body>

</html>

在浏览器打开 HTML 页面，可以看到最终结果：This is 三 陈。

OK，看完 Handlebars.js 官网提供的纯手工预编译模板的方法后，再来看看 Grunt.js 是怎样全自动预编译模板的。

grunt-contrib-handlebars3

因为是基于 Grunt.js，所以假定环境中已经安装好 Node.js、Npm，grunt 命令也能正常运行。

首先，需要在工作目录下需要安装 grunt-contrib-handlebars 模块：

$ cd myJob

$ npm install grunt-contrib-handlebars --save-dev

安装完 grunt-contrib-handlebars 模块后，我们需要在 Gruntfile.js 文件中加载它：

grunt.loadNpmTasks('grunt-contrib-handlebars');

然后，还是在 Gruntfile.js 文件中，配置预编译任务：

handlebars: { //定义预编译任务

    compile: {

        options: {

            namespace: "JST" //命名空间，这个很重要，后面会提到

        },

        files: [{

            expand: true,

            cwd: 'js/src/handlebars',

            src: '**/*.handlebars', //模板文件

            dest: 'js/dest/handlebars/', //编译后的文件存放位置

            ext: '.js' //编译后的文件格式

        }]

        //如果要把所有模板文件编译到一个 .js 文件，则可以写成：

        //files: {"js/dest/template.js": ['js/src/handlebars/**/*.handlebars']}

    }

}

watch: { //监控文件变化并自动执行预编译任务

    precompile: {

        files: 'js/src/handlebars/**/*.handlebars',

        tasks: ['handlebars']

    }

}

这里，如果等不及 grunt watch，可以先执行 grunt handlebars 命令预编译，得到的 person.js4 文件如下：

this["JST"] = this["JST"] || {};

this["JST"]["js/person.handlebars"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {

this.compilerInfo = [4,'>= 1.0.0'];

......

这个版本跟手工生成的可不太一样。当然，如果想生成与手工一样的结果也很简单，只要把选项中的 namespace 设置为 false。

好了，现在我们的 person 存放的位置变了，不再是之前的 templates['person']，而是 this["JST"]["js/person.handlebars"]5，那么，在 HTML 里，我们的 compiledTemplate 是怎么获取？很简单：

var compiledTemplate = JST["js/person.handlebars"],

这是因为，在 grunt-contrib-handlebars 自动预编译的文件中，this 在浏览器环境下指向 window 对象，所以我们不过是把模板对象存放到一个新的命名空间 JST 下的 “js/person.handlebars” 属性名里，结果是，代码冲突的可能性更小了。

Handlebars.js 预编译(转)的更多相关文章

  1. js预编译

    先来做三个测试 eg1: var a; a = 1; function a() {}; console.log(a); eg2: var a; function a() {}; console.log ...

  2. 关于js预编译以及js文件执行顺序的几个问题。

    关于js的执行原理,除去html页面中直接添加的代码,js代码的放置可以分为两类. //情形a           <script type="text/javascript" ...

  3. JS预编译详解

    我们都知道javascript是解释型语言,执行的特点呢是编译一行,执行一行.按照这个思路有时候我们在运行代码时会有一些令人费解的现象出现.下面我们一起来执行下面三段代码. <script> ...

  4. js预编译的四部曲

    众所周知javascript是解释性语言,主要特点为解释一行执行一行. 而在js运行时会进行三件事:1语法分析  2.预编译  3.解释执行 语法分析会在代码执行前对代码进行通篇检查,以排除一些低级错 ...

  5. js 预编译

    js 运行代码的时候分为几个步骤:语法分析 ==>预编译  ==>解释执行 语法解析:通篇扫描代码,查看语法是否出错 解释执行:读一行 - 解释一行 - 执行一行 预编译执行的操作: // ...

  6. js预编译和函数执行

    javascript 执行过程 1.语法检测(有没有基本的语法错误,例如中文,关键字错误...)2.词法分析(预编译) (1)创建全局GO(global object)对象 (2)对var声明的变量进 ...

  7. js预编译环节 变量声明提升 函数声明整体提升

    预编译四部曲 1.创建AO对象 2.找形参和变量声明,将变量和形参名作为AO属性名,值为undefined 3.将实参和形参统一 4.在函数体里面找函数声明,值赋予函数体 function fn(a) ...

  8. JS预编译过程

    GO和AO 变量的预编译 实例1 console.log(a); var a=1; console.log(a); 实际编译过程: 将a存入预编译对象中,赋值为undefined: 真正的赋值语句当程 ...

  9. Rails : css或js文件无法成功预编译或调用jquery类插件时预编译问题

    调用bootstrap css框架时,将bootstrap文件夹放入 vendor/assets/下 bootstrap文件结构如下:    [shenma@localhost demo]$ ls v ...

随机推荐

  1. [百度地图] 用于类似 DWZ UI 框架的 百度地图 功能封装类 [MultiZMap.js] 实例源码

    MultiZMap 功能说明 MultiZMap.js 本类方法功能大多使用 prototype 原型 实现,它是 ZMap 的多加载版本,主要用于类似 DWZ 这个 多标签的 UI 的框架: 包含的 ...

  2. Spring Tool Suite 创建 SpringMVC+Maven 项目(一)!

    使用Spring Tool Suite 创建 SpringMVC Web 项目,使用Maven来管理依赖! 首先对环境进行必要的配置 1. 配置必要的Java JDK版本! (菜单栏-窗口-首选项.) ...

  3. Ettercap之ARP+DNS欺骗

    1.网络攻击拓扑环境 网关:192.168.133.2 攻击者:192.168.133.128 受害者:192.168.133.137 2.原理讲解 ARP欺骗 简介:ARP(Address Reso ...

  4. async异步注解和aspect切面注解等注解的原理

    在我们使用spring框架的过程中,在很多时候我们会使用@async注解来异步执行某一些方法,提高系统的执行效率.今天我们来探讨下spring是如何完成这个功能的. 1.spring 在扫描bean的 ...

  5. Gentoo rc-update service ‘net.eth0′ does not exist

    最近迷上了Gentoo,并相信以后也会把更多的精力放在Gentoo上,不过Gentoo的安装的过程的确让很多人却步. 本文只提到添加net.eth0到默认的运行级别时一个很小的报错解决. # nano ...

  6. SQL Server 连接池 (ADO.NET) MSDN

    连接到数据库服务器通常由几个需要很长时间的步骤组成. 必须建立物理通道(例如套接字或命名管道),必须与服务器进行初次握手,必须分析连接字符串信息,必须由服务器对连接进行身份验证,必须运行检查以便在当前 ...

  7. 2013 ACM/ICPC 杭州网络赛C题

    题意:驴和老虎,在一个矩阵的两个格子里,有各自的起始方向.两者以相同的速度向前移动,前方不能走时驴总是向右,老虎总是向左.他们不能超出矩阵边界也不能走自己走过的格子(但可以走对方走过的格子).如果不能 ...

  8. SpringBoot修改默认端口号,session超时时间

    有时候我们可能需要启动不止一个SpringBoot,而SpringBoot默认的端口号是8080,所以这时候我们就需要修改SpringBoot的默认端口了.修改SpringBoot的默认端口有两种方式 ...

  9. jquery-css处理

    jquery css处理,包括CSS,位置,尺寸等 一:CSS 使用 说明 例子 css(name|pro|[,val|fn]) 访问匹配元素的样式属性 $("p").css(&q ...

  10. ZCTF-2017 比赛总结

    这次ZCTF办的还是相当不错的,至少对于Pwn来说是能够让人学习到一些东西. 第一天做的不是很顺利,一直卡在一道题上不动.第二天队友很给力,自己的思路也开阔起来了. 关于赛题的优点 我觉得这次的Pwn ...