转载

avalon2的后端渲染实践

avalon2为了提高性能，采用全新的架构，四层架构，其中一层为虚拟DOM。

avalon2的后端渲染实践

虚拟DOM的一个好处是能大大提高性能，另一个好处是能过错整描述我们的页面结构。因此在非浏览器环境下，虚拟DOM也能正常运行。并且avalon2自一开始，就努力隔离DOM API。基于这两点，avalon2可以原封不动地运行于nodejs中，进行定义VM，渲染视图等操作。

avalon2的后端渲染实践

vm.$render
serveRender

为简单起见，本文使用koa2做后端框架。koa2是使用es7的async function处理异步，从此告别异步地狱与那些深涩难懂的generators。

就算最新的nodejs6也不支持async function，不过没关系，我们可以使用babel。至于如何用，后面直接给出一个例子。现在我们看一下一些通用的步骤，熟悉了它，你可以将avalon用于koa1, express及其他nodejs框架。

引入最新版 avalon 这里用avalon.modern体积少些
引入avalon仓库下的serve下的文件 serveRender.js
引入你定义VM的文件 (所有DOM操作要在回调里进行,不要出现 window, document, 方便能在nodejs环境中运行) 对你的VM使用webpack进行打包 (目的是处理module.exports, require)
引入你该页面的模板（就是一个普通的HTML文件片段，里面需要用ms-controller，指向你刚才的VM.$id）
将VM与模板放进serveRender方法,得到一个对象,里面包含渲染好的HTML(A) 及一个包括所有模板的对象(B)
创建一个script标签, 里面定义一个avalon.serverTemplates对象, 将B对象赋给它
将上面的标签与A页面, 赋给ctx.body发往前端（或其他可以放送到前端的方法里面去）

//1. 引入avalon
var vm = require('./src/avalon')
//2. 引入avalon的后端渲染器
var serveRender = require('./dist/serverRender')
//3. 当前页面VM
var vm = require('./src/vm')
//4. 当前页面模板
var test = fs.readFileSync('./src/aaa.html', 'utf-8');

//5. 
var obj = serveRender(vm, test)

//6. 
var files = JSON.stringify(obj.templates)
var script = '<script src="./avalon.js"><//script>' +
        '<script> avalon.serverTemplates= ' + files + '<//script>' +
        '<script src="./test.js"><//script>'
//7. render
app.use(async function(ctx){
     await (ctx.body = script + obj.html)
})

这些我已经做成一个例子，放到GITHUB中，大家可以下回来看。

这是后端返回前端的源码，大家可以做得更漂亮些，把head, body, html等标签补上。不过就算你不写，浏览器也会帮你补上的。