2014奥别产搁别产耻颈濒诲年会分享
11 likes2,228 views
文档探讨了软件重构的理论与实践，强调模块化和面向对象的设计思路。详细分析了如何通过模块化减少维护工作量与提高代码的复用性。还涉及了静态页面输出的兼容性问题和单元测试的作用。
2014奥别产搁别产耻颈濒诲年会分享
- 10. @GhostZhang 1. Qzone模块化演化过程 ? 2. 财付通?支付中?心多场景应?用尝试
- 11. @GhostZhang Askin Bskin Cskin Dskin Qzone换肤问题 <link ?href=“h9p://imgcache./qzone/skin/A.css” ?rel="stylesheet"> <link ?href=“h9p://imgcache./qzone/skin/B.css” ?rel="stylesheet"> <link ?href=“h9p://imgcache./qzone/skin/C.css” ?rel="stylesheet"> <link ?href=“h9p://imgcache./qzone/skin/D.css” ?rel="stylesheet"> …
- 16. @GhostZhang Qzone换肤架构演化 Acss Bcss Ccss DcssAcss Bcss Ccss Dcss Askin Bskin Cskin Dskin
- 17. @GhostZhang Qzone换肤架构演化 Acss Bcss Ccss Dcss Acss Bcss Ccss Dcss Askin Bskin Cskin Dskin 表现 结构 相同
- 18. @GhostZhang Qzone换肤架构演化 Acss Bcss Ccss Dcss AcssBcssCcssDcss Askin Bskin Cskin Dskin Gcss 表现 结构
- 31. @GhostZhang
- 34. @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> ?文件接?口 代码接?口
- 36. @GhostZhang “代码接?口”的设计 ? 保持接?口两端的独?立性 ? ? 更少的变更成本
- 38. @GhostZhang 标题 Acss Gcss <div ?class=“ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?”> ? … ? </div> width height Bcss 代码接?口
- 39. @GhostZhang 标题 Acss Gcss<div ?class=“ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?”> ? … ? </div> width height Bcss 新闻 代码接?口
- 40. @GhostZhang <div ?class=“ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?”> ? … ? </div> 标题 AcssGcss width height 新闻 代码接?口 专辑
- 42. @GhostZhang <div ?class=“基础类 ?扩展类 ?实例类”> ? var ?实例类 ?= ?new ?基础类(扩展类) Gcss Acss ?
- 44. @GhostZhang 模块样式
- 45. @GhostZhang .基础类 ? .扩展类 ? .实例类 .作?用域 .??目标元素 {…} 新闻 新闻标题 新闻内容新闻内容新闻内容新闻内容新闻内容新闻 内容 新闻内容新闻内容新闻内容新闻内容新闻内 容新闻内容 新闻标题 新闻内容新闻内容新闻内容新闻内容新新闻内容新 闻内容新闻内容新闻内容新闻内容
- 46. @GhostZhang .基础类 ? .扩展类 ? .实例类 .作?用域 .??目标元素 {…} 新闻 新闻标题 新闻内容新闻内容新闻内容新闻内容新闻内容新闻 内容 新闻内容新闻内容新闻内容新闻内容新闻内 容新闻内容 新闻标题 新闻内容新闻内容新闻内容新闻内容新新闻内容新 闻内容新闻内容新闻内容新闻内容
- 47. @GhostZhang .基础类 ? .扩展类 ? .实例类 .作?用域 .??目标元素 {…} 新闻 新闻标题 新闻内容新闻内容新闻内容新闻内容新闻内容新闻 内容 新闻内容新闻内容新闻内容新闻内容新闻内 容新闻内容 新闻标题 新闻内容新闻内容新闻内容新闻内容新新闻内容新 闻内容新闻内容新闻内容新闻内容
- 48. @GhostZhang .基础类 ? .扩展类 ? .实例类 .作?用域 .??目标元素 {…} 新闻 新闻标题 新闻内容新闻内容新闻内容新闻内容新闻内容新闻 内容 新闻内容新闻内容新闻内容新闻内容新闻内 容新闻内容 新闻标题 新闻内容新闻内容新闻内容新闻内容新新闻内容新 闻内容新闻内容新闻内容新闻内容
- 51. @GhostZhang ?面向“效果”的模块化 ? 以表现为模块划分的参考标准 ? ? 以最?大复?用为基础模块的参考标准 ? ? 保持模块的独?立性及模块内部的灵活性
- 52. @GhostZhang ?面向“效果”的模块化 <div ?class=“基础类 ?扩展类 ?实例类”> .基础类 ? .扩展类 ? .实例类 .作?用域 .??目标元素 {…}
- 54. @GhostZhang Ascene Bscene Cscene Dscene 财付通?支付中?心 ? 多场景问题 … ?支付中?心 不同商家接?入的需求存在差异
- 56. @GhostZhang SHTML <!-?‐-?‐#include ?virtual=“head.html"-?‐-?‐> body head footer <!-?‐-?‐#include ?惫颈谤迟耻补濒=“蹿辞辞迟别谤.丑迟尘濒&辩耻辞迟;-?‐-?‐&驳迟;
- 57. @GhostZhang SHTML <!-?‐-?‐#include ?virtual=“cbox.html"-?‐-?‐> <!-?‐-?‐#include ?virtual=“abox.html"-?‐-?‐> <!-?‐-?‐#include ?virtual=“bbox.html"-?‐-?‐> 框架 Abox Bbox Cbox
- 60. @GhostZhang SHTML Abox Bbox Cbox Abox Cbox Abox Bbox Bbox Cbox … …
- 61. @GhostZhang
- 62. @GhostZhang
- 63. @GhostZhang
- 64. @GhostZhang
- 65. @GhostZhang 静态?页?面的输出要求 ? 还原设计稿 ? ? 兼容多个浏览器
- 69. @GhostZhang 快速添加交互效果 ? 显?示/隐藏 ? ? 状态切换 ? ? Tab选项卡 ? ? 弹出层 ? ? 聚焦 ? ? 列表?高亮
- 73. @GhostZhang 验证环境
- 74. @GhostZhang SHTML的烦恼 <!-?‐-?‐#include ?virtual=“head.html"-?‐-?‐>head footer <!-?‐-?‐#include ?惫颈谤迟耻补濒=“蹿辞辞迟别谤.丑迟尘濒&辩耻辞迟;-?‐-?‐&驳迟; A B <!-?‐-?‐#include ?virtual=“a.html"-?‐-?‐> <!-?‐-?‐#include ?virtual=“b.html"-?‐-?‐>
- 75. @GhostZhang SHTML的烦恼 ? SHMTL是包含有“服务器端嵌?入”命令的HTML ? ? ?非静态?页?面会?面临各种不稳定的环境问题 ? ? 下游未完成 ? ? 环境报错，流程?走不下去 ? ? ……
- 76. @GhostZhang Fiddler ? + ? SSI ?Proxy
- 77. @GhostZhang
- 78. @GhostZhang
- 79. @GhostZhang
- 80. @GhostZhang
- 82. @GhostZhang ?面向“效果”的模块化 <div ?class=“基础类 ?扩展类 ?实例类”> .基础类 ? .扩展类 ? .实例类 .作?用域 .??目标元素 {…} h`p://blog.cssforest.org/