雨夜带刀's Blog

Handlebars 和 SeaJS 的结合使用

Handlebars 是一款语义化的模板引擎,其模板语法就像是在写普通的 HTML 代码,并且在性能方面也表现优秀。本文将介绍 Handlebars 如何结合 seajs 来使用。

模板引擎的编译和预编译

开发者用语义化的代码编写好模板,然后将编写好的模板再进行编译,这个编译环节是必不可少的。服务端的模板也同样需要编译,只是这个编译环节是在服务器上进行的。

前端模板引擎要么是直接在浏览器中进行编译,要么就先将模板进行预编译,预编译的代码是可以直接放到浏览器中运行的。在浏览器中编译就意味着会有一些编译时的性能开销,如果要追求前端性能的话,肯定是使用预编译好的模板。

Handlebars 提供了支持编译和不支持编译的 2 种版本,不支持编译的 runtime 版本只能运行预编译好的模板,而 runtime 版本的库文件理所当然要小得多。

在开发环境中,要确保开发方便,引用的是支持编译的库文件,而在生产环节中,模板经过了预编译,此时引用的是 runtime 版本。

将模板文件模块化

模板可以通过 script 标签插入至页面中,但是这种使用方式很不灵活,可以将模板单独编写成一个独立的文件,然后使用 seajs 把模板文件当作一个模块来进行加载,这样开发和预编译就方便了。

假如有一个 a.tpl 的模板文件,其中包含的就是模板内容:

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

上面的文件不是一个 JS 文件,针对这种文件的加载,seajs 有专门的 seajs-text 插件来实现。

同源策略的限制

但是在加载非 JS 的文本文件时,就只能使用 Ajax 来进行加载,而使用 Ajax 就会受同源策略的限制。

跨域的问题可大可小,在开发环境中,页面域名和静态资源的域名是同一个的话那么就根本没有这个烦恼。又或者是只在高版本浏览器中测试,可以通过在服务端设置 Access-Control-Allow-Origin 的响应头来解决。

我们的团队在开发时不光是跨域的,还得兼容低版本浏览器,并且还是跨多个域,环境确实有点复杂。解决办法还是有的,只是比较繁琐。

因为是开发环境,可以将测试的顶级域名都统一,比如页面域名是 a.stylechen.com,而静态资源域名是 b.stylechen.com,那么两个域名的顶级域名是相同的,这就变成了仅仅是跨子域了,这是第一步。

在页面中设置 document.domain 为顶级域名 stylechen.com,在静态资源域名的根目录下放置一个 proxy.html,proxy.html 中也设置同样的 document.domain。使用 iframe 将 proxy.html 插入至页面中。这是第二步。

接下来就是改造 seajs-text 插件,只要是跨域的 tpl 请求,都通过 iframe.contentWindow 下的 XMLHttpRequest 对象来创建 Ajax。这是最后一步。

通过设置同样的顶级域名把问题简化成跨子域,然后使用 iframe + document.domain 来解决跨子域,再对 seajs-text 进行一些改造就能愉快的使用 seajs 来加载 tpl 文件了。

需要注意的是,这只是开发环境的改造,到生产环境中,会将 tpl 合并,这样就没有跨域的烦恼了。

预编译

上面说了一大堆开发环境需要做的事,tpl 在上线的时候是需要经过预编译的,预编译后还会对其进行合并。

在开发的时候,使用 seajs-text 插件来加载 tpl,预编译后,将 tpl 转化成一个 CMD 模块。使用 gulp 的 gulp-handlebarsgulp-wrap 插件轻松搞定。

预编译好后,还需要将编译好的模块进行合并,使用我在之前文章中提到的 gulp-seajs-combo,gulp-seajs-combo 提供了一个使用插件的接口,结合上面提到的2个插件。

var handlebars = require( 'gulp-handlebars' );
var wrap = require( 'gulp-wrap' );

...
seajsCombo({
    plugins : [{
        ext : [ '.tpl' ],
        use : [
            handlebars(),
            wrap( 'define(function(){return Handlebars.template(<%= contents %>)});' )
        ]
    }]
})
...

开发环境和生产环境的区别

综合上面提到的编译和预编译,跨域和不跨域,所以在开发环境引用的库文件和生产环境引用的库文件是不同的。开发环境引用的是带编译功能 handlebars 和 支持跨域功能的 seajs-text,而在生产环境中,引用的是 handlebars-runtime 版和不支持跨域功能的 seajs-text。

统一接口

不同环境引用的不同的 Handlebars 版本,如果模板未编译,需要调用 Handlebars.compile 来对模板进行编译,如果编译过就可以直接执行。那么对于开发者来说,统一 API 接口肯定更人性化,开发者无需过多的关注编译还是未编译。在这里对 Handlebars 增加一个方法,开发者只需统一调用该方法即可,如果拿到的模板未编译,那么就先尝试编译,编译过就直接执行。

Handlebars.compilePlus = function( source, context, options ){
    var html = '',
        template;

    if( typeof context !== 'object' ){
        return html;
    }

    if( Handlebars.compile && typeof source === 'string' ){
        template = Handlebars.compile( source );
        html = template( context, options );
    }
    else{
        html = source( context, options );
    }

    return html;
};
原载于:雨夜带刀’s Blog
本文链接:http://stylechen.com/handlebars-seajs.html
如需转载请以链接形式注明原载或原文地址。

“Handlebars 和 SeaJS 的结合使用”目前一条评论

发表评论:

  • *
  • *
头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。