Handlebars 和 SeaJS 的结合使用

发表于 5年以前 | 总阅读数：1820 次

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-handlebars 和 gulp-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;
    };