SlideShare a Scribd company logo
1 of 54
重构- 关于可读性、原则和模式 中国网站技术部-市场开发部-前端(魏琪君) UED Team Design
主要内容 ,[object Object],[object Object]
可读性-形 ,[object Object],[object Object]
缩进
摘录《代码整洁之道》 ,[object Object],[object Object],[object Object]
摘录《软件开发沉思录》 ,[object Object],[object Object],[object Object],[object Object]
可读性-意 ,[object Object],[object Object]
统一词汇 ,[object Object],[object Object],[object Object],[object Object]
使用同样的词汇书写和交流
action ,[object Object],[object Object]
如何去写代码 ,[object Object],[object Object],[object Object]
一个例子:选择产品组件 ,[object Object]
需求 1: OfferChooser 可以渲染在任意节点上
需求 2 :使用 OfferChooserDialog ,可以以对话框的形式使用
OfferChooser 由两部分组成
SourceOfferPart 主要由三部分组成 ,[object Object]
SearchPanel 由一个自定义的类目下拉框和普通的搜索功能组成
SelectedOfferPart
问题? ,[object Object],[object Object],[object Object]
坏味道 1 :长且重复的方法名
提取,形成 SearchPanel
现在的 ChooserOffer
代码行数和类数量 ,[object Object],[object Object],[object Object]
原则和模式 ,[object Object],[object Object]
类和类的关系 ,[object Object],[object Object]
类图
继承-单例
继承-多例
组合
原则 ,[object Object],[object Object],[object Object],[object Object]
根据 耦合性 对继承进行分类 ,[object Object]
根据 耦合性 对继承进行分类 ,[object Object]
更适合 JS 的原则 ,[object Object],[object Object],[object Object],[object Object],[object Object]
稳定依赖原则( DIP ) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[摘录]《敏捷软件开发,原则模式和实践》 ,[object Object],[object Object]
问题? ,[object Object],[object Object]
实现
依赖注入( DI )
实际应用 ,[object Object]
引入间接层:使用自定义事件
题外话 ,[object Object]
开放封闭原则( OCP ) ,[object Object],[object Object],[object Object]
解析 OCP ,[object Object],[object Object],[object Object]
一个例子
再一个例子
问题 ,[object Object],[object Object]
总结 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
模式新视角
设计模式是一套词汇 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
重意不重形 ,[object Object],[object Object],[object Object],[object Object],[object Object]
最后一个例子 ,[object Object]
画出类图
策略( Strategy 或 Policy) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
回顾 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

Viewers also liked

Metodologia de la educación a distancia moises diaz
Metodologia de la educación a distancia moises diazMetodologia de la educación a distancia moises diaz
Metodologia de la educación a distancia moises diazUnadFlorencia
 
Ever Vigilant Consulting LLC - BCM Overview
Ever Vigilant Consulting LLC - BCM OverviewEver Vigilant Consulting LLC - BCM Overview
Ever Vigilant Consulting LLC - BCM OverviewEverVigilantConsulting
 
Datos personales y nuevas tecnologias
Datos personales y nuevas tecnologiasDatos personales y nuevas tecnologias
Datos personales y nuevas tecnologiaselfondito
 
10 vida prision en jerusalen
10 vida prision en jerusalen10 vida prision en jerusalen
10 vida prision en jerusalenBRIAN MOORE
 
Empty shops in Lancaster City Centre
Empty shops in Lancaster City CentreEmpty shops in Lancaster City Centre
Empty shops in Lancaster City CentreMichael Solaymantash
 
Java script测试之js unit ut
Java script测试之js unit utJava script测试之js unit ut
Java script测试之js unit utfangdeng
 
Mifos Functionality Overview
Mifos Functionality OverviewMifos Functionality Overview
Mifos Functionality OverviewMifos.Initiative
 
Key Trends Shaping Card Payments
Key Trends Shaping Card PaymentsKey Trends Shaping Card Payments
Key Trends Shaping Card PaymentsVivastream
 
NDRC - The Trend Today's China Economy and Real Estates
NDRC - The Trend Today's China Economy and Real EstatesNDRC - The Trend Today's China Economy and Real Estates
NDRC - The Trend Today's China Economy and Real Estatespho1977
 
Trabalho teorico de Linguagem de Programação
Trabalho teorico de Linguagem de ProgramaçãoTrabalho teorico de Linguagem de Programação
Trabalho teorico de Linguagem de Programaçãocarlosveiga
 

Viewers also liked (15)

