KissyCake - Speaker Deck

Slide 1

Slide 1 text

From Pie to Cake ⺫⽬目录规范的设计思路 13年5月30⽇日星期四

Slide 2

Slide 2 text

本次分享涉及到的 • 代码组织 • 可重⽤用 • 可维护 • 代码构建 13年5月30⽇日星期四

Slide 3

Slide 3 text

新发布机制 • KISSY Pie 之前是⽤用时间戳⺫⽬目录的⽅方式解决不覆盖的问题 • 新发布机制每次发布⽣生成⼀一个新的Tag，发布不能覆盖 13年5月30⽇日星期四

Slide 4

Slide 4 text

http://a.tbcdn.cn/g/ {group}/{repo}/{tag}/xxx.js 格式 x.x.x 不能覆盖发布新发布机制 13年5月30⽇日星期四

Slide 5

Slide 5 text

⻚页⾯面模块 13年5月30⽇日星期四

Slide 6

Slide 6 text

KISSY Cake 多⻚页⾯面*的应⽤用 home list detail 13年5月30⽇日星期四

Slide 7

Slide 7 text

给⻚页⾯面添加版本 home V1 13年5月30⽇日星期四

Slide 8

Slide 8 text

常⻅见的⼏几个场景 • 只需⽇日常维护 • 重⼤大改动，改版升级 • 两者同时进⾏行 13年5月30⽇日星期四

Slide 9

Slide 9 text

+ + + + V2 常⻅见的⼏几个场景在原有代码上修改项⺫⽬目，或⼤大的改版⽇日常与项⺫⽬目同时进⾏行 V1 13年5月30⽇日星期四

Slide 10

Slide 10 text

Page⺫⽬目录 KISSY的包⺫⽬目录⻚页⾯面的版本⺫⽬目录锁⺫⽬目录下的第⼀一层⽂文件是⼊入⼝口⽂文件⾮非根⺫⽬目录⽂文件是锁内模块，只能被当前锁内⽂文件引⽤用 13年5月30⽇日星期四

Slide 11

Slide 11 text

模块 13年5月30⽇日星期四

Slide 12

Slide 12 text

模块 • JS：KISSY 模块，⾮非 KISSY 脚本 • 样式：CSS，Sass，Less • HTML： Kissy Template, KISSY XTemplate 13年5月30⽇日星期四

Slide 13

Slide 13 text

模块与⻚页⾯面 utils page mods 13年5月30⽇日星期四

Slide 14

Slide 14 text

各种模块的关系 page utils 通⽤用复杂 widget 13年5月30⽇日星期四

Slide 15

Slide 15 text

模块对⽐比 • page mod: ⼀一个⻚页⾯面独享的模块⽐比如：⻚页⾯面独享的业务逻辑 • utils mod: 多⻚页⾯面共⽤用，基础性的，只能被间接使⽤用的，本⾝身不打包⽐比如：埋点模块，统⼀一的数据处理，通⽤用的业务逻辑，基础样式库等 • widget: 复杂，独⽴立模块可以被懒加载，可实现单独的功能，⽐比如投票箱，侧边栏等 13年5月30⽇日星期四

Slide 16

Slide 16 text

Utils ⺫⽬目录 13年5月30⽇日星期四

Slide 17

Slide 17 text

Widget ⺫⽬目录每个widget 模块，放在单独⽂文件夹下⼊入⼝口⽂文件 13年5月30⽇日星期四

Slide 18

Slide 18 text

Common ⺫⽬目录 13年5月30⽇日星期四

Slide 19

Slide 19 text

整体⺫⽬目录结构 13年5月30⽇日星期四

Slide 20

Slide 20 text

整体架构 13年5月30⽇日星期四

Slide 21

Slide 21 text

Kissy Pie 的架构 use Page Common Utils 13年5月30⽇日星期四

Slide 22

Slide 22 text

Kissy Cake 优化后 13年5月30⽇日星期四

Slide 23

Slide 23 text

Kissy Cake的架构 use Common Utils Widget Page 13年5月30⽇日星期四

Slide 24

Slide 24 text

四类核⼼心⺫⽬目录说明说明 page common widget utils ⻚页⾯面层级的资源应⽤用层级可直接引⽤用的通⽤用资源应⽤用层级的组件应⽤用层级的基础⼯工具模块 13年5月30⽇日星期四

Slide 25

Slide 25 text

与 KISSY Pie 的对⽐比 • 去掉了时间戳⺫⽬目录 • 根⺫⽬目录添加src 与 build ⺫⽬目录，构建后的代码全部在Build⺫⽬目录⾥里⾯面，源码更干净 • 所有⻚页⾯面从根⺫⽬目录移⼊入 src/pages ⺫⽬目录，结构更清晰 • 添加了Widget⺫⽬目录，提供懒加载和负责模块的⽀支持 • ⻚页⾯面版本由 1.0 > 变成 v1 13年5月30⽇日星期四