chunk-o - A nodejs bigpipe solution
ｃｈｕｎｋ－ｏ为Ｎｏｄｅｊｓ提供异步数据流的bigpipe渲染方案。Ｎｏｄｅｊｓ异步访问数据的方式，非常适合ｃｈｕｎｋ的方式渲染页面。
当服务器向客户端发送一个ＨＴＭＬ页面的时候，先发送缓存中的静态布局，这个响应是接近瞬时的，静态布局内容在服务器启动时已经渲染完毕放在缓存中。然后，服务器会根据代码要求，与数据库或者其他数据操作进行通信，获取数据结果，将数据结果发送到客户端进行渲染。
配置模板缓存，option(tplname, context)指定模板文件相对于View(dirname)中的路径，以及动态数据。context的配置与hogan.js是相同的：
var app = require('express')();
var server = require('http').createServer(app);
var pool = require('mysql').createPool({ database:'test' });
var CHUNKO = require('chunk-o');
var view = CHUNKO.View(PATH.join(__dirname, './tpl/page'));
view
.option('/index.tpl', {
partial: {
header: '/header.tpl',
footer: '/footer.tpl'
},
options: {
css: CO.css('/css/base.css'),
js: CO.js('js/hogan-3.0.2.min.js', 'js/pagelet.js'),
title: 'Title!',
footname: 'Here is footer!'
}
})
.option(...)
.option(...)
;
服务器发送的page内容类似这样的结构，pagelet-list和pagelet-msg指定了需要渲染的pagelet部件：
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link type="text/css" rel="stylesheet" href="/css/base.css"/>
<script src="/js/jquery-1.9.0.js"></script>
<script src="/js/hogan-3.0.2.min.js"></script>
<script src="/js/pagelet.js"></script>
</head>
<div id="pagelet-list"></div>
<div id="pagelet-msg"></div>
<script type="text/javascript">
$('#pagelet-list').on('click', function (e) {
console.log(this.find('li').eq(0).html());
});
</script>
服务器发送的pagelet内容类似这样的结构：
<script>
PAGELET.render('pagelet-list', '/list.tpl', {
list: [
{ name : 1 },
{ name : 2 }
]
});
</script>
服务器发送响应代码如下：
app
.use(CHUNKO.ware(view))
.get('/', function (req, res) {
res
.page('/index.tpl')
.pagelet('pagelet-list', '/list.tpl', function (fill) {
pool.query('SELECT * FROM product', function (err, result) {
fill({
list: result
});
});
})
.pagelet('pagelet-msg', '/msg.tpl', function (fill) {
pool.query('SELECT * FROM msg', function (err, result) {
fill({
msg: result[0]
});
});
})
.pageend();
})
;
hogan.js 模板规则
ｃｈｕｎｋ－ｏ基于hogan.js(mustache)模板引擎，模板规则完全遵循hogan.js。
Step 1 准备page、pagelet模板文件
首先需要准备模板文件. 将page模板文件和pagelet模板文件分别翻放入不同的目录组织。 比如tpl/page和tpl/pagelet。 chunk-o采用的模板引擎是hogan.js。
编写的方式可以参照example/tpl。
Step 2 编译pagelet模板文件，生成pagelet.js
需要指定pagelet模板文件的绝对路径、pagelet.js文件的绝对路径、前端hogan.js依赖路径。
var PATH = require('path');
var CHUNKO = require('../lib/chunk-o');
CHUNKO.compile(PATH.join(__dirname, '/tpl/pagelet'), // pagelet模板目录
PATH.join(__dirname, '/public/js/pagelet.js'), // pagelet.js文件路径
'./hogan-3.0.2.min.js'); // hogan.js依赖路径
Step 3 加载page模板文件
// 指定page模板文件目录
var CHUNKO = require('../lib/chunk-o');
var view = CHUNKO.View(PATH.join(__dirname, './tpl/page'));
// 加入模板文件，并且渲染内容
view
.option('/index.tpl', {
partial: {
header: '/header.tpl',
footer: '/footer.tpl'
},
options: {
css: CHUNKO.css('/css/base.css'),
js: CHUNKO.js('js/hogan-3.0.2.min.js', 'js/pagelet.js'),
title: 'Title!',
footname: 'Here is footer!'
}
})
.option(...)
.option(...)
;
Step 4 以bigpipe方式发送page和pagelet
var express = require('express');
var app = express();
var CHUNKO = require('../lib/chunk-o');
var pool = require('mysql').createPool({});
app
.use(CHUNKO.ware(view))
.get('/', function (req, res) {
res
.page('/index.tpl')
.pagelet('msg', '/msg.tpl', function (fill) {
pool.query('SELECT * FROM msg', function (err, msg) {
fill({
msg: result[0]
});
});
})
.pagelet('list', '/list.tpl', function (fill) {
pool.query('SELECT * FROM msg', function (err, result) {
fill({
list: result
});
});
})
.pageend();
})
;
API
compile(phsource, phtarget, phhogan)
预编译页面局部pagelet部件，生成前端需要的pagelet.js渲染文件。
- phsource : 编译文件目录
- phtarget : 结果文件路径
- phhogan : hogan.js文件路径
var PATH = require('path');
var CHUNKO = require('../lib/chunk-o');
CHUNKO.compile(PATH.join(__dirname, '/tpl/pagelet'), // pagelet模板目录
PATH.join(__dirname, '/public/js/pagelet.js'), // pagelet.js文件路径
'./hogan-3.0.2.min.js'); // hogan.js依赖路径
css(STRING)
转换css为规范的引入。
css('/css/base.css', '/css/btn.css');
// => '<link type="text/css" href="/css/base.css"/>
// <link type="text/css" href="/css/btn.css"/>'
js(STRING)
转换js为规范的引入。
js('/js/jquery.js', 'sync:/js/pie.js')
// => '<script type="text/javascript" src="/js/jquery.js"></script>
// <script type="text/javascript" src="/js/pie.js" async="true"></script>'
Class: View(dirname)
加载并管理页面模板，页面模板会被放入缓存以实现高效的输出。
view.option(pathname, options)
加入页面模板。
view.option('/product.tpl', {
partial: {
header: '/header.tpl',
footer: '/footer.tpl'
},
options: {
title: 'title'
}
});
view.page(pathname)
获取已加入的页面模板。
Class: Stream(view, res)
实现异步流输出pagelet.
stream.page(pathname)
输出页面。
stream.pagelet(id, pathname, callback | options)
输出pagelet.
ware(view)
加装到Express作为中间件使用