Metodologia de la educación a distancia moises diaz
Metodologia de la educación a distancia moises diazMetodologia de la educación a distancia moises diaz
Metodologia de la educación a distancia moises diaz
 
Ever Vigilant Consulting LLC - BCM Overview
Ever Vigilant Consulting LLC - BCM OverviewEver Vigilant Consulting LLC - BCM Overview
Ever Vigilant Consulting LLC - BCM Overview
 
Datos personales y nuevas tecnologias
Datos personales y nuevas tecnologiasDatos personales y nuevas tecnologias
Datos personales y nuevas tecnologias
 
10 vida prision en jerusalen
10 vida prision en jerusalen10 vida prision en jerusalen
10 vida prision en jerusalen
 
Demo day
Demo dayDemo day
Demo day
 
Empty shops in Lancaster City Centre
Empty shops in Lancaster City CentreEmpty shops in Lancaster City Centre
Empty shops in Lancaster City Centre
 
Java script测试之js unit ut
Java script测试之js unit utJava script测试之js unit ut
Java script测试之js unit ut
 
Mifos Functionality Overview
Mifos Functionality OverviewMifos Functionality Overview
Mifos Functionality Overview
 
Tajmajal
TajmajalTajmajal
Tajmajal
 
Reklamy na internete
Reklamy na interneteReklamy na internete
Reklamy na internete
 
Reklamna kampan
Reklamna kampanReklamna kampan
Reklamna kampan
 
Key Trends Shaping Card Payments
Key Trends Shaping Card PaymentsKey Trends Shaping Card Payments
Key Trends Shaping Card Payments
 
NDRC - The Trend Today's China Economy and Real Estates
NDRC - The Trend Today's China Economy and Real EstatesNDRC - The Trend Today's China Economy and Real Estates
NDRC - The Trend Today's China Economy and Real Estates
 
Trabalho teorico de Linguagem de Programação
Trabalho teorico de Linguagem de ProgramaçãoTrabalho teorico de Linguagem de Programação
Trabalho teorico de Linguagem de Programação
 
cm
cmcm
cm
 

Similar to 魏琪君-重构-关于可读性、原则和模式

重构——关于可读性、原则和模式
重构——关于可读性、原则和模式重构——关于可读性、原则和模式
重构——关于可读性、原则和模式cnfi
 
N-layer design & development
N-layer design & developmentN-layer design & development
N-layer design & developmentXuefeng Zhang
 
3.架构设计篇2
3.架构设计篇23.架构设计篇2
3.架构设计篇2gavin shaw
 
浏览器工作原理浅析
浏览器工作原理浅析浏览器工作原理浅析
浏览器工作原理浅析癸鑫 张
 
Android最佳实践
Android最佳实践Android最佳实践
Android最佳实践supernlee
 
Great architect cn
Great architect cnGreat architect cn
Great architect cndrewz lin
 
TDD (Test-driven development, 測試驅動開發) 基本教學
TDD (Test-driven development, 測試驅動開發) 基本教學TDD (Test-driven development, 測試驅動開發) 基本教學
TDD (Test-driven development, 測試驅動開發) 基本教學潘 冠辰
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发leneli
 
Taobao数据库这5年
Taobao数据库这5年Taobao数据库这5年
Taobao数据库这5年yp_fangdong
 
掌星 移动互联网开发笔记-Vol002
掌星 移动互联网开发笔记-Vol002掌星 移动互联网开发笔记-Vol002
掌星 移动互联网开发笔记-Vol002rainx1982
 
淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题 Lumend
 
对“新软攀峰”官网项目中面向对象设计原则和包设计原则的分析与修改
对“新软攀峰”官网项目中面向对象设计原则和包设计原则的分析与修改对“新软攀峰”官网项目中面向对象设计原则和包设计原则的分析与修改
对“新软攀峰”官网项目中面向对象设计原则和包设计原则的分析与修改zhaoyulee
 
软件工程
软件工程软件工程
软件工程bill0077
 
20130626联动优势数据访问层DAL架构和实践5(刘胜)数据分片和分页
20130626联动优势数据访问层DAL架构和实践5(刘胜)数据分片和分页20130626联动优势数据访问层DAL架构和实践5(刘胜)数据分片和分页
20130626联动优势数据访问层DAL架构和实践5(刘胜)数据分片和分页liu sheng
 
Redis slideshare
Redis slideshareRedis slideshare
Redis slideshareliaoxu
 
百度分布式数据实践与进展
百度分布式数据实践与进展百度分布式数据实践与进展
百度分布式数据实践与进展yp_fangdong
 
