KissyCake

目录规范的设计思路 —— 文龙

Transcript

1. From Pie to Cake ⺫⽬目录规范的设计思路 13年5月30⽇日星期四
2. 本次分享涉及到的 • 代码组织 • 可重⽤用 • 可维护 • 代码构建 13年5月30⽇日星期四
3. 新发布机制 • KISSY Pie 之前是⽤用 时间戳⺫⽬目录 的⽅方式 解决不覆盖的问题 • 新发布机制 每次发布⽣生成⼀一个新的Tag， 发布不能覆盖 13年5月30⽇日星期四
4. http://a.tbcdn.cn/g/ {group}/{repo}/{tag}/xxx.js 格式 x.x.x 不能覆盖发布 新发布机制 13年5月30⽇日星期四
5. ⻚页⾯面 模块 13年5月30⽇日星期四
6. KISSY Cake 多⻚页⾯面*的应⽤用 home list detail 13年5月30⽇日星期四
7. 给⻚页⾯面添加版本 home V1 13年5月30⽇日星期四
8. 常⻅见的⼏几个场景 • 只需⽇日常维护 • 重⼤大改动，改版升级 • 两者同时进⾏行 13年5月30⽇日星期四
9. + + + + V2 常⻅见的⼏几个场景 在原有代码上 修改 项⺫⽬目，或⼤大的 改版 ⽇日常与项⺫⽬目同 时进⾏行 V1 13年5月30⽇日星期四
10. Page⺫⽬目录 KISSY的 包⺫⽬目录 ⻚页⾯面的版 本⺫⽬目录 锁⺫⽬目录下的 第⼀一层⽂文件是 ⼊入⼝口⽂文件 ⾮非根⺫⽬目录⽂文件是 锁内模块，只能被 当前锁内⽂文件引⽤用 13年5月30⽇日星期四
11. 模块 13年5月30⽇日星期四
12. 模块 • JS：KISSY 模块， ⾮非 KISSY 脚本 • 样式：CSS，Sass，Less • HTML： Kissy Template, KISSY XTemplate 13年5月30⽇日星期四
13. 模块与⻚页⾯面 utils page mods 13年5月30⽇日星期四
14. 各种模块的关系 page utils 通⽤用 复杂 widget 13年5月30⽇日星期四
15. 模块对⽐比 • page mod: ⼀一个⻚页⾯面独享的模块 ⽐比如：⻚页⾯面独享的业务逻辑 • utils mod: 多⻚页⾯面共⽤用， 基础性的， 只 能被间接使⽤用的，本⾝身不打包 ⽐比如： 埋点模块， 统⼀一的数据处理，通⽤用的业务逻辑， 基础样式库等 • widget: 复杂，独⽴立模块 可以被懒加载， 可实现单独的功能， ⽐比如投票箱，侧边栏等 13年5月30⽇日星期四
16. Utils ⺫⽬目录 13年5月30⽇日星期四
17. Widget ⺫⽬目录 每个widget 模块，放在单 独⽂文件夹下 ⼊入⼝口⽂文件 13年5月30⽇日星期四
18. Common ⺫⽬目录 13年5月30⽇日星期四
19. 整体⺫⽬目录结构 13年5月30⽇日星期四
20. 整体架构 13年5月30⽇日星期四
21. Kissy Pie 的架构 use Page Common Utils 13年5月30⽇日星期四
22. Kissy Cake 优化后 13年5月30⽇日星期四
23. Kissy Cake的架构 use Common Utils Widget Page 13年5月30⽇日星期四
24. 四类核⼼心⺫⽬目录说明 说明 page common widget utils ⻚页⾯面层级的资源 应⽤用层级可直接引⽤用的通⽤用资源 应⽤用层级的组件 应⽤用层级的基础⼯工具模块 13年5月30⽇日星期四
25. 与 KISSY Pie 的对⽐比 • 去掉了时间戳⺫⽬目录 • 根⺫⽬目录添加src 与 build ⺫⽬目录， 构建后的代码 全部在Build⺫⽬目录⾥里⾯面， 源码更干净 • 所有⻚页⾯面从根⺫⽬目录移⼊入 src/pages ⺫⽬目录，结构更 清晰 • 添加了Widget⺫⽬目录， 提供懒加载和负责模块 的⽀支持 • ⻚页⾯面版本 由 1.0 > 变 成 v1 13年5月30⽇日星期四
26. Tools Support 13年5月30⽇日星期四
27. Yeoman + Grunt ⽣生成 打包 13年5月30⽇日星期四
28. ABC UI 13年5月30⽇日星期四
29. ABC UI Grunt Yeoman 13年5月30⽇日星期四
30. Thanks & QA 13年5月30⽇日星期四