基于Handlebars的最新版本实现Handlebars的预编译

2015-07-15 11:47 稿源:极客标签  1条评论

至于Handlebars是什么东东,这里就不做过多解释,可以参照本站课程学习恶补。。。。

Handlebars入门课程传送门:http://www.gbtags.com/gb/gbliblist/7.htm

今天我们着中讲下如何预编译Handlebars模板,众所周知,如果在运行时去编译一些东西是非常影响性能的,Handlebars同样如此,如果每次都在加载页面的时候,在js中通过Handlebar.compile(template_source)的话,如果模板简单就不说了,如果模板非常复杂,夸张点说,让客户端的浏览器未响应也不是不可能。

好了,闲扯淡到此为止,开始动手。

从Handlebars的官网http://handlebarsjs.com/precompilation.html 我们可以了解到,要实现Handlebars的预编译非常简单,只需要通过npm 安装他的npm包就可以了 npm install -g handlebars  (啥?npm不知道是啥?好吧,自行百度/google) .

这时候,handlebars的模板也不用再像入门教程中写的那样通过script标签嵌在Html的页面中了,我们需要把对应的模板写在对应的模板文件里面,handlebars的模板文件就是以.handlebars扩展名结尾的文件。比如有如下文件

sample.handlebars

其内容如下:

<divclass="container">

<divclass="row">

<divclass="col-sm-2">名字

<divclass="col-sm-10">{{name}}

</div>

</div>

Note: 这时候,模板内容就不用再包含在script标签中了。

然后只要在命令行如下命令即可 handlebars sample.handlebars -m -f  sample.hbs.js

这里我们对handlebars的命令做下简单的介绍,具体的可以参考github上的 https://github.com/wycats/handlebars.js/  

Precompiling Templates

sample.handlebars 是输入源 文件,也就是我们写的模板文件

-m  参数是把预编译后压缩文件

-f   制定输出文件路径

sample.hbs.js  就是-f参数制定的输出文件

到此,Handlebars的预编译过程就完成了,我们可以通过在html中引入handlebars.js 和预编译后的sample.hbs.js我们就可以尽情的使用预编译后的模板了!!!!

那到底怎么使用这个预编译后的模板呢?

要想清楚怎么使用,我们就应该先了解这个预编译到底做了什么,其实也没有什么神秘的,预编译就是在Handlebars这个对象的templates对象中加入了我们编写的sample.handlebars文件同名的一个对象,这样我们就可以再我们的代码中通过Handlebars.templates.sample(contex,options)来调用我们定义的模板了。

到此这篇文章本来就可以结束了,但是,我们上面引用的是handlebars.js这个文件,这个文件未压缩的情况下有140K,官方给出了另外一个可以进一步节约带宽,而且更加适合移动端加载的方案,那就是使用体积更小的runtime文件,也就是handlebar.runtime.js这个文件,这个文件在未压缩的情况下也只有24K,但是官方并没有给出这个文件,需要我们自行build handlebars的工程来获得。

查看gibhub上Handlebars的工程结构我们可以了解到,他的工程是通过node+grunt来构建的,这样我们就只需要通过grunt 命令来build下就可以了。(啥?node和grunt不知为何物?好吧,百度/google自行学习之)

1. 首先从github上把handlebars的工程check out出来,这个就不多说了

2. 在检出的工程更目录下打开命令行 执行npm install 这个就是把配置在package.json中的依赖下载到工程中

3. 上述工作完成后,我们可以检查下Gruntfile.js中有哪些task,当然我们的目标是去查找有没有build这样的task, 找到后,在命令行中输入grunt build ,当看到Done ... 这样的字样时,OK, 大功告成!

4. 编译结束后,我们就可以再dest 目录中看到handlebars.runtime.js这个文件了。

好了,得到runtime文件后,我们就可以替换上面中的handlebars.js了。

至此完美收笔。

尊重笔者知识,转载请注明出处:http://www.gbtags.com/gb/share/5764.htm 

有好的文章希望站长之家帮助分享推广,猛戳这里我要投稿

相关文章

相关热点

查看更多