软件工程 第五章
软件工程 第五章软件工程 第五章
软件工程 第五章浒 刘
 
Dreaming Infrastructure
Dreaming InfrastructureDreaming Infrastructure
Dreaming Infrastructurekyhpudding
 
浅谈电商网站数据访问层(DAL)与 ORM 之适用性
浅谈电商网站数据访问层(DAL)与 ORM 之适用性浅谈电商网站数据访问层(DAL)与 ORM 之适用性
浅谈电商网站数据访问层(DAL)与 ORM 之适用性Xuefeng Zhang
 
Ddd(meetup 2) ddd with clean architecture
Ddd(meetup 2) ddd with clean architectureDdd(meetup 2) ddd with clean architecture
Ddd(meetup 2) ddd with clean architecture國昭 張
 

Similar to 魏琪君-重构-关于可读性、原则和模式 (20)

重构——关于可读性、原则和模式
重构——关于可读性、原则和模式重构——关于可读性、原则和模式
重构——关于可读性、原则和模式
 
N-layer design & development
N-layer design & developmentN-layer design & development
N-layer design & development
 
3.架构设计篇2
3.架构设计篇23.架构设计篇2
3.架构设计篇2
 
浏览器工作原理浅析
浏览器工作原理浅析浏览器工作原理浅析
浏览器工作原理浅析
 
Android最佳实践
Android最佳实践Android最佳实践
Android最佳实践
 
Great architect cn
Great architect cnGreat architect cn
Great architect cn
 
TDD (Test-driven development, 測試驅動開發) 基本教學
TDD (Test-driven development, 測試驅動開發) 基本教學TDD (Test-driven development, 測試驅動開發) 基本教學
TDD (Test-driven development, 測試驅動開發) 基本教學
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
 
Taobao数据库这5年
Taobao数据库这5年Taobao数据库这5年
Taobao数据库这5年
 
掌星 移动互联网开发笔记-Vol002
掌星 移动互联网开发笔记-Vol002掌星 移动互联网开发笔记-Vol002
掌星 移动互联网开发笔记-Vol002
 
淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题
 
对“新软攀峰”官网项目中面向对象设计原则和包设计原则的分析与修改
对“新软攀峰”官网项目中面向对象设计原则和包设计原则的分析与修改对“新软攀峰”官网项目中面向对象设计原则和包设计原则的分析与修改
对“新软攀峰”官网项目中面向对象设计原则和包设计原则的分析与修改
 
软件工程
软件工程软件工程
软件工程
 
20130626联动优势数据访问层DAL架构和实践5(刘胜)数据分片和分页
20130626联动优势数据访问层DAL架构和实践5(刘胜)数据分片和分页20130626联动优势数据访问层DAL架构和实践5(刘胜)数据分片和分页
20130626联动优势数据访问层DAL架构和实践5(刘胜)数据分片和分页
 
Redis slideshare
Redis slideshareRedis slideshare
Redis slideshare
 
百度分布式数据实践与进展
百度分布式数据实践与进展百度分布式数据实践与进展
百度分布式数据实践与进展
 
软件工程 第五章
软件工程 第五章软件工程 第五章
软件工程 第五章
 
Dreaming Infrastructure
Dreaming InfrastructureDreaming Infrastructure
Dreaming Infrastructure
 
浅谈电商网站数据访问层(DAL)与 ORM 之适用性
浅谈电商网站数据访问层(DAL)与 ORM 之适用性浅谈电商网站数据访问层(DAL)与 ORM 之适用性
浅谈电商网站数据访问层(DAL)与 ORM 之适用性
 
Ddd(meetup 2) ddd with clean architecture
Ddd(meetup 2) ddd with clean architectureDdd(meetup 2) ddd with clean architecture
Ddd(meetup 2) ddd with clean architecture
 

More from fangdeng

jQuery底层架构
jQuery底层架构jQuery底层架构
jQuery底层架构fangdeng
 
Building an event driven web
Building an event driven webBuilding an event driven web
Building an event driven webfangdeng
 
浅尝jQuery
浅尝jQuery浅尝jQuery
浅尝jQueryfangdeng
 
Html基础培训
Html基础培训Html基础培训
Html基础培训fangdeng
 
前端开发之Js
前端开发之Js前端开发之Js
前端开发之Jsfangdeng
 
Javascript代码注释及文档生成
Javascript代码注释及文档生成Javascript代码注释及文档生成
Javascript代码注释及文档生成fangdeng
 
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架fangdeng
 
