1212不一样的淘

Transcript

1. 不一样的淘 那些年，我们一起看的标签 邦彦、正豪 1212
2. 邦彦 标签会场页
3. 页面定时跳转和切换 领导说：每天开放一个会场！
4. 啪！丢过来一个时间表 会场定时切换时间排期 12.3~12.5 12.6 12.7 12.8~12.9 12.10 12.11 敬请期待 生活会场 新会场 特色会场 爷们会场 美丽会场
5. 还有这些页面… 1212.taobao.com 红包秒杀 12.1~12.2 12.3~12.5 12.6 … 12.11 12.12 预热页 1 预热页 2 生活会场 … 美丽会场 各个会场随机轮换 10:30 12:30 15:30 20:30 22:30 30/100/300 元 30 元 30/100/300 元 30/100/300 元 30 元
6. 解决方案 a 发布选项设定定时发布 / 定时刷新版本
7. 方案 a 的问题 需要人肉维护页面 时间控制不精确，存在提前或延迟的风险
8. 解决方案 b 时间控制函数 + include + header 302 方法 功能 is_date 判断是否某个日期 is_before 判断是否某个日期之前 is_after 判断是否某个日期之后 in_period 判断是否在时间段内，包含起始日期 date.php - http://www.taobao.com/go/rgn/market/docs/date.php
9. 注意事项 1 多重 302 重定向，存在浏览器缓存的风险 先： A->B->C ，后： A->B->D 而 A->B 的 302 有可能被缓存，导致无法重定向至 D => 避免滥用 301/302 入口页面 （ A ） 中转页面 （ B ） 目标页面二 （ D ） 目标页面一 （ C ）
10. 注意事项 2 使用 include_once 代替 include 定义 PHP 类或函数时，使用 class_exists 或 function_exists 检测存在情况 => 避免 PHP 语法类问题
11. 标签会场 DPL 页面相关 使用 DPL 开发模块、搭建页面
12. 不敢相信的爽！ 使用 PHP 标签挖坑 ⇒ 便于开发和语法检测 DPL 模块 + 普通区块 ⇒ 更加灵活可控 模块随意调换位置 ⇒ 哪个流量高，哪个排前面
13. 性能也就这么个情况 标签图片可选懒加载（ dataLazyload ） 极端情况下的纯文本模式预案
15. 随机版式 & 编辑模式
16. 标签详情页 正豪
17. 页面概况 • 组成 – 标签栏 – 宝贝列表区 – 右侧导航条 – 第三方区块 • 其它 – 5 套皮肤 – 22 张个性化标签页 标签栏 宝贝列表区 右 侧 导 航
18. 开发环境 • IntellJ idea 11.3 • Plum • KISSY Pie
19. 皮肤 • 5 套主题皮肤 • 页面按模块划分
20. 使用 LESS • 模块结构 布局结构相关的样式 • 模块皮肤 皮肤变化相关的样式 • 皮肤变量 引用定义皮肤相关变量并引入模块皮肤 • 模块汇总 引入模块结构及各皮肤变量
21. LESS 组织结构 模块结构 （ tag.less ） 模块皮肤 （ tag-change.less ） 皮肤变量二 （ tag-xin.less ） 皮肤变量一 （ tag- shenghuo.less ） 模块汇总 （ tag-shenghuo.less ） 皮肤变量三 （ tag-meili.less ） 皮肤变量四 （ tag-yemen.less ） 皮肤变量五 （ tag-tese.less ）
22. 标签栏 + 侧边栏 • TMS 维护 – 便于视觉调整间距微调，个性化标签链接维护 – TMS 编辑环境检测
23. 标签栏 + 侧边栏 • 引入 – 使用标签 ID 命名文件 – 第三方通过标签 ID 引入对应文件 • 点亮 – input + URL 反射
24. 性能优化 • 异步加载 + 分批渲染 • 延迟加载第三方模块（圈子 , 聚划算 )
25. 懒加载 初始宝贝状态 加载： 40 个；渲染： 8 个 异步加载 1 加载： 40 个；渲染： 8 个 异步加载 2 加载： 40 个；渲染： 8 个 分页条 第三方区块（圈子，聚划算）
26. 自定义 KISSY DOM 事件 MOD2 MOD3 MOD4 MOD1 MOD5 浏览器可视区
27. QA  谢谢