Handlebars 和 SeaJS 的结合使用
2015-11-02 18:08
465 查看
Handlebars 是一款语义化的模板引擎,其模板语法就像是在写普通的 HTML 代码,并且在性能方面也表现优秀。本文将介绍 Handlebars 如何结合 seajs 来使用。
开发者用语义化的代码编写好模板,然后将编写好的模板再进行编译,这个编译环节是必不可少的。服务端的模板也同样需要编译,只是这个编译环节是在服务器上进行的。
前端模板引擎要么是直接在浏览器中进行编译,要么就先将模板进行预编译,预编译的代码是可以直接放到浏览器中运行的。在浏览器中编译就意味着会有一些编译时的性能开销,如果要追求前端性能的话,肯定是使用预编译好的模板。
Handlebars 提供了支持编译和不支持编译的 2 种版本,不支持编译的 runtime 版本只能运行预编译好的模板,而 runtime 版本的库文件理所当然要小得多。
在开发环境中,要确保开发方便,引用的是支持编译的库文件,而在生产环节中,模板经过了预编译,此时引用的是 runtime 版本。
模板可以通过 script 标签插入至页面中,但是这种使用方式很不灵活,可以将模板单独编写成一个独立的文件,然后使用 seajs 把模板文件当作一个模块来进行加载,这样开发和预编译就方便了。
假如有一个 a.tpl 的模板文件,其中包含的就是模板内容:
上面的文件不是一个 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个插件。
综合上面提到的编译和预编译,跨域和不跨域,所以在开发环境引用的库文件和生产环境引用的库文件是不同的。开发环境引用的是带编译功能 handlebars 和 支持跨域功能的 seajs-text,而在生产环境中,引用的是 handlebars-runtime 版和不支持跨域功能的 seajs-text。
不同环境引用的不同的 Handlebars 版本,如果模板未编译,需要调用 Handlebars.compile 来对模板进行编译,如果编译过就可以直接执行。那么对于开发者来说,统一 API 接口肯定更人性化,开发者无需过多的关注编译还是未编译。在这里对 Handlebars 增加一个方法,开发者只需统一调用该方法即可,如果拿到的模板未编译,那么就先尝试编译,编译过就直接执行。
原载于:雨夜带刀’s Blog
本文链接:http://stylechen.com/handlebars-seajs.html
模板引擎的编译和预编译
开发者用语义化的代码编写好模板,然后将编写好的模板再进行编译,这个编译环节是必不可少的。服务端的模板也同样需要编译,只是这个编译环节是在服务器上进行的。前端模板引擎要么是直接在浏览器中进行编译,要么就先将模板进行预编译,预编译的代码是可以直接放到浏览器中运行的。在浏览器中编译就意味着会有一些编译时的性能开销,如果要追求前端性能的话,肯定是使用预编译好的模板。
Handlebars 提供了支持编译和不支持编译的 2 种版本,不支持编译的 runtime 版本只能运行预编译好的模板,而 runtime 版本的库文件理所当然要小得多。
在开发环境中,要确保开发方便,引用的是支持编译的库文件,而在生产环节中,模板经过了预编译,此时引用的是 runtime 版本。
将模板文件模块化
模板可以通过 script 标签插入至页面中,但是这种使用方式很不灵活,可以将模板单独编写成一个独立的文件,然后使用 seajs 把模板文件当作一个模块来进行加载,这样开发和预编译就方便了。假如有一个 a.tpl 的模板文件,其中包含的就是模板内容:
1 | <div class = "entry" > |
2 | <h1>{{title}}</h1> |
3 | <div class = "body" > |
4 | {{body}} |
5 | </div> |
6 | </div> |
同源策略的限制
但是在加载非 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个插件。
01 | var handlebars = require( 'gulp-handlebars' ); |
02 | var wrap = require( 'gulp-wrap' ); |
03 |
04 | ... |
05 | seajsCombo({ |
06 | plugins : [{ |
07 | ext : [ '.tpl' ], |
08 | use : [ |
09 | handlebars(), |
10 | wrap( 'define(function(){return Handlebars.template(<%= contents %>)});' ) |
11 | ] |
12 | }] |
13 | }) |
14 | ... |
开发环境和生产环境的区别
综合上面提到的编译和预编译,跨域和不跨域,所以在开发环境引用的库文件和生产环境引用的库文件是不同的。开发环境引用的是带编译功能 handlebars 和 支持跨域功能的 seajs-text,而在生产环境中,引用的是 handlebars-runtime 版和不支持跨域功能的 seajs-text。
统一接口
不同环境引用的不同的 Handlebars 版本,如果模板未编译,需要调用 Handlebars.compile 来对模板进行编译,如果编译过就可以直接执行。那么对于开发者来说,统一 API 接口肯定更人性化,开发者无需过多的关注编译还是未编译。在这里对 Handlebars 增加一个方法,开发者只需统一调用该方法即可,如果拿到的模板未编译,那么就先尝试编译,编译过就直接执行。01 | Handlebars.compilePlus = function(source, context, options ){ |
02 | var html = '' , |
03 | template; |
04 |
05 | if ( typeof context !== 'object' ){ |
06 | return html; |
07 | } |
08 |
09 | if ( Handlebars.compile && typeof source === 'string' ){ |
10 | template |
11 | html |
12 | } |
13 | else { |
14 | html |
15 | } |
16 |
17 | return html; |
18 | }; |
本文链接:http://stylechen.com/handlebars-seajs.html
相关文章推荐
- js
- js在网页中判断横屏竖屏
- [转]Web安全之JSP详解
- 利用JavaScript实现的2048游戏
- JS添加tr序号
- C程序员的JavaScript学习笔记
- js根据身份证计算年龄
- js ==与===区别(两个等号与三个等号)
- 深入理解javascript原型和闭包(完结) (超赞)
- 简单的使用jsoup爬取图片
- Ext.encode与Ext.decode的JSON转换
- js数组去除重复方法添加
- JS 实现汉字转拼音
- javascript判断浏览器
- 用nw.js开发markdown编辑器-已完成功能介绍
- 详解Javascript中正则表达式的使用
- js中prototype与Property的用法区别
- jsoup解析HTML
- 一张图解释javascript原型、原型链,对象、原型对象,模拟类,模拟继承。
- JS window.open()