前端单元测试初体验
前端单元测试初体验前端单元测试初体验
前端单元测试初体验fangdeng
 
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖fangdeng
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考fangdeng
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考fangdeng
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计fangdeng
 
Varnish简介
Varnish简介Varnish简介
Varnish简介fangdeng
 
Let's talk about date in javascript
Let's talk about  date  in javascriptLet's talk about  date  in javascript
Let's talk about date in javascriptfangdeng
 
Test driven-frontend-develop
Test driven-frontend-developTest driven-frontend-develop
Test driven-frontend-developfangdeng
 
方凳良品1期
方凳良品1期方凳良品1期
方凳良品1期fangdeng
 
方凳良品2期
方凳良品2期方凳良品2期
方凳良品2期fangdeng
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式fangdeng
 
Datalazyload
DatalazyloadDatalazyload
Datalazyloadfangdeng
 

More from fangdeng (20)

jQuery底层架构
jQuery底层架构jQuery底层架构
jQuery底层架构
 
Building an event driven web
Building an event driven webBuilding an event driven web
Building an event driven web
 
浅尝jQuery
浅尝jQuery浅尝jQuery
浅尝jQuery
 
Html基础培训
Html基础培训Html基础培训
Html基础培训
 
前端开发之Js
前端开发之Js前端开发之Js
前端开发之Js
 
Javascript代码注释及文档生成
Javascript代码注释及文档生成Javascript代码注释及文档生成
Javascript代码注释及文档生成
 
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
 
前端单元测试初体验
前端单元测试初体验前端单元测试初体验
前端单元测试初体验
 
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计
 
Varnish简介
Varnish简介Varnish简介
Varnish简介
 
Websocket
WebsocketWebsocket
Websocket
 
Let's talk about date in javascript
Let's talk about  date  in javascriptLet's talk about  date  in javascript
Let's talk about date in javascript
 
Test driven-frontend-develop
Test driven-frontend-developTest driven-frontend-develop
Test driven-frontend-develop
 
方凳良品1期
方凳良品1期方凳良品1期
方凳良品1期
 
方凳良品2期
方凳良品2期方凳良品2期
方凳良品2期
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
 
Datalazyload
DatalazyloadDatalazyload
Datalazyload
 

Recently uploaded

EDUC6506_ClassPresentation_TC330277 (1).pptx
EDUC6506_ClassPresentation_TC330277 (1).pptxEDUC6506_ClassPresentation_TC330277 (1).pptx
EDUC6506_ClassPresentation_TC330277 (1).pptxmekosin001123
 
educ6506presentationtc3302771-240427173057-06a46de5.pptx
educ6506presentationtc3302771-240427173057-06a46de5.pptxeduc6506presentationtc3302771-240427173057-06a46de5.pptx
educ6506presentationtc3302771-240427173057-06a46de5.pptxmekosin001123
 
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书jakepaige317
 
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptxEDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptxmekosin001123
 
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制jakepaige317
 
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...黑客 接单【TG/微信qoqoqdqd】
 
中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,
中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,
中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,Xin Yun Teo
 

Recently uploaded (7)

EDUC6506_ClassPresentation_TC330277 (1).pptx
EDUC6506_ClassPresentation_TC330277 (1).pptxEDUC6506_ClassPresentation_TC330277 (1).pptx
EDUC6506_ClassPresentation_TC330277 (1).pptx
 
educ6506presentationtc3302771-240427173057-06a46de5.pptx
educ6506presentationtc3302771-240427173057-06a46de5.pptxeduc6506presentationtc3302771-240427173057-06a46de5.pptx
educ6506presentationtc3302771-240427173057-06a46de5.pptx
 
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
泽兰应用科学大学毕业证制作/定制国外大学录取通知书/购买一个假的建国科技大学硕士学位证书
 
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptxEDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
EDUC6506(001)_ClassPresentation_2_TC330277 (1).pptx
 
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
哪里可以购买日本筑波学院大学学位记/做个假的文凭可认证吗/仿制日本大学毕业证/意大利语CELI证书定制
 
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
1.🎉“入侵大学入学考试中心修改成绩”来袭!ALEVEL替考大揭秘,轻松搞定考试成绩! 💥你还在为无法进入大学招生系统而烦恼吗?想知道如何通过技术手段更改...
 
中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,
中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,
中国文学, 了解王安石变法,熙宁变法,熙盛变法- 中国古代改革的类型- 富国强兵,