Your SlideShare is downloading. ×
0
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
微观重构 黄婉芳
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

微观重构 黄婉芳

1,356

Published on

黄婉芳/迅雷用户体验设计中心高级重构工程师

黄婉芳/迅雷用户体验设计中心高级重构工程师

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,356
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
89
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 微观重构<br />迅雷网络<br />黄婉芳 2011年9月<br />
  • 2. 关于主题<br />
  • 3. 这是一个最好的年代<br />设备、平台、技术<br />?<br />硬件、带宽、webkit、Android、IOS……<br />chrome13、 IE10、FF6、Html5、CSS3……<br />环境<br />引导、学习、交流、成长……<br />
  • 4. 我;<br />两年 ;<br />在 迅 雷<br />
  • 5. 谈谈“微观”<br />
  • 6. 重构 一张散乱的网<br />宏观<br />中观<br />微观<br />
  • 7. 细微到每一个细节<br />开始<br />结束<br />过程<br />
  • 8. 开始<br />了解需求背景、内容<br />拿来干嘛的?功能要求?什么平台?<br />清晰的规划和架构<br /> 不盲目、不慌乱<br />可参考项目(你或者别人的)<br /> 增加熟悉感<br />E.g. 你陌生的领域<br /> 明确的判断<br />
  • 9. 过程<br />你,<br /> 认真并专业地在做网页重构<br />
  • 10. 结束<br />休整<br /> 做得足够好了<br />么?<br />
  • 11. 寻找适合你的最优途径<br />别人的路可以引导你但不一定适合你<br />
  • 12. 模块的提取复用<br />
  • 13. !意外<br />团队协作良好<br />规划足够清晰<br />足够产品了解<br />构建项目模块<br />丰富的项目经验<br />…………<br />即使需求穿插或者长时停顿也能应对自如<br />
  • 14. 生命在于挖掘<br />——提炼<br />
  • 15. 看新的知识,寻找旧的踪影;<br />
  • 16. 伪元素<br />图片替换<br />:before<br />:after <br />
  • 17. 2. 从旧的东西,回顾遗漏的点;<br />
  • 18. word-break<br />(no ie only)<br />
  • 19. 3. 挖根究底。<br />247K<br />221K<br />200K内<br />
  • 20. 你做的东西可能并不会有用武之地<br />但我们不会因为这样就不去多做尝试<br />
  • 21. li:nth-child(2n)<br />margin-top:height<br />margin-left:-width<br />
  • 22. IE678<br />Chrome等<br />.cmt_list li{opacity:0.3} <br />.cmt_list li:nth-child(1){font-size:1.1em;font-weight:bold;opacity:1} <br />.cmt_list li:nth-child(2){font-size:1.1em;opacity:0.9} <br />.cmt_list li:nth-child(3){opacity:0.7} <br />.cmt_list li:nth-child(4){opacity:0.6}<br />.cmt_list li:nth-child(5){opacity:0.5}<br />.cmt_list li:nth-child(6){opacity:0.4}<br />.cmt_list li:nth-child(7){opacity:0.3} <br />.cmt_list li:hover{opacity:0.9}<br />
  • 23. 看,这些问题<br />
  • 24. 成长<br />谁都无法一口气吃成胖子,除非得了糖尿病<br />
  • 25. 瓶颈<br />充实 – 了解得越多越强大;<br />版本迭代 – 全力以赴;<br />拟想你是:产品、设计、开发……<br />
  • 26. 或者,纯粹只是<br />一个新人<br />
  • 27. E.g.<br />1. 邮件页<br />2. 背景色<br />3. 强调内容<br />4. 接收端多<br />5. 人工发布<br />6. 排版固定<br />7. 每月发布<br />8. 测试繁琐<br /> ……<br />http://xlbb.xunlei.com/201108/<br />
  • 28. E.g.<br />设计稿<br />1. 邮件页<br />2. 背景色<br />3. 强调内容<br />4. 接收端多<br />5. 人工发布<br />6. 排版固定<br />7. 每月发布<br />8. 测试繁琐<br /> ……<br />内容<br />自动化<br />测试<br />上线<br />
  • 29. End~ 欢迎来论:)<br />
  • 30. 相关链接:<br />http://nicolasgallagher.com/css-image-replacement-with-pseudo-elements/demo<br />http://cued.xunlei.com/css-image-replacement-and-pseudo-elements<br />http://ued.taobao.com/blog/2010/10/14/research-of-word-wrap/<br />http://www.webrebuild.org/2010/guangzhou/<br />联系我:<br />QQ:469220334<br />邮箱:hbaeor@gmail.com<br />

×