O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

2014WebRebuild年会分享

1.950 visualizações

Publicada em

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

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

×