第1页
Build Better Code
重构代码修炼之道
smallniding 2014.10
重构代码修炼之道
smallniding 2014.10
第2页
重构工程师 smallni
丁小倪
TGuide 腾讯互娱重构编码规范
www.smallni.com www.whycss.com
丁小倪
TGuide 腾讯互娱重构编码规范
www.smallni.com www.whycss.com
第3页
现状
第4页
按时完成 拜托拜托，一定要在18号前重构完。
高保真还原 你这做的怎么跟我的设计稿不一样？ 兼容所有浏览器
页面导航在IE6下掉下来了
加载速度快 这网站怎么慢得和蜗牛一样。。
高保真还原 你这做的怎么跟我的设计稿不一样？ 兼容所有浏览器
页面导航在IE6下掉下来了
加载速度快 这网站怎么慢得和蜗牛一样。。
第5页
多人协作
代码规范 代码易读 代码复用 代码易维护
…..
代码规范 代码易读 代码复用 代码易维护
…..
第6页
编码前：还原“活”的设计 编码中：写更优雅的代码 编码后：情怀、代码、人生
第7页
编码前：还原“活”的设计
第8页
PRD 交互稿
PSD
产品经理
视觉设计
重构/前端
PSD
产品经理
视觉设计
重构/前端
第10页
简单的设计稿还原
头像大小？ 玩家等级不是一级
玩家ID名称长度？ 紫钻等级不是二级
点了加关注后的交互
头像大小？ 玩家等级不是一级
玩家ID名称长度？ 紫钻等级不是二级
点了加关注后的交互
第11页
简单的设计稿还原
需要不定期换肤
需要不定期更新 有可能更换
需要不定期换肤
需要不定期更新 有可能更换
第12页
简单的设计稿还原
图片大小？
人数？ 字数？
图片大小？
人数？ 字数？
第13页
1.区分内容是否需要维护 2.确认UI元素组件 （icon、button、标题、列表） 3.确认设计稿中交互是否完整 4.确认固定标题字数、固定图片位大小规范
第14页
编码中：写更优雅的代码
第15页
「什么是优雅？」
第19页
「可读性」
第20页
缩进格式统一
缩进格式杂乱
缩进格式杂乱
第21页
固定单行 模块注释
单行/多行杂乱 没有注释
单行/多行杂乱 没有注释
第22页
命名方式杂乱
命名方式统一
命名方式统一
第23页
让代码看起来更爽
统一代码风格：缩进、单行/多行
!
统一命名规则：英文、统一连接方式
!
适当使用注释：赠人玫瑰，手留余香
统一代码风格：缩进、单行/多行
!
统一命名规则：英文、统一连接方式
!
适当使用注释：赠人玫瑰，手留余香
第24页
「书写效率」
第25页
挥之不去的低版本IE噩梦
第26页
你真的需要兼容所有浏览器吗？
第27页
英雄联盟浏览器分级策略
IE6 IE7 IE8 IE9+
搜狗
QQ Chrome Firefox
webkit IE webkit IE
A
B
C
A：最高级别：高保真的视觉效果 B：中等级别：基本的视觉效果 C：低级别：忽略设计细节，但不妨碍使用
IE6 IE7 IE8 IE9+
搜狗
QQ Chrome Firefox
webkit IE webkit IE
A
B
C
A：最高级别：高保真的视觉效果 B：中等级别：基本的视觉效果 C：低级别：忽略设计细节，但不妨碍使用
第28页
英雄联盟官网浏览器份额占比
37.5
12.5
0 IE6 IE7 IE8 IE9 chrome 其他
37.5
12.5
0 IE6 IE7 IE8 IE9 chrome 其他
第29页
快速编写你的代码 div.mod>(div.hd+div.bd>(ul.list+li*5))
第30页
打造自己的代码库 lg(left, #fff 50%, #000)
clearfix
clearfix
第31页
快速生成页面模版
html:ideas
html:ideas
第32页
「模块化」
第33页
HTML
CSS
CSS
第34页
HTML
CSS
CSS
第35页
HTML
CSS
CSS
第36页
标题 icon
tab切换
tab切换
第37页
你的模块应当尽可能小
第38页
区块
颗粒
模块
颗粒
模块
第39页
icon 标题
icon 公有颗粒
模块
icon 公有颗粒
模块
第40页
公有颗粒
命名： gra-类型-具体
按钮：gra-btn gra-btn-1 标题：gra-title gra-title-1 icon：gra-icon gra-icon-hand …
命名： gra-类型-具体
按钮：gra-btn gra-btn-1 标题：gra-title gra-title-1 icon：gra-icon gra-icon-hand …
第41页
模块
命名： mod-类型-具体
tab切换：mod-tab 资讯模块：mod-info …
命名： mod-类型-具体
tab切换：mod-tab 资讯模块：mod-info …
第42页
区块
命名：
头部：header 底部：footer 轮播：promo …
具体
命名：
头部：header 底部：footer 轮播：promo …
具体
第44页
模块
区块
公有颗粒
区块
公有颗粒
第46页
基础样式（base/layout/font/clear)
comm.css 全站级通用模块
全站级通用公共颗粒
跨页面通用模块
page.css 跨页面通用公共颗粒 页面内通用模块
home.css 页面内通用公共颗粒
页面内样式
comm.css 全站级通用模块
全站级通用公共颗粒
跨页面通用模块
page.css 跨页面通用公共颗粒 页面内通用模块
home.css 页面内通用公共颗粒
页面内样式
第47页
「友好度」
第48页
性能 考虑用户打开页面的心情
更少的请求，更小的文件，更好的代码性能
更少的请求，更小的文件，更好的代码性能
第49页
考虑慢速用户的访问体验
可访问性
可访问性
第50页
考虑retina用户的访问体验 跨平台
第51页
考虑障碍用户的访问体验
可访问性
http://www.w3.org/TR/wai-aria
可访问性
http://www.w3.org/TR/wai-aria
第52页
编码后：情怀、代码、人生
第53页
页面块的四大要素
HTML
STRUCTURE 结构
CSS
VISUAL 外观
info
CONTENT 内容
JS+API
CONTROLLER 控制器
HTML
STRUCTURE 结构
CSS
VISUAL 外观
info
CONTENT 内容
JS+API
CONTROLLER 控制器
第54页
四大要素三维视图
控制器 结构 内容
外观
控制器 结构 内容
外观
第55页
设计师：
!
外观
!
结构
!!
! 内容
控制器
产品/用户
! !
外观
! !
内容
! !!
结构 控制器
重构：
! !
外观
!
控制器
!
内容
! !
结构
!
!
外观
!
结构
!!
! 内容
控制器
产品/用户
! !
外观
! !
内容
! !!
结构 控制器
重构：
! !
外观
!
控制器
!
内容
! !
结构
!
第56页
跨用户群体 跨平台
项目的后期维护、代码可读性、效率 页面性能的分析和提升
页面按照设计稿还原，浏览器兼容
项目的后期维护、代码可读性、效率 页面性能的分析和提升
页面按照设计稿还原，浏览器兼容
第57页
THKS，QA
第58页
积累代码VS积累经验