微观重构

迅雷网络

黄婉芳 2011 年 9 月

关于主题

这是一个最好的年代

设备、平台、技术

环境

硬件、带宽、 webkit 、 Android 、 IOS……

chrome13 、 IE10 、 FF6 、 Html5 、 CSS3……

引导、学习、交流、成长……

？

我 ;两年 ;

在 迅 雷

谈谈“微观”

重构 一张散乱的网

宏观

中观

微观

细微到每一个细节

开始 结束过程

开始了解需求背景、内容 拿来干嘛的？功能

要求？什么平台？

清晰的规划和架构 不盲目、不慌乱

可参考项目（你或者别人的） 增加熟悉感

E.g. 你陌生的领域 明确的判断

过程

你，

认真并专业地在做网页重构

结束

休整

做得足够好了么 ?

寻找适合你的最优途径

别人的路可以引导你但不一定适合你

模块的提取复用

！意外

即使需求穿插或者长时停顿也能应对自如

规划足够清晰

足够产品了解

丰富的项目经验…………

构建项目模块

团队协作良好

生命在于挖掘

—— 提炼

1. 看新的知识，寻找旧的踪影；

伪元素

图片替换:before:after

2. 从旧的东西，回顾遗漏的点；

word-break(no ie only)

3. 挖根究底。

247K

200K 内

221K

你做的东西可能并不会有用武之地

但我们不会因为这样就不去多做尝试

li:nth-child(2n)margin-top:heightmargin-left:-width

.cmt_list li{opacity:0.3}

.cmt_list li:nth-child(1){font-size:1.1em;font-weight:bold;opacity:1}

.cmt_list li:nth-child(2){font-size:1.1em;opacity:0.9}

.cmt_list li:nth-child(3){opacity:0.7}

.cmt_list li:nth-child(4){opacity:0.6}

.cmt_list li:nth-child(5){opacity:0.5}

.cmt_list li:nth-child(6){opacity:0.4}

.cmt_list li:nth-child(7){opacity:0.3}

.cmt_list li:hover{opacity:0.9}

IE678 Chrome 等

看，这些问题

成长

谁都无法一口气吃成胖子，除非得了糖尿病

瓶颈

1. 充实 – 了解得越多越强大；

2. 版本迭代 – 全力以赴；

3. 拟想你是：产品、设计、开发……

或者，纯粹只是

一个新人

E.g.

http://xlbb.xunlei.com/201108/

1. 邮件页 2. 背景色 3. 强调内容 4. 接收端多 5. 人工发布 6. 排版固定 7. 每月发布 8. 测试繁琐

……

1. 邮件页 2. 背景色 3. 强调内容 4. 接收端多 5. 人工发布 6. 排版固定 7. 每月发布 8. 测试繁琐

……

E.g.

内容

上线

设计稿

测试自动化

End~ 欢迎来论 : ）

相关链接：http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/demo

http://cued.xunlei.com/css-image-replacement-and-pseudo-elements

http://ued.taobao.com/blog/2010/10/14/research-of-word-wrap/

http://www.webrebuild.org/2010/guangzhou/

联系我：QQ ： 469220334

邮箱： hbaeor@gmail.com