Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2014WebRebuild年会分享

1,771 views

Published on

腾讯在2007年12月正式有网页重构岗位,至今有7年的时间,这7年是互联网高速发展的时期,也是行业浮躁的时期,技术不断的推陈出新,在追逐技术的时候,重构相关理论并没有得到完善,OOCSS、LESS、SASS等程序思维的理论,是否真的适合我们,借这次机会分享这些年个人与团队在重构理论上的思考与尝试,寻找适合重构的理论。

  • 支持鬼哥~
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

2014WebRebuild年会分享

  1. 1. 寻找适合重构的理论 GhostZhang(张癸鑫)   2014.12.27
  2. 2. @GhostZhang 个⼈人简历 2006.11~2009.09 2009.9~2010.11 2010.11~2011.1 2011.1~now
  3. 3. @GhostZhang 2006.5 2007.12
  4. 4. @GhostZhang 2009年《⼀一专多⻓长》 @TwinsenLiang
  5. 5. @GhostZhang 2012年《⽅方》 专注 ⾃自我定位 换个⾓角度看问题 拒绝理所当然
  6. 6. @GhostZhang 传承
  7. 7. @GhostZhang 寻找适合重构的理论
  8. 8. @GhostZhang 跨界的理论 单元测试⾯面向对象 模块化
  9. 9. @GhostZhang 1. Qzone模块化演化过程   2. 财付通⽀支付中⼼心多场景应⽤用尝试
  10. 10. @GhostZhang Askin Bskin Cskin Dskin Qzone换肤问题 <link  href=“h9p://imgcache.qq.com/qzone/skin/A.css”  rel="stylesheet"> <link  href=“h9p://imgcache.qq.com/qzone/skin/B.css”  rel="stylesheet"> <link  href=“h9p://imgcache.qq.com/qzone/skin/C.css”  rel="stylesheet"> <link  href=“h9p://imgcache.qq.com/qzone/skin/D.css”  rel="stylesheet"> …
  11. 11. @GhostZhang 如何减少维护⼯工作量? 问题 或质疑 假设 ⽅方案 验证 ⽅方案
  12. 12. @GhostZhang 12 34
  13. 13. @GhostZhang 模块化 模块化 • ⼤大拆⼩小 • 可复⽤用 • 可组合
  14. 14. @GhostZhang 拆——分离的思想
  15. 15. @GhostZhang Qzone换肤架构演化 Acss Bcss Ccss DcssAcss Bcss Ccss Dcss Askin Bskin Cskin Dskin
  16. 16. @GhostZhang Qzone换肤架构演化 Acss Bcss Ccss Dcss Acss Bcss Ccss Dcss Askin Bskin Cskin Dskin 表现 结构 相同
  17. 17. @GhostZhang Qzone换肤架构演化 Acss Bcss Ccss Dcss AcssBcssCcssDcss Askin Bskin Cskin Dskin Gcss 表现 结构
  18. 18. @GhostZhang 模块的演化 A B 我是⻚页⾯面
  19. 19. @GhostZhang 模块的演化 A B A B
  20. 20. @GhostZhang 模块的演化 A B A B Acss Bcss Ahtml Ahtml
  21. 21. @GhostZhang 模块的演化 A B A B Acss Bcss Gcss Ahtml Ahtml
  22. 22. @GhostZhang 新闻 专辑 新闻标题 新闻内容新闻内容新闻内容新闻内容新 闻内容新闻内容 新闻标题 新闻内容新闻内容新闻内容新闻内容新 闻内容新闻内容 专辑名称 专辑介绍,这是⼀一 张专辑,这⾥里写⼀一 些关于这张专辑的 介绍内容,让⽤用户 更容易选择。 img 专辑名称 专辑介绍,这是⼀一 张专辑,这⾥里写⼀一 些关于这张专辑的 介绍内容,让⽤用户 更容易选择。 img 其它 其它
  23. 23. @GhostZhang 新闻 专辑 新闻标题 新闻内容新闻内容新闻内容新闻内容新 闻内容新闻内容 新闻标题 新闻内容新闻内容新闻内容新闻内容新 闻内容新闻内容 专辑名称 专辑介绍,这是⼀一 张专辑,这⾥里写⼀一 些关于这张专辑的 介绍内容,让⽤用户 更容易选择。 img 专辑名称 专辑介绍,这是⼀一 张专辑,这⾥里写⼀一 些关于这张专辑的 介绍内容,让⽤用户 更容易选择。 img
  24. 24. @GhostZhang 专辑 新闻 新闻标题 新闻内容新闻内容新闻内容新闻内容新 闻内容新闻内容 新闻标题 新闻内容新闻内容新闻内容新闻内容新 闻内容新闻内容 专辑名称 专辑介绍,这是⼀一 张专辑,这⾥里写⼀一 些关于这张专辑的 介绍内容,让⽤用户 更容易选择。 img 专辑名称 专辑介绍,这是⼀一 张专辑,这⾥里写⼀一 些关于这张专辑的 介绍内容,让⽤用户 更容易选择。 img
  25. 25. @GhostZhang 新闻 专辑 专辑名称 专辑介绍,这是⼀一 张专辑,这⾥里写⼀一 些关于这张专辑的 介绍内容,让⽤用户 更容易选择。 img 新闻标题 新闻内容新闻内容新闻内容新闻内容新 闻内容新闻内容
  26. 26. @GhostZhang 标题 标题 width height
  27. 27. @GhostZhang width height 标题标题 基础模块 基础结构 基础表现 Acss Bcss Ghtml Gcss 最终位置 最终表现
  28. 28. @GhostZhang 拆好了,如何拼?
  29. 29. @GhostZhang 模块如何拼接? 问题 或质疑 假设 ⽅方案 验证 ⽅方案
  30. 30. @GhostZhang
  31. 31. @GhostZhang ⾯面向对象 • 独⽴立对象 • 通过接⼝口链接 ⾯面向对象
  32. 32. @GhostZhang 独⽴立——分离的思想 CSS HTML JS
  33. 33. @GhostZhang 接⼝口 <link  type="text/css"  href="demo.css"  rel=“stylesheet"  /> <style  type=“text/css">   .demo{}   </style> <div  class=“demo”>   …   </div> <div  style=“color:#333333;”>   …   </div> ⽂文件接⼝口 代码接⼝口
  34. 34. @GhostZhang “代码接⼝口”的设计
  35. 35. @GhostZhang “代码接⼝口”的设计 • 保持接⼝口两端的独⽴立性   • 更少的变更成本
  36. 36. @GhostZhang 标题 基础模块 最终位置 最终表现width height 基础结构 基础表现 Ghtml Acss Bcss Gcss
  37. 37. @GhostZhang 标题 Acss Gcss <div  class=“                                                      ”>   …   </div> width height Bcss 代码接⼝口
  38. 38. @GhostZhang 标题 Acss Gcss<div  class=“                                                      ”>   …   </div> width height Bcss 新闻 代码接⼝口
  39. 39. @GhostZhang <div  class=“                                                      ”>   …   </div> 标题 AcssGcss width height 新闻 代码接⼝口 专辑
  40. 40. @GhostZhang 标题 width height 新闻 专辑 + = Acss Bcss A B Ghtml Gcss
  41. 41. @GhostZhang <div  class=“基础类  扩展类  实例类”>   var  实例类  =  new  基础类(扩展类) Gcss Acss ♒
  42. 42. @GhostZhang 标题 扩展类 标题 Gcss 局部调整 Ecss 标题
  43. 43. @GhostZhang 模块样式
  44. 44. @GhostZhang .基础类   .扩展类   .实例类 .作⽤用域 .⺫⽬目标元素 {…} 新闻 新闻标题 新闻内容新闻内容新闻内容新闻内容新闻内容新闻 内容 新闻内容新闻内容新闻内容新闻内容新闻内 容新闻内容 新闻标题 新闻内容新闻内容新闻内容新闻内容新新闻内容新 闻内容新闻内容新闻内容新闻内容
  45. 45. @GhostZhang .基础类   .扩展类   .实例类 .作⽤用域 .⺫⽬目标元素 {…} 新闻 新闻标题 新闻内容新闻内容新闻内容新闻内容新闻内容新闻 内容 新闻内容新闻内容新闻内容新闻内容新闻内 容新闻内容 新闻标题 新闻内容新闻内容新闻内容新闻内容新新闻内容新 闻内容新闻内容新闻内容新闻内容
  46. 46. @GhostZhang .基础类   .扩展类   .实例类 .作⽤用域 .⺫⽬目标元素 {…} 新闻 新闻标题 新闻内容新闻内容新闻内容新闻内容新闻内容新闻 内容 新闻内容新闻内容新闻内容新闻内容新闻内 容新闻内容 新闻标题 新闻内容新闻内容新闻内容新闻内容新新闻内容新 闻内容新闻内容新闻内容新闻内容
  47. 47. @GhostZhang .基础类   .扩展类   .实例类 .作⽤用域 .⺫⽬目标元素 {…} 新闻 新闻标题 新闻内容新闻内容新闻内容新闻内容新闻内容新闻 内容 新闻内容新闻内容新闻内容新闻内容新闻内 容新闻内容 新闻标题 新闻内容新闻内容新闻内容新闻内容新新闻内容新 闻内容新闻内容新闻内容新闻内容
  48. 48. @GhostZhang OOCSS?
  49. 49. @GhostZhang ⾯面向“效果”的模块化
  50. 50. @GhostZhang ⾯面向“效果”的模块化 • 以表现为模块划分的参考标准   • 以最⼤大复⽤用为基础模块的参考标准   • 保持模块的独⽴立性及模块内部的灵活性
  51. 51. @GhostZhang ⾯面向“效果”的模块化 <div  class=“基础类  扩展类  实例类”> .基础类   .扩展类   .实例类 .作⽤用域 .⺫⽬目标元素 {…}
  52. 52. @GhostZhang ⾯面向“对象”的模块化,像是玩积⽊木 ⾯面向“效果”的模块化, 像是做积⽊木
  53. 53. @GhostZhang Ascene Bscene Cscene Dscene 财付通⽀支付中⼼心   多场景问题 … ⽀支付中⼼心 不同商家接⼊入的需求存在差异
  54. 54. @GhostZhang HTML能否模块化? 问题 或质疑 假设 ⽅方案 验证 ⽅方案
  55. 55. @GhostZhang SHTML <!-­‐-­‐#include  virtual=“head.html"-­‐-­‐> body head footer <!-­‐-­‐#include  virtual=“footer.html"-­‐-­‐>
  56. 56. @GhostZhang SHTML <!-­‐-­‐#include  virtual=“cbox.html"-­‐-­‐> <!-­‐-­‐#include  virtual=“abox.html"-­‐-­‐> <!-­‐-­‐#include  virtual=“bbox.html"-­‐-­‐> 框架 Abox Bbox Cbox
  57. 57. @GhostZhang SHTML Abox Bbox Cbox Abox Cbox
  58. 58. @GhostZhang SHTML Abox Bbox Cbox Abox Cbox Abox Bbox Cbox Abox Cbox
  59. 59. @GhostZhang SHTML Abox Bbox Cbox Abox Cbox Abox Bbox Bbox Cbox … …
  60. 60. @GhostZhang
  61. 61. @GhostZhang
  62. 62. @GhostZhang
  63. 63. @GhostZhang
  64. 64. @GhostZhang 静态⻚页⾯面的输出要求 • 还原设计稿   • 兼容多个浏览器
  65. 65. @GhostZhang 重构输出如何做得更好? 问题 或质疑 假设 ⽅方案 验证 ⽅方案
  66. 66. @GhostZhang 做得更好 静态 动态
  67. 67. @GhostZhang 单元测试 单元测试 • 快速⾃自测 • 辅助测试 • 模拟真实
  68. 68. @GhostZhang 快速添加交互效果 • 显⽰示/隐藏   • 状态切换   • Tab选项卡   • 弹出层   • 聚焦   • 列表⾼高亮
  69. 69. @GhostZhang 快速添加交互效果
  70. 70. @GhostZhang 辅助验证 Demo
  71. 71. @GhostZhang 做得更好 静态 动态 验证环境
  72. 72. @GhostZhang 验证环境
  73. 73. @GhostZhang SHTML的烦恼 <!-­‐-­‐#include  virtual=“head.html"-­‐-­‐>head footer <!-­‐-­‐#include  virtual=“footer.html"-­‐-­‐> A B <!-­‐-­‐#include  virtual=“a.html"-­‐-­‐> <!-­‐-­‐#include  virtual=“b.html"-­‐-­‐>
  74. 74. @GhostZhang SHTML的烦恼 • SHMTL是包含有“服务器端嵌⼊入”命令的HTML   • ⾮非静态⻚页⾯面会⾯面临各种不稳定的环境问题   • 下游未完成   • 环境报错,流程⾛走不下去   • ……
  75. 75. @GhostZhang Fiddler   +   SSI  Proxy
  76. 76. @GhostZhang
  77. 77. @GhostZhang
  78. 78. @GhostZhang
  79. 79. @GhostZhang
  80. 80. @GhostZhang 跨界的理论 单元测试⾯面向对象 模块化
  81. 81. @GhostZhang ⾯面向“效果”的模块化 <div  class=“基础类  扩展类  实例类”> .基础类   .扩展类   .实例类 .作⽤用域 .⺫⽬目标元素 {…} h`p://blog.cssforest.org/
  82. 82. @GhostZhang 重构的单元测试 h`p://cd.tenpay.com/labs/
  83. 83. @GhostZhang 互为肩膀,共同成⻓长
  84. 84. @GhostZhang Thank  &  End

×