chunk-o

v1.0.1

Published

3 years ago

A nodejs bigpipe solution.

Downloads

0High
0Medium
0Low

tulayang

bigpipe template

chunk-o - A nodejs bigpipe solution

ｃｈｕｎｋ－ｏ为Ｎｏｄｅｊｓ提供异步数据流的bigpipe渲染方案。Ｎｏｄｅｊｓ异步访问数据的方式，非常适合ｃｈｕｎｋ的方式渲染页面。

当服务器向客户端发送一个ＨＴＭＬ页面的时候，先发送缓存中的静态布局，这个响应是接近瞬时的，静态布局内容在服务器启动时已经渲染完毕放在缓存中。然后，服务器会根据代码要求，与数据库或者其他数据操作进行通信，获取数据结果，将数据结果发送到客户端进行渲染。

one two thr

配置模板缓存，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作为中间件使用