模板开发初探

正在做的有意义的事

• 服务化–后端技术营造的基石–开放接口–减弱第三方开发的强依赖–前端主动开发可能

• 页面组件化–全新的页面搭建机制–和 v4框架有着很高的契合度

• 独角兽– Style优化的尝试–模板层的按需加载

• 流程优化• ……

简单了解下 vm模板

第一个 Hello world

绑定开发服务器： 10.20.131.8 baike-ui.china.alibaba.com 9001

新建一个 test.vm

可以自己模拟异步接口假数据？？

一个模板片段

Vm模板特点• html语言 +一些特殊的语法标识符

• 基本保持了 html的原汁原味

• 更偏向于前端

• 暂时模板变量引用可能会无所适从？

3个概念• layout

–页面框架• control

–可重用的代码片段• screen

–个性化页面

layout篇

一个产品线的页面框架应该只有几个 !!

等等……

模板层的页面框架 layout

Layout的特性：①公用的产品页面框架，会引入产品公用的 control，如 header、 footer②它和产品级的 js、 css基本保持一致③screen解析先于 layout，这一特性使 layout可以取到 screen中变量④可重用，能代表产品线演化的风格……

模板中 layout现状• Layout的数量：好的产品线，有 30~40个，多的甚至有上百个……• 和曾经的 js、 css一样， v1,v2,v3…v44?• 只有产品级 js、 css，而产品级 layout概念很弱

• Layout正在被滥用，渐渐丢失它原来承载的含义• Layout的混乱甚于单个页面的混乱

• 需要前端参与去改变

合理使用 layout的几个技巧• Layout必须与产品级的 js、 css对应，功能保持一致• 每新增一个 layout，必须在这个 layout中遵循注释规范• 禁止在 layout中增加页面级个性化需求• 现有 layout满足不了开发需求，请按规范整理出 layout，否则 setLayoutTemplate(null)• 有些小范围公用的东西，有个适合的方案 control• 所有 layout调用，推荐使用 setLayoutTemplate(“xx.vm”)的指明调用

• 管理页面框架的调用关系• Layout与产品级的 js、 css三位一体

• 产品线升级，框架替换，无非是新生成一个layout

control篇

一个子产品公用的头部

独角兽带来的契机——模板层的按需加载

自动合并的特性帮我们更好的完成了这一前端的理念

screen篇

• 业务逻辑复杂？– 前端不能回避的问题– 只要有序，复杂并不可怕– 前端了解业务逻辑的机会– 掌握了业务逻辑，前端还有什么做不了的？

前端是模板中页面框架的把控者

• 权限？

• 环境？

• 约定？

• 质量？

• 资源？

前端是应用开发的主力

做更多有含金量的事情

Q&A