1. 头部渲染策略
头部先出是 Ralltiir Application 的重要功能, 在目标页面仍未获取完成时,利用有限的信息展示目标页面的标题和工具按钮。 本文介绍 Ralltiir 头部的预渲染和替换策略。
1.1. 设计目标
- 支持过渡态、异步渲染、同步渲染之间保持 一致。
- 支持配置左侧返回/主页按钮、标题/副标题、右侧工具按钮。
history.length
允许返回且缺少配置时,渲染返回按钮。
其中 一致 是指在 过渡态与异步渲染之间,浏览器渲染与同步渲染之间 之间不发生跳动。即支持一种配置,使得过渡态展示的头部与实际载入后相同。
1.2. 配置方法
为了满足上述设计要求,Ralltiir Application 的头部有 4 钟配置方法:
- 在 注册 Service 时配置。
- 在 Ralltiir 链接 中配置。
- 在 页面 HTML 中直接编写。
- 通过 view.setData() API 设置。
为方便表述,上述配置方法以 配置X 指代,默认配置称为 配置0。
1.3. 渲染策略
配置0 是指返回按钮的默认配置: .rt-back
中显示 View.backHTML
,这个变量的默认值为:
<i class="c-icon"></i>
这个值可以配置,比如把它设为 Font Awesome 字体库的返回按钮(注意这是全局配置,非页面级别配置):
var service = require('ralltiir-application/service');
service.setBackHtml('<i class="fa fa-arrow-left"></i>');
过渡态
过渡态是指请求已发出但 HTML 仍未取回的状态。这时页面只有头部和 Loading 效果。
此时只存在 配置0,配置1,配置2。按照 2>1>0 的优先级合并后用于渲染。
异步渲染
异步态是指在一次异步渲染中,渲染刚刚结束的状态。
此时存在配置0,1,2,3,它们按照 3>2>1>0 的优先级合并后用于渲染。 后续的交互过程中可能会通过 配置4 进行设置,4 的优先级最高。
同步渲染
同步渲染是指浏览器直接打开某个页面进行渲染,此时 Ralltiir 会完成页面解析和初始化工作。
此时存在配置0,1,3,此时为了避免页面渲染造成视觉抖动,直接按照 3 的配置直接用于渲染。
1.4. 最佳实践
- 如果希望显示一个返回按钮,配置1-3 都不要做(即
head
字段留空)。 - 如果需要指定左上角按钮,配置1 和 配置3 都需要做,而且保持一致。
- 不建议通过 配置4 设置返回按钮 HTML,一定会不一致。
1.5. Tips
- 如果希望返回位置留空,配置1 和 配置3 都应把它的 HTML 设置为
<rt-empty></rt-empty>
。 - 如果希望返回位置设置为返回按钮,可以把 配置1 和 配置3 都留空,或者 HTML 都设置为
<rt-empty></rt-empty>
。