本文作者:IMWeb 杨文坚 原文出处:IMWeb社区 未经同意,禁止转载
本文会探讨一下Ques的服务器渲染设计方案,实现方案则留给
@袁飞翔
来详解。
Yes,Ques NodeJS服务器渲染本质上为了实现:通过Mark
来实现浏览器渲染
or 服务渲染
的自动切换,即所谓的前后端代码重用(是的,我们野心不仅仅是重用模版而已)。
字符串用于解决服务器渲染输出,DOM操作用于解决浏览器动态渲染。
也就是数据源和数据Filter(或者叫数据Format)并非不能复用,但是应当在后台去统一,而非前端。
也就是Q.js负责模版在浏览器端渲染,Q.tpl负责模版在!How?
实际上DOM Template是轻逻辑型模版,其通过指令
来封装指令,只要实现Q.js中的大部分指令到通用Template的转换,我们便可以做到在服务器渲染,例如q-text
:
<p q-text="msg"></p>
<p q-text="msg"><%- msg %></p>
未来,从浏览器渲染切换向服务器渲染方案只需要:
diy-cgi
组件<diy-cgi></diy-cgi>
DB.extend({
test: DB.graphQL({
// TSQL 前后端复用
query: 'query CoursesQuery {\
courses {\
name\
start\
end\
}\
}',
// 所以Ques会自动将id为recommend的Component转成模版,
// 并进行渲染
renderTo: '#recommend'
})
});
便可完成服务器渲染工作。
由于数据层统一并非易事,所以必然有中间过程,中间过程方案可以参见:https://github.com/miniflycn/Ques/issues/42