台州铭企做的网站,上海注册,搜索引擎优化教材答案,厦门专业网站营销#1. 代码设计模式
# 我们写代码到底是在写什么#xff1f;
我们写项目其实就是写模块然后设计它们之间的沟通#xff0c;设计模式说白了就是帮助我们更好的设计模块#xff0c; 更好的组织它们之间的沟通。
# 设计模式扮演的角色 帮助我们组织模块 通过一些设计模式…#1. 代码设计模式
# 我们写代码到底是在写什么
我们写项目其实就是写模块然后设计它们之间的沟通设计模式说白了就是帮助我们更好的设计模块 更好的组织它们之间的沟通。
# 设计模式扮演的角色 帮助我们组织模块 通过一些设计模式组织模块间的组成结构 帮助我们设计沟通 有的设计模式可以帮助我们设计模块间如何沟通 提高代码质量 通过设计模式让代码更加优雅
# 设计原则 开闭原则 我们的程序要对扩展开放对修改关闭我们的程序要给具体使用的时候扩展的接口但是在具体使用的时候不能让其修改我们的源码 也就是说我们不用修改源码就能扩展功能像 vuereact 等都有扩展的接口。 单一职责原则 我们的模块只做一件事情模块的职责越单一越好。 依赖倒置原则 我们的上层模块不要依赖与具体的下层模块应该依赖于抽象
假如下面是一套点餐系统我们在上层和下层之间加一个抽象层下层如何变动都不会影响到上层只需更改抽象层即可。 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 具体层/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Food1/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Food2/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Food3/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#999999// 抽象层/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49resturn/spanspan stylecolor:#cccccc(/spanfoodspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span list span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanfood1span stylecolor:#67cdcc:/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555Food1/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc,/spanfood2span stylecolor:#67cdcc:/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555Food2/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc,/spanfood3span stylecolor:#67cdcc:/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555Food3/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdreturn/span listspan stylecolor:#cccccc[/spanfoodspan stylecolor:#cccccc]/span
span stylecolor:#cccccc}/spanspan stylecolor:#999999// 上层/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49order/spanspan stylecolor:#cccccc(/spanfoodspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#f08d49resturn/spanspan stylecolor:#cccccc(/spanfoodspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
/code/span/span/span 接口隔离原则
我们的接口要细化功能要单一一个接口不要调用太多方法使其能力单一听起来像单一职责原则但是 2 者的关注点不同 单一职责原则主要关注于模块本身接口隔离原则关注于接口我们尽量细化接口每个接口做的事情尽量单一化。
迪米特法则
我们让 2 个对象之间产生沟通我们最好让 2 个对象之间知道的越少越好没必要 2 者之间非常的了解我们的中介者模式是一个很好体现迪米特法则的设计模式中介者模式让 2 个对象之间没必要直接的沟通如果直接沟通需要了解 2 者之间的 api 和彼此的调用方式这个时候我们可以采用一个中介者来转达我们的需求而不用彼此知道
里氏替换原则
它主要关注于继承它的意义是任何使用父类的地方都可以用子类去替换直白的说我们子类继承父类的时候我们的子类必须完全保证继承父类的属性和方法这样的话父类使用的地方子类可以进行替换
后面学习到设计模式都是在体现这些设计原则
# 设计模式的分类
创建型
这些设计模式可以帮助我们优雅地创建对象
结构型
帮助我们优雅地设计代码结构
行为型
模块之间行为的模式总结帮助我们组织模块行为
技巧型
一些帮助我们优化代码的技巧
# 创建型 工厂模式-大量创建对象 单例模式-全局只能有我一个 建造者模式-精细化组合对象 原型模式-javaScript 的灵魂
# 结构型 外观模式-给你的一个套餐 适配器模式-用适配代替更改 装饰者模式-更优雅地扩展需求 享元模式-共享来减少数量 桥接模式-独立出来然后再对接过去
# 行为型 观察者模式-我作为第三方转发 状态模式-用状态代替判断 策略模式-算法工厂 职责链模式-像生产线一样组织模块 命令模式-用命令去解耦 迭代器模式-告别 for 循环
# 技巧模式 链模式-链式调用 委托模式-让别人代替你收快递 数据访问模式-一个方便的数据管理器 惰性模式-我要搞机器学习第一次执行完后把状态记录下来 等待者模式-等你们都回来再吃饭
#2. 封装对象
创建型设计模式到底是怎么样使用的利用创建型设计模式更好的封装代码更好的创建对象
封装的目的 定义的变量不会污染到外部 能够作为一个模块调用 遵循开闭原则
什么是好的封装 变量外部不可见 调用接口使用 留出扩展接口
#2.1 封装对象时的设计模式
# 创建一个对象的模式 工厂模式 目的方便我们大量创建对象 应用场景当某一个对象需要经常创建的时候 建造者模式 目的需要组合出一个全局对象 应用场景当要创建单个、庞大的组合对象时
# 保障对象全局只有一个 单例模式 目的需要确保全局只有一个对象 应用场景为了避免重复新建避免多个对象存在相互干扰
#2.2 基本结构
# 工厂模式的基本结构 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Factory/span span stylecolor:#cccccc(/spantypespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdswitch/span span stylecolor:#cccccc(/spantypespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdcase/span span stylecolor:#7ec699type1/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555Type1/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdcase/span span stylecolor:#7ec699type2/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555Type2/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdcase/span span stylecolor:#7ec699type3/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555Type3/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
/code/span/span/span 工厂模式就是写一个方法只需调用这个方法就能拿到你要的对象
# 建造者模式的基本结构 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 模块1/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Mode1/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#999999// 模块2/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Mode2/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#999999// 最终使用的类/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Final/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanmode1 span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555Model/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanmode2 span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555Mode2/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
/code/span/span/span 把一个复杂的类各个部分拆分成独立的类然后再最终类里组合到一块final 为最终给出去的类
# 单例模式的基本结构
单例模式的做法不是很固定我们更重要的记住是保证全局只有一个对象的思想 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 作为单例实例化的对象/span
span stylecolor:#cc99cdlet/span span stylecolor:#f08d49SingLeton/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spannamespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanname span stylecolor:#67cdcc/span name
span stylecolor:#cccccc}/span
span stylecolor:#999999/*
在SingLeton挂在一个getInstance方法只能通过getInstance方法来获取
SingLeton的实力化对象
*//span
SingLetonspan stylecolor:#cccccc./spanspan stylecolor:#f08d49getInstance/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spannamespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spaninstancespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spaninstancespan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spaninstance span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555SingLeton/spanspan stylecolor:#cccccc(/spannamespan stylecolor:#cccccc)/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
/code/span/span/span 通过定义一个方法使用时只允许通过此方法拿到存在内部的同一实例化对象
#2.3 应用示例
# 工厂模式的示例
实现一个多彩的弹窗
需求弹窗有多种它们之间存在内容和颜色上的差异 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cccccc;/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#f8c555ROOT/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999// 消息弹性/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49infoPop/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#999999// 确认弹窗/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49confirmPop/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#999999// 取消弹窗/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49cancelPop/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#999999// 弹窗工厂/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49pop/spanspan stylecolor:#cccccc(/spantypespan stylecolor:#cccccc,/span contentspan stylecolor:#cccccc,/span colorspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdswitch/span span stylecolor:#cccccc(/spantypespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdcase/span span stylecolor:#7ec699infoPop/spanspan stylecolor:#67cdcc:/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555infoPop/spanspan stylecolor:#cccccc(/spancontentspan stylecolor:#cccccc,/span colorspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdcase/span span stylecolor:#7ec699confirmPop/spanspan stylecolor:#67cdcc:/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555confirmPop/spanspan stylecolor:#cccccc(/spancontentspan stylecolor:#cccccc,/span colorspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdcase/span span stylecolor:#7ec699confircancelPopmPop/spanspan stylecolor:#67cdcc:/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555cancelPop/spanspan stylecolor:#cccccc(/spancontentspan stylecolor:#cccccc,/span colorspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanspan stylecolor:#f8c555ROOT/spanspan stylecolor:#cccccc./spanpop span stylecolor:#67cdcc/span pop
span stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc(/spanwindowspan stylecolor:#cccccc)/span
span stylecolor:#999999// 根据传入不同的参数来来弹出不同的弹窗/span
span stylecolor:#f08d49pop/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699infoPop/spanspan stylecolor:#cccccc,/span span stylecolor:#7ec699开始/spanspan stylecolor:#cccccc,/span span stylecolor:#7ec699white/spanspan stylecolor:#cccccc)/span
/code/span/span/span 上面这种写法有个弊端就是不能 new pop当用户用 new 关键词就不适用了 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cccccc;/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#f8c555ROOT/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49pop/spanspan stylecolor:#cccccc(/spantypespan stylecolor:#cccccc,/span contentspan stylecolor:#cccccc,/span colorspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/span span stylecolor:#cc99cdinstanceof/span span stylecolor:#f8c555pop/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span s span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc[/spantypespan stylecolor:#cccccc]/spanspan stylecolor:#cccccc(/spancontentspan stylecolor:#cccccc,/span colorspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdreturn/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555pop/spanspan stylecolor:#cccccc(/spantypespan stylecolor:#cccccc,/span contentspan stylecolor:#cccccc,/span colorspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanpopspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49infoPop/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanpopspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49confirmPop/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanpopspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49cancelPop/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#f8c555ROOT/spanspan stylecolor:#cccccc./spanpop span stylecolor:#67cdcc/span pop
span stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc(/spanwindowspan stylecolor:#cccccc)/spanspan stylecolor:#f08d49pop/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699infoPop/spanspan stylecolor:#cccccc,/span span stylecolor:#7ec699开始/spanspan stylecolor:#cccccc,/span span stylecolor:#7ec699white/spanspan stylecolor:#cccccc)/span
/code/span/span/span jQuery 源码示例
需求jQuery 需要操作 dom每个 dom 都是一个 jq 对象 总结工厂模式就是要把我们要暴露的对象真正要实例化的对象先封装到函数的内部然后我们只暴露一个工厂方法使用者通过这个工厂方法 来获取我们实例话的对象它的优势方便我们大量的创建对象。
# 建造者模式的示例
编写一个编辑器插件
需求有一个编辑器插件初始化的时候需要配置大量参数而且内部功能很多 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 最终类/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Editor/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanintt span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555initHTML/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanfontControll span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555fontControll/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstateControll span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555stateControll/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/spanspan stylecolor:#999999// 初始化html的类最终渲染成dom/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49initHTML/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#999999// 初始化控制样式的方法/span
initHTMLspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49initStyle/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#999999// 初始化渲染成dom的方法/span
initHTMLspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49renderDom/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#999999// 改变字体颜色大小的类/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49fontControll/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#999999// 控制颜色的方法/span
fontControllspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49changeColor/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#999999// 控制字体大小的方法/span
fontControllspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49changeFontsize/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#999999// 改变状态类为了前进后退/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49stateControll/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstate span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanspan stylecolor:#cccccc]/span span stylecolor:#999999//存储状态/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spannowstate span stylecolor:#67cdcc/span span stylecolor:#f08d490/span span stylecolor:#999999//状态指针/span
span stylecolor:#cccccc}/span
span stylecolor:#999999//保存状态的方法/span
stateControllspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49saveState/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#999999//回滚状态的方法/span
stateControllspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49saveBack/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span state span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstatespan stylecolor:#cccccc[/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spannowstate span stylecolor:#67cdcc-/span span stylecolor:#f08d491/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanfontControllspan stylecolor:#cccccc./spanspan stylecolor:#f08d49changeColor/spanspan stylecolor:#cccccc(/spanstatespan stylecolor:#cccccc./spancolorspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanfontControllspan stylecolor:#cccccc./spanspan stylecolor:#f08d49changeFontsize/spanspan stylecolor:#cccccc(/spanstatespan stylecolor:#cccccc./spancolorspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
span stylecolor:#999999//前进状态的方法/span
stateControllspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49saveGo/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanwindowspan stylecolor:#cccccc./spanEditor span stylecolor:#67cdcc/span Editor
/code/span/span/span 建造者模式是把它的模块抽离出独立的类然后在组合起来
vue 初始化
需求vue 内部众多模块而且过程复杂vue 类也可以看做是一个建造者模式 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Vue/spanspan stylecolor:#cccccc(/spanoptionsspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#999999// 只允许用户用new操作符如果直接调用就抛出警告/spanspan stylecolor:#cc99cdif/spanspan stylecolor:#cccccc(/spanspan stylecolor:#67cdcc!/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/span span stylecolor:#cc99cdinstanceof/span span stylecolor:#f8c555Vue/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanconsolespan stylecolor:#cccccc./spanspan stylecolor:#f08d49warn/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699Vue is a constructor and should be called with the new keyword/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#999999// 初始化配置项/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49_init/spanspan stylecolor:#cccccc(/spanoptionsspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/spaninitMixinVuespan stylecolor:#cccccc)/span span stylecolor:#999999// 初始化系统混入到Vue中去/span
span stylecolor:#f08d49stateMixin/spanspan stylecolor:#cccccc(/spanVuespan stylecolor:#cccccc)/span span stylecolor:#999999// 状态系统混入到Vue中去/span
span stylecolor:#f08d49eventsMixin/spanspan stylecolor:#cccccc(/spanVuespan stylecolor:#cccccc)/span span stylecolor:#999999// 事件系统的混入/span
span stylecolor:#f08d49lifecycleMixin/spanspan stylecolor:#cccccc(/spanVuespan stylecolor:#cccccc)/span span stylecolor:#999999// 生命周期混入/span
span stylecolor:#f08d49renderMixin/spanspan stylecolor:#cccccc(/spanVuespan stylecolor:#cccccc)/span span stylecolor:#999999// 渲染混入/span/code/span/span/span 通过这些方法和我们上一个案例把模块独立成一个类把这些类放到暴露出的类里面是一个道理 只不过这里改成方法vue 中所有的功能都是独立开发通过这一系列的混入将其混入进去
# 单例模式的示例
写一个数据存储对象
需求项目中有一个全局的数据存储者这个存储者只能有一个 不然会需要进行同步增加复杂度 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49store/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstate span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanstorespan stylecolor:#cccccc./spaninstallspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span storespan stylecolor:#cccccc./spaninstallspan stylecolor:#cccccc}/spanstorespan stylecolor:#cccccc./spaninstall span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/span
span stylecolor:#cccccc}/spanstorespan stylecolor:#cccccc./spaninstall span stylecolor:#67cdcc/span span stylecolor:#cc99cdnull/span
span stylecolor:#cc99cdvar/span s1 span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555store/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
span stylecolor:#cc99cdvar/span s2 span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555store/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
s1span stylecolor:#cccccc./spanstatespan stylecolor:#cccccc./spana span stylecolor:#67cdcc/span span stylecolor:#f08d491/span
consolespan stylecolor:#cccccc./spanspan stylecolor:#f08d49log/spanspan stylecolor:#cccccc(/spans1span stylecolor:#cccccc,/span s2span stylecolor:#cccccc)/span span stylecolor:#999999// store { state: { a: 1 } } store { state: { a: 1 } }/span
/code/span/span/span vue-router
需求vue-router 必须 保障全局有且只有一个否则的话会错乱 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdlet/span _Vue
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49install/spanspan stylecolor:#cccccc(/spanVuespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spaninstallspan stylecolor:#cccccc./spaninstalled span stylecolor:#67cdcc/span _Vue span stylecolor:#67cdcc/span vuespan stylecolor:#cccccc)/span span stylecolor:#cc99cdreturn/spaninstallspan stylecolor:#cccccc./spaninstalled span stylecolor:#67cdcc/span span stylecolor:#f08d49true/span_Vue span stylecolor:#67cdcc/span vue
span stylecolor:#cccccc}/span
/code/span/span/span #2.4 总结
工厂模式如果你写的模块需要大量创建类似的对象
建造者模式需要创建一个需要大量参数且内部模块庞大
单例模式防止重复注册防止有多个对象互相干扰
#3 .提高复用性
什么是好的复用
对象可以再重复使用不用修改重复代码少模块功能单一
#3.1 提高复用性的设计模式
减少代码数量高效复用代码 桥接模式 目的通过桥接代替耦合 应用场景减少模块之间的耦合 享元模式 目的减少对象/代码数量 应用场景当代码中创建了大量类似对象和类似的代码块
创建高可复用性的代码 模版方法模式 目的定义一系列操作的骨架简化后面类似操作的内容 应用场景当项目中出现很多类似操作内容
#3.2 基本结构 桥接模式 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 有三种形状每种形状都有3种颜色/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49rect/spanspan stylecolor:#cccccc(/spancolorspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999//矩形/spanspan stylecolor:#f08d49showcolor/spanspan stylecolor:#cccccc(/spancolorspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49circle/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999// 圆形/spanspan stylecolor:#f08d49showcolor/spanspan stylecolor:#cccccc(/spanclorspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49delta/spanspan stylecolor:#cccccc(/spancolorspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999// 三角形/spanspan stylecolor:#f08d49showcolor/spanspan stylecolor:#cccccc(/spanclorspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/spanspan stylecolor:#cc99cdnew/span span stylecolor:#f8c555circle/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699red/spanspan stylecolor:#cccccc)/span
/code/span/span/span 对于 3 种形状、每种形状有 3 种颜色的需求可以不用创建 9 种不同颜色的不同形状这个模式把重复的方法抽取出来然后在桥接出去
这个模式跟我们的建造者模式很类似拆分再组合建造者模式的核心是如何去构造对象而我们桥接模式是如何简化我们的代码提高我们的可复用性一个关注的是功能一个关注的是创建这是它们的区别。
享元模式 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccode span stylecolor:#999999// 有一百种不同文字的弹窗每种弹窗行为相同但是文字和样式不同我们没必要新间一百个弹窗对象/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Pop/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#999999// 保留同样的行为/spanspan stylecolor:#f8c555Pop/spanspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49action/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#999999//显示/spanspan stylecolor:#f8c555Pop/spanspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49show/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#999999// 提取出每个弹窗不同的部分作为一个外部数组/spanspan stylecolor:#cc99cdvar/span popArrspan stylecolor:#67cdcc/spanspan stylecolor:#cccccc[/spanspan stylecolor:#cccccc{/spantextspan stylecolor:#67cdcc:/spanspan stylecolor:#7ec699window1/spanspan stylecolor:#cccccc,/spanstylespan stylecolor:#67cdcc:/spanspan stylecolor:#cccccc[/spanspan stylecolor:#f08d49400/spanspan stylecolor:#cccccc,/spanspan stylecolor:#f08d49400/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc{/spantextspan stylecolor:#67cdcc:/spanspan stylecolor:#7ec699window2/spanspan stylecolor:#cccccc,/spanstylespan stylecolor:#67cdcc:/spanspan stylecolor:#cccccc[/spanspan stylecolor:#f08d49400/spanspan stylecolor:#cccccc,/spanspan stylecolor:#f08d49200/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cc99cdvar/span poperspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdnew/span span stylecolor:#f8c555Pop/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdfor/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdvar/span ispan stylecolor:#67cdcc/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc;/spanispan stylecolor:#67cdcc/spanspan stylecolor:#f08d49100/spanspan stylecolor:#cccccc;/spanispan stylecolor:#67cdcc/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanpoperspan stylecolor:#cccccc./spanspan stylecolor:#f08d49show/spanspan stylecolor:#cccccc(/spanpopArrspan stylecolor:#cccccc[/spanispan stylecolor:#cccccc]/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
/code/span/span/span 只需一个类不需要 new 一百次弹窗这个类只保留所有弹窗共有的每个弹窗不同的部分留作为一个公共享元
#模版方法模式 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 编写导航组件有的带消息提示有的竖着有的横者/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49baseNav/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999// 基础类此处定下基本骨架/span
span stylecolor:#cccccc}/spanbaseNavspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49action/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanfnspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999// 特异性的处理留一个回调等待具体实现/span
span stylecolor:#cccccc}/span
/code/span/span/span 导航组件多种多样可能后面还会新增类型那么我们不妨写一个基础的组件库然后具体的实现延迟到具体的使用时
#3.3 应用示例
# 桥接模式的示例
创建不同的选中效果
需求有一组菜单上面每种选项都有不同的选中效果 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 一般做法/span
span stylecolor:#999999//menu1,menu2,menu3/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49menuItem/spanspan stylecolor:#cccccc(/spanwordspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanword span stylecolor:#67cdcc/span span stylecolor:#7ec699/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandom span stylecolor:#67cdcc/span documentspan stylecolor:#cccccc./spanspan stylecolor:#f08d49createElement/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699div/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandomspan stylecolor:#cccccc./spaninnerHTML span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanword
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdvar/span menu1 span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555menuItem/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699menu1/spanspan stylecolor:#cccccc)/span
span stylecolor:#cc99cdvar/span menu2 span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555menuItem/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699menu2/spanspan stylecolor:#cccccc)/span
span stylecolor:#cc99cdvar/span menu3 span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555menuItem/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699menu3/spanspan stylecolor:#cccccc)/span
menu1span stylecolor:#cccccc./spanspan stylecolor:#f08d49onmouseover/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanmenu1span stylecolor:#cccccc./spanstylespan stylecolor:#cccccc./spancolor span stylecolor:#67cdcc/span span stylecolor:#7ec699red/span
span stylecolor:#cccccc}/span
menu2span stylecolor:#cccccc./spanspan stylecolor:#f08d49onmouseover/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanmenu1span stylecolor:#cccccc./spanstylespan stylecolor:#cccccc./spancolor span stylecolor:#67cdcc/span span stylecolor:#7ec699green/span
span stylecolor:#cccccc}/span
menu3span stylecolor:#cccccc./spanspan stylecolor:#f08d49onmouseover/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanmenu1span stylecolor:#cccccc./spanstylespan stylecolor:#cccccc./spancolor span stylecolor:#67cdcc/span span stylecolor:#7ec699blue/span
span stylecolor:#cccccc}/span
menu1span stylecolor:#cccccc./spanspan stylecolor:#f08d49onmouseout/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanmenu1span stylecolor:#cccccc./spanstylespan stylecolor:#cccccc./spancolor span stylecolor:#67cdcc/span span stylecolor:#7ec699white/span
span stylecolor:#cccccc}/span
menu2span stylecolor:#cccccc./spanspan stylecolor:#f08d49onmouseout/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanmenu1span stylecolor:#cccccc./spanstylespan stylecolor:#cccccc./spancolor span stylecolor:#67cdcc/span span stylecolor:#7ec699white/span
span stylecolor:#cccccc}/span
menu3span stylecolor:#cccccc./spanspan stylecolor:#f08d49onmouseout/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanmenu1span stylecolor:#cccccc./spanstylespan stylecolor:#cccccc./spancolor span stylecolor:#67cdcc/span span stylecolor:#7ec699white/span
span stylecolor:#cccccc}/spanspan stylecolor:#999999// 桥接模式做法/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49menuItem/spanspan stylecolor:#cccccc(/spanwordspan stylecolor:#cccccc,/span colorspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanword span stylecolor:#67cdcc/span wordspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spancolor span stylecolor:#67cdcc/span colorspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandom span stylecolor:#67cdcc/span documentspan stylecolor:#cccccc./spanspan stylecolor:#f08d49createElement/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699div/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandomspan stylecolor:#cccccc./spaninnerHTML span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanworddocumentspan stylecolor:#cccccc./spanspan stylecolor:#f08d49getElementById/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699app/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49appendChild/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandomspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/spanmenuItemspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49bind/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span self span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandomspan stylecolor:#cccccc./spanspan stylecolor:#f08d49onmouseover/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanconsolespan stylecolor:#cccccc./spanspan stylecolor:#f08d49log/spanspan stylecolor:#cccccc(/spanselfspan stylecolor:#cccccc./spancolorspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstylespan stylecolor:#cccccc./spancolor span stylecolor:#67cdcc/span selfspan stylecolor:#cccccc./spancolorspan stylecolor:#cccccc./spancolorOverspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandomspan stylecolor:#cccccc./spanspan stylecolor:#f08d49onmouseout/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstylespan stylecolor:#cccccc./spancolor span stylecolor:#67cdcc/span selfspan stylecolor:#cccccc./spancolorspan stylecolor:#cccccc./spancolorOutspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49menuColor/spanspan stylecolor:#cccccc(/spancoloroverspan stylecolor:#cccccc,/span coloroutspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spancolorOver span stylecolor:#67cdcc/span coloroverspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spancolorOut span stylecolor:#67cdcc/span colorout
span stylecolor:#cccccc}/spanspan stylecolor:#cc99cdvar/span data span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanspan stylecolor:#cccccc{/span wordspan stylecolor:#67cdcc:/span span stylecolor:#7ec699menu1/spanspan stylecolor:#cccccc,/span colorspan stylecolor:#67cdcc:/span span stylecolor:#cccccc[/spanspan stylecolor:#7ec699red/spanspan stylecolor:#cccccc,/span span stylecolor:#7ec699black/spanspan stylecolor:#cccccc]/span span stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanspan stylecolor:#cccccc{/span wordspan stylecolor:#67cdcc:/span span stylecolor:#7ec699menu2/spanspan stylecolor:#cccccc,/span colorspan stylecolor:#67cdcc:/span span stylecolor:#cccccc[/spanspan stylecolor:#7ec699green/spanspan stylecolor:#cccccc,/span span stylecolor:#7ec699black/spanspan stylecolor:#cccccc]/span span stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanspan stylecolor:#cccccc{/span wordspan stylecolor:#67cdcc:/span span stylecolor:#7ec699menu3/spanspan stylecolor:#cccccc,/span colorspan stylecolor:#67cdcc:/span span stylecolor:#cccccc[/spanspan stylecolor:#7ec699blue/spanspan stylecolor:#cccccc,/span span stylecolor:#7ec699black/spanspan stylecolor:#cccccc]/span span stylecolor:#cccccc}/span
span stylecolor:#cccccc]/span
span stylecolor:#cc99cdfor/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdvar/span i span stylecolor:#67cdcc/span span stylecolor:#f08d490/spanspan stylecolor:#cccccc;/span i span stylecolor:#67cdcc/span dataspan stylecolor:#cccccc./spanlengthspan stylecolor:#cccccc;/span ispan stylecolor:#67cdcc/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdnew/span span stylecolor:#f8c555menuItem/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc[/spanispan stylecolor:#cccccc]/spanspan stylecolor:#cccccc./spanwordspan stylecolor:#cccccc,/spanspan stylecolor:#cc99cdnew/span span stylecolor:#f8c555menuColor/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc[/spanispan stylecolor:#cccccc]/spanspan stylecolor:#cccccc./spancolorspan stylecolor:#cccccc[/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc,/span dataspan stylecolor:#cccccc[/spanispan stylecolor:#cccccc]/spanspan stylecolor:#cccccc./spancolorspan stylecolor:#cccccc[/spanspan stylecolor:#f08d491/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49bind/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
/code/span/span/span Express 中创建 get 等方法
需求express 中 getpost 等方法有七八个如何快速地创建。 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdvar/span methods span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanspan stylecolor:#7ec699get/spanspan stylecolor:#cccccc,/span span stylecolor:#7ec699post/spanspan stylecolor:#cccccc,/span span stylecolor:#7ec699delete/spanspan stylecolor:#cccccc,/span span stylecolor:#7ec699put/spanspan stylecolor:#cccccc]/span
methodsspan stylecolor:#cccccc./spanspan stylecolor:#f08d49forEach/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanmethodspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanappspan stylecolor:#cccccc[/spanmethodspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999//利用桥接过来的route来完成postget等请求/spanroutespan stylecolor:#cccccc[/spanmethodspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49apply/spanspan stylecolor:#cccccc(/spanroutespan stylecolor:#cccccc,/span span stylecolor:#f08d49slice/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49call/spanspan stylecolor:#cccccc(/spanargumentsspan stylecolor:#cccccc,/span span stylecolor:#f08d491/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span
/code/span/span/span #享元模式的示例
文件上传
需求项目中有一个文件上传功能该功能可以上传多个文件
一般做法 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999//文件上传/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49uploader/spanspan stylecolor:#cccccc(/spanfileTypespan stylecolor:#cccccc,/span filespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanfileType span stylecolor:#67cdcc/span fileTypespan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanfile span stylecolor:#67cdcc/span file
span stylecolor:#cccccc}/span
uploaderspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49init/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999//初始化文件上传的html/span
span stylecolor:#cccccc}/span
uploaderspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49delete/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999//删除掉该html/span
span stylecolor:#cccccc}/span
uploaderspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49uploading/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999//上传/span
span stylecolor:#cccccc}/spanspan stylecolor:#cc99cdnew/span span stylecolor:#f8c555uploader/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699img/spanspan stylecolor:#cccccc,/span fileob1span stylecolor:#cccccc)/span
span stylecolor:#cc99cdnew/span span stylecolor:#f8c555uploader/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699txt/spanspan stylecolor:#cccccc,/span fileob2span stylecolor:#cccccc)/span
span stylecolor:#cc99cdnew/span span stylecolor:#f8c555uploader/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699img/spanspan stylecolor:#cccccc,/span fileob3span stylecolor:#cccccc)/span
span stylecolor:#cc99cdnew/span span stylecolor:#f8c555uploader/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699word/spanspan stylecolor:#cccccc,/span fileob4span stylecolor:#cccccc)/span
/code/span/span/span 享元模式 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999//fileType,file/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49uploader/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
uploaderspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49init/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999//初始化文件上传的html/span
span stylecolor:#cccccc}/span
uploaderspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49delete/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999//删除掉该html/span
span stylecolor:#cccccc}/span
uploaderspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49uploading/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanfiletypespan stylecolor:#cccccc,/span filespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdvar/span fileob1span stylecolor:#cccccc,/span fileob2span stylecolor:#cccccc,/span fileob3span stylecolor:#cccccc,/span fileob4
span stylecolor:#cc99cdvar/span data span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanspan stylecolor:#cccccc{/spantypespan stylecolor:#67cdcc:/span span stylecolor:#7ec699img/spanspan stylecolor:#cccccc,/spanfilespan stylecolor:#67cdcc:/span fileob1span stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanspan stylecolor:#cccccc{/spantypespan stylecolor:#67cdcc:/span span stylecolor:#7ec699txt/spanspan stylecolor:#cccccc,/spanfilespan stylecolor:#67cdcc:/span fileob2span stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanspan stylecolor:#cccccc{/spantypespan stylecolor:#67cdcc:/span span stylecolor:#7ec699img/spanspan stylecolor:#cccccc,/spanfilespan stylecolor:#67cdcc:/span fileob3span stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanspan stylecolor:#cccccc{/spantypespan stylecolor:#67cdcc:/span span stylecolor:#7ec699word/spanspan stylecolor:#cccccc,/spanfilespan stylecolor:#67cdcc:/span fileob4span stylecolor:#cccccc}/span
span stylecolor:#cccccc]/span
span stylecolor:#cc99cdvar/span uploader span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555uploader/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
span stylecolor:#cc99cdfor/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdvar/span i span stylecolor:#67cdcc/span span stylecolor:#f08d490/spanspan stylecolor:#cccccc;/span i span stylecolor:#67cdcc/span dataspan stylecolor:#cccccc./spanlengthspan stylecolor:#cccccc;/span ispan stylecolor:#67cdcc/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanuploaderspan stylecolor:#cccccc./spanspan stylecolor:#f08d49uploading/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc[/spanispan stylecolor:#cccccc]/spanspan stylecolor:#cccccc./spantypespan stylecolor:#cccccc,/span dataspan stylecolor:#cccccc[/spanispan stylecolor:#cccccc]/spanspan stylecolor:#cccccc./spanfilespan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
/code/span/span/span jQuery 的 extend
需求extends 方法需要判断参数数量来进行不同的操作 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 一般做法/span
span stylecolor:#cc99cdvar/span jQuery span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
jQueryspan stylecolor:#cccccc./spanfn span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
jQueryspan stylecolor:#cccccc./spanextend span stylecolor:#67cdcc/span jQueryspan stylecolor:#cccccc./spanfnspan stylecolor:#cccccc./spanspan stylecolor:#f08d49extend/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanargumentsspan stylecolor:#cccccc./spanlength span stylecolor:#67cdcc/span span stylecolor:#f08d491/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdfor/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdvar/span item span stylecolor:#cc99cdin/span argumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc[/spanitemspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span argumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc[/spanitemspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanargumentsspan stylecolor:#cccccc./spanlength span stylecolor:#67cdcc/span span stylecolor:#f08d492/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdfor/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdvar/span item span stylecolor:#cc99cdin/span argumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d491/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanargumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc[/spanitemspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span argumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d491/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc[/spanitemspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdreturn/span argumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/spanspan stylecolor:#999999// 享元做法保留一个公共的for循环/span
jQueryspan stylecolor:#cccccc./spanextend span stylecolor:#67cdcc/span jQueryspan stylecolor:#cccccc./spanfnspan stylecolor:#cccccc./spanspan stylecolor:#f08d49extend/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span target span stylecolor:#67cdcc/span argumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cc99cdvar/span sourcespan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanargumentsspan stylecolor:#cccccc./spanlength span stylecolor:#67cdcc/span span stylecolor:#f08d491/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spantarget span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spansource span stylecolor:#67cdcc/span argumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanargumentsspan stylecolor:#cccccc./spanlength span stylecolor:#67cdcc/span span stylecolor:#f08d492/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spantarget span stylecolor:#67cdcc/span argumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc]/spansource span stylecolor:#67cdcc/span argumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d491/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfor/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdvar/span item span stylecolor:#cc99cdin/span sourcespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spantargetspan stylecolor:#cccccc[/spanitemspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span sourcespan stylecolor:#cccccc[/spanitemspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdreturn/span target
span stylecolor:#cccccc}/span
/code/span/span/span # 模版方法模式的示例
编写一个弹窗组件
需求项目有一系列弹窗每个弹窗的行为、大小、文字不同 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49basePop/spanspan stylecolor:#cccccc(/spanwordspan stylecolor:#cccccc,/span sizespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanword span stylecolor:#67cdcc/span wordspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spansize span stylecolor:#67cdcc/span sizespan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandom span stylecolor:#67cdcc/span span stylecolor:#cc99cdnull/span
span stylecolor:#cccccc}/span
basePopspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49init/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span div span stylecolor:#67cdcc/span documentspan stylecolor:#cccccc./spanspan stylecolor:#f08d49createElement/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699div/spanspan stylecolor:#cccccc)/spandivspan stylecolor:#cccccc./spaninnerHTML span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanworddivspan stylecolor:#cccccc./spanstylespan stylecolor:#cccccc./spanwidth span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spansizespan stylecolor:#cccccc./spanwidth span stylecolor:#67cdcc/span span stylecolor:#7ec699px/spandivspan stylecolor:#cccccc./spanstylespan stylecolor:#cccccc./spanheight span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spansizespan stylecolor:#cccccc./spanheight span stylecolor:#67cdcc/span span stylecolor:#7ec699px/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandom span stylecolor:#67cdcc/span div
span stylecolor:#cccccc}/span
basePopspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49hidden/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999//定义基础操作/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandomspan stylecolor:#cccccc./spanstylespan stylecolor:#cccccc./spandisplay span stylecolor:#67cdcc/span span stylecolor:#7ec699none/span
span stylecolor:#cccccc}/span
basePopspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49confirm/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999//定义基础操作/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandomspan stylecolor:#cccccc./spanstylespan stylecolor:#cccccc./spandisplay span stylecolor:#67cdcc/span span stylecolor:#7ec699none/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49ajaxPop/spanspan stylecolor:#cccccc(/spanwordspan stylecolor:#cccccc,/span sizespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49basePop/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49call/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc,/span wordspan stylecolor:#cccccc,/span sizespan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
ajaxPopspan stylecolor:#cccccc./spanprototype span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555basePop/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
span stylecolor:#cc99cdvar/span hidden span stylecolor:#67cdcc/span ajaxPopspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanhidden
ajaxPopspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49hidden/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49hidden/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49call/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc)/spanconsolespan stylecolor:#cccccc./spanspan stylecolor:#f08d49log/spanspan stylecolor:#cccccc(/spanspan stylecolor:#f08d491/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdvar/span confirm span stylecolor:#67cdcc/span ajaxPopspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanconfirm
ajaxPopspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49confirm/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49confirm/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49call/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc)/spanconsolespan stylecolor:#cccccc./spanspan stylecolor:#f08d49log/spanspan stylecolor:#cccccc(/spanspan stylecolor:#f08d491/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdvar/span pop span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555ajaxPop/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699sendmes/spanspan stylecolor:#cccccc,/span span stylecolor:#cccccc{/span widthspan stylecolor:#67cdcc:/span span stylecolor:#f08d49100/spanspan stylecolor:#cccccc,/span heightspan stylecolor:#67cdcc:/span span stylecolor:#f08d49300/span span stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span
popspan stylecolor:#cccccc./spanspan stylecolor:#f08d49init/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
popspan stylecolor:#cccccc./spanspan stylecolor:#f08d49confirm/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdvar/span axios span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49get/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span Promisespan stylecolor:#cccccc./spanspan stylecolor:#f08d49resolve/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
/code/span/span/span 上面这个就是我们面向对象中的继承模版模式不一定非要通过继承方式来完成它强调先定义后面进行不同维度的操作的基本行为
然后在这个基本行为上有扩展的空间这就是我们模版方法的目的。
封装一个算法计算器
需求现在我们有一系列自己的算法但是这个算法常在不同的地方需要增加一些不同的操作 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999//算法计算器/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49counter/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanbeforeCounter span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanafterCounter span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanspan stylecolor:#cccccc]/span
span stylecolor:#cccccc}/spanspan stylecolor:#999999//然后我们把具体的不同部分留到具体使用的时候去扩展/span
span stylecolor:#999999//所以我们定义两个方法来扩展/span
counterspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49addBefore/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanfnspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanbeforeCounterspan stylecolor:#cccccc./spanspan stylecolor:#f08d49push/spanspan stylecolor:#cccccc(/spanfnspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
counterspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49addAfter/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanfnspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanafterCounterspan stylecolor:#cccccc./spanspan stylecolor:#f08d49push/spanspan stylecolor:#cccccc(/spanfnspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/spanspan stylecolor:#999999//最终计算方法/span
counterspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49count/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spannumspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999//结果变量/spanspan stylecolor:#cc99cdvar/span _resultnum span stylecolor:#67cdcc/span numspan stylecolor:#999999//算法队列数组组装/spanspan stylecolor:#cc99cdvar/span _arr span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanbaseCountspan stylecolor:#cccccc]/span_arr span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanbeforeCounterspan stylecolor:#cccccc./spanspan stylecolor:#f08d49concat/spanspan stylecolor:#cccccc(/span_arrspan stylecolor:#cccccc)/span_arr span stylecolor:#67cdcc/span _arrspan stylecolor:#cccccc./spanspan stylecolor:#f08d49concat/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanafterCounterspan stylecolor:#cccccc)/spanspan stylecolor:#999999//不同部分的相同算法骨架/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49baseCount/spanspan stylecolor:#cccccc(/spannumspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spannum span stylecolor:#67cdcc/span span stylecolor:#f08d494/spannum span stylecolor:#67cdcc*/span span stylecolor:#f08d492/spanspan stylecolor:#cc99cdreturn/span numspan stylecolor:#cccccc}/spanspan stylecolor:#999999//循环执行算法队列/spanspan stylecolor:#cc99cdwhile/span span stylecolor:#cccccc(/span_arrspan stylecolor:#cccccc./spanlength span stylecolor:#67cdcc/span span stylecolor:#f08d490/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/span_resultnum span stylecolor:#67cdcc/span _arrspan stylecolor:#cccccc./spanspan stylecolor:#f08d49shift/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc(/span_resultnumspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdreturn/span _resultnum
span stylecolor:#cccccc}/span
span stylecolor:#999999//使用/span
span stylecolor:#cc99cdvar/span countObject span stylecolor:#67cdcc/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555counter/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
countObjectspan stylecolor:#cccccc./spanspan stylecolor:#f08d49addBefore/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spannumspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spannumspan stylecolor:#67cdcc--/spanspan stylecolor:#cc99cdreturn/span num
span stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span
countObjectspan stylecolor:#cccccc./spanspan stylecolor:#f08d49addAfter/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spannumspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spannum span stylecolor:#67cdcc*/span span stylecolor:#f08d492/spanspan stylecolor:#cc99cdreturn/span num
span stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span
countObjectspan stylecolor:#cccccc./spanspan stylecolor:#f08d49count/spanspan stylecolor:#cccccc(/spanspan stylecolor:#f08d4910/spanspan stylecolor:#cccccc)/span
/code/span/span/span 这个应用了组合实现模版模式
javascript 的组合与继承 组合推荐 javascript 最初没有专门的继承所以最初 javascript 推崇函数式的编程然后进行统一组合桥接到一起桥接模式可以看出组合的一种体现组合的好处是耦合低方便方法复用方便扩展 继承 es6 出现 class 与 extend继承的方式多种多样但是都是各有弊端模版方法模式可以看出继承的一种体现继承的好处是可以自动获得父类的内容与接口方便统一化
#3.4 总结
桥接模式
通过独立方法间接的桥接来形成整体功能这样每个方法都可以被高度复用
享元模式
提取出公有部分与私有部分私有部分作为外部数据传入从而减少对象数量
模版方法模式
当一个功能朝着多样化发展不妨先定义一个基础的把具体实现延迟到后面
#4. 提高可扩展性1
提高可扩展性的目的
面对需求变更方便更该需求减少代码修改的难度
什么是好的扩展
需求的变更不需要重写代码修改不会引起大规模变动方便加入新模块
#4.1 提高可扩展性的设计模式
# 更好的更改代码
适配器模式接口
适配器模式的目的通过写一个适配器来代替替换
适配器模式的应用场景面临接口不通用的问题
装饰者模式方法作用
装饰者模式的目的不重写方法的扩展方法
装饰者模式的应用场景放一个方法需要扩展但是又不好去修改方法
# 解耦你得方法与调用
命令模式
命令模式的目的解耦实现和调用让双方互不干扰
命令模式的应用场景调用的命令充满不确性
#4.2 基本结构
# 适配器模式的基本结构 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdvar/span span stylecolor:#f08d49log/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span winodwspan stylecolor:#cccccc./spanconsolespan stylecolor:#cccccc./spanlog
span stylecolor:#cccccc}/span
/code/span/span/span 想用 log 来代替 console.log
# 装饰者模式的基本结构 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 在一个他人写好的模版a内部调用b模块为他人写好不能修改如何扩展b方法/span
span stylecolor:#cc99cdvar/span a span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49b/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49myb/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanaspan stylecolor:#cccccc./spanspan stylecolor:#f08d49b/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#999999// 要扩展的方法/span
span stylecolor:#cccccc}/span
/code/span/span/span 我们新建一个自己的方法在其内部调用 b 方法并且再执行自己的方法这样可以在不修改原方法的情况下扩展方法
# 命令模式的基本结构 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccode span stylecolor:#cc99cdvar/span commandspan stylecolor:#67cdcc/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#999999// action中定义了各种方法/spanspan stylecolor:#cc99cdvar/span actionspan stylecolor:#67cdcc/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#999999// excure可以调用action方法/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49excure/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#999999// command只需输入命令就可以调用action里的方法/span
/code/span/span/span #4.3 应用示例
#适配器模式示例
框架的变更
需求目前项目使用的 A 框架现在改成了 B2 个框架与十分类似但是有少数几个方法不同 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// A框架调用的方式/span
span stylecolor:#f8c555A/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49c/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
span stylecolor:#999999// 假如我们项目中换成了jQuey我们不想全部去替换A方法就用适配器的方法/span
span stylecolor:#f8c555A/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49c/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span $span stylecolor:#cccccc./spanspan stylecolor:#f08d49on/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49apply/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanargumentsspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
/code/span/span/span 参数适配
需求为了避免参数不适配产生问题很多框架会有一个参数适配操作 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 给参数适配没传值给默认值/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49f1/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span _defalut span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spannamespan stylecolor:#67cdcc:/span span stylecolor:#7ec699/spanspan stylecolor:#cccccc,/spancolorspan stylecolor:#67cdcc:/span span stylecolor:#7ec699/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfor/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdvar/span item span stylecolor:#cc99cdin/span _defalutspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/span_defalutspan stylecolor:#cccccc[/spanitemspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span configspan stylecolor:#cccccc[/spanitemspan stylecolor:#cccccc]/span span stylecolor:#67cdcc||/span _defalutspan stylecolor:#cccccc[/spanitemspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdreturn/span _defalut
span stylecolor:#cccccc}/span
/code/span/span/span # 装饰者模式示例
扩展你的已有事件绑定
需求现在项目改造需要给 input 标签已经有的事件增加一些操作 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdvar/span span stylecolor:#f08d49decorator/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spandomspan stylecolor:#cccccc,/span fnspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdtypeof/span domspan stylecolor:#cccccc./spanonclick span stylecolor:#67cdcc/span span stylecolor:#7ec699function/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span _old span stylecolor:#67cdcc/span domspan stylecolor:#cccccc./spanonclickdomspan stylecolor:#cccccc./spanspan stylecolor:#f08d49onclick/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49_old/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#f08d49fn/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
span stylecolor:#f08d49decorator/spanspan stylecolor:#cccccc(/spandocumentspan stylecolor:#cccccc./spanspan stylecolor:#f08d49getElementById/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699dom1/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc,/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999// 自己的操作/span
span stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span
/code/span/span/span Vue 的数组监听
需求vue 中利用 defineProperty 可以监听对象那么数组怎么办 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdvar/span arrayProto span stylecolor:#67cdcc/span span stylecolor:#f8c555Array/spanspan stylecolor:#cccccc./spanprototype
span stylecolor:#cc99cdvar/span arrayMethods span stylecolor:#67cdcc/span Objectspan stylecolor:#cccccc./spanspan stylecolor:#f08d49create/spanspan stylecolor:#cccccc(/spanarrayProtospan stylecolor:#cccccc)/span
span stylecolor:#cc99cdvar/span methodsToPatch span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanspan stylecolor:#7ec699push/spanspan stylecolor:#cccccc,/spanspan stylecolor:#7ec699pop/spanspan stylecolor:#cccccc,/spanspan stylecolor:#7ec699unshift/spanspan stylecolor:#cccccc,/spanspan stylecolor:#7ec699shift/spanspan stylecolor:#cccccc,/spanspan stylecolor:#7ec699splice/spanspan stylecolor:#cccccc,/spanspan stylecolor:#7ec699resverse/spanspan stylecolor:#cccccc,/spanspan stylecolor:#7ec699sort/span
span stylecolor:#cccccc]/spanmethodsToPatchspan stylecolor:#cccccc./spanspan stylecolor:#f08d49forEach/spanspan stylecolor:#cccccc(/spanmethod span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span original span stylecolor:#67cdcc/span arrayMethodsspan stylecolor:#cccccc[/spanmethodspan stylecolor:#cccccc]/spanobjectspan stylecolor:#cccccc./spanspan stylecolor:#f08d49defineProperty/spanspan stylecolor:#cccccc(/spanarrayMethodsspan stylecolor:#cccccc,/span methodspan stylecolor:#cccccc,/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49value/spanspan stylecolor:#cccccc(/spanspan stylecolor:#67cdcc.../spanargsspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdconst/span result span stylecolor:#67cdcc/span span stylecolor:#f08d49original/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49apply/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc,/span argsspan stylecolor:#cccccc)/spandepspan stylecolor:#cccccc./spanspan stylecolor:#f08d49notify/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdreturn/span resultspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span
/code/span/span/span 装饰者模式拿到老方法调用老方法组成新方法
# 命令模式示例
需求封装一系列的 canvas 绘图命令 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdvar/span span stylecolor:#f08d49myCanvas/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
myCanvasspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49drawCircle/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
myCanvasspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49drawRect/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdvar/span canvasComand span stylecolor:#67cdcc/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span action span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49drawCircle/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanconfigspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanspan stylecolor:#f08d49drawRect/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanconfigspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49excute/spanspan stylecolor:#cccccc(/spancommanderspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spancommanderspan stylecolor:#cccccc./spanspan stylecolor:#f08d49forEach/spanspan stylecolor:#cccccc(/spanitem span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanactionspan stylecolor:#cccccc[/spanitemspan stylecolor:#cccccc./spancommandspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc(/spanitemspan stylecolor:#cccccc./spanconfigspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#f08d49myCanvas/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc[/spanspan stylecolor:#cccccc{/span commandspan stylecolor:#67cdcc:/span span stylecolor:#7ec699drawReact/spanspan stylecolor:#cccccc,/span configspan stylecolor:#67cdcc:/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span span stylecolor:#cccccc}/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc)/span
/code/span/span/span 用户只管输入他要的命令不用关心 api 命令和实现解耦无论命令发生变动还是实现发生变动都不会彼此影响
绘制随数量图片
需求需要做一个画廊图片数量和排列顺序随机 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdvar/span createImg span stylecolor:#67cdcc/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span action span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49create/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanobjspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span htmlArr span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cc99cdvar/span _htmlstring span stylecolor:#67cdcc/span span stylecolor:#7ec699/spanspan stylecolor:#cc99cdvar/span _htmlTemplate span stylecolor:#67cdcc/spanspan stylecolor:#7ec699divimg src{{img-url}} //divh2{{title}}/h2/spanspan stylecolor:#cc99cdvar/span displayWay span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49normal/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanarrspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span arrspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanspan stylecolor:#f08d49reverse/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanarrspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span arrspan stylecolor:#cccccc./spanreversespan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanobjspan stylecolor:#cccccc./spanimgArrspan stylecolor:#cccccc./spanspan stylecolor:#f08d49forEach/spanspan stylecolor:#cccccc(/spanimg span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span _html_html span stylecolor:#67cdcc/span _htmlTemplatespan stylecolor:#cccccc./spanspan stylecolor:#f08d49replace/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699{{img-url}}/spanspan stylecolor:#cccccc,/span imgspan stylecolor:#cccccc./spanimgspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49replace/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699{{title}}/spanspan stylecolor:#cccccc,/span imgspan stylecolor:#cccccc./spantitlespan stylecolor:#cccccc)/spanhtmlArrspan stylecolor:#cccccc./spanspan stylecolor:#f08d49push/spanspan stylecolor:#cccccc(/span_htmlspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanhtmlArr span stylecolor:#67cdcc/span displayWayspan stylecolor:#cccccc[/spanobjspan stylecolor:#cccccc./spantypespan stylecolor:#cccccc]/spanspan stylecolor:#cccccc(/spanhtmlArrspan stylecolor:#cccccc)/span_htmlstring span stylecolor:#67cdcc/span htmlArrspan stylecolor:#cccccc./spanspan stylecolor:#f08d49join/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#7ec699div/span span stylecolor:#67cdcc/span _htmlstring span stylecolor:#67cdcc/span span stylecolor:#7ec699/div/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanspan stylecolor:#f08d49display/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanobjspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span _html span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49create/spanspan stylecolor:#cccccc(/spanobjspan stylecolor:#cccccc)/spanobjspan stylecolor:#cccccc./spantargetspan stylecolor:#cccccc./spaninnerHTML span stylecolor:#67cdcc/span _htmlspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49excute/spanspan stylecolor:#cccccc(/spanobjspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span _default span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanimgArrspan stylecolor:#67cdcc:/span span stylecolor:#cccccc[/spanspan stylecolor:#cccccc{/span imgspan stylecolor:#67cdcc:/span span stylecolor:#7ec699xxxx/spanspan stylecolor:#cccccc,/span titlespan stylecolor:#67cdcc:/span span stylecolor:#7ec699default title/span span stylecolor:#cccccc}/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc,/spantypespan stylecolor:#67cdcc:/span span stylecolor:#7ec699normal/spanspan stylecolor:#cccccc,/spantargetspan stylecolor:#67cdcc:/span documentspan stylecolor:#cccccc./spanbodyspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfor/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdvar/span item span stylecolor:#cc99cdin/span _defaultspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/span_defaultspan stylecolor:#cccccc[/spanitemspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span objspan stylecolor:#cccccc[/spanitemspan stylecolor:#cccccc]/span span stylecolor:#67cdcc||/span _defaultspan stylecolor:#cccccc[/spanitemspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc}/spanactionspan stylecolor:#cccccc./spanspan stylecolor:#f08d49display/spanspan stylecolor:#cccccc(/span_defaultspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
span stylecolor:#f08d49createImg/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc{/spanimgArrspan stylecolor:#67cdcc:/span span stylecolor:#cccccc[/spanspan stylecolor:#cccccc{/span imgspan stylecolor:#67cdcc:/span span stylecolor:#7ec699xxxx/spanspan stylecolor:#cccccc,/span titlespan stylecolor:#67cdcc:/span span stylecolor:#7ec699default title1/span span stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanspan stylecolor:#cccccc{/span imgspan stylecolor:#67cdcc:/span span stylecolor:#7ec699xxxx/spanspan stylecolor:#cccccc,/span titlespan stylecolor:#67cdcc:/span span stylecolor:#7ec699default title2/span span stylecolor:#cccccc}/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc,/spantypespan stylecolor:#67cdcc:/span span stylecolor:#7ec699normal/span
span stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span
/code/span/span/span 数据- excute 命令解析层 - 调用 api
#4.4 总结
适配器模式
当面临两个新老模块间接口 api 不匹配可以用适配来转化 api
装饰者模式
当老的方法不方便去直接修改可以通装饰者来增加功能
命令模式
解耦实现与具体命令让实现端和命令端扩展的都更轻松
#5. 提高可扩展性2
提高整体项目可扩展性的核心 低耦合 良好的组织沟通方式
#5.1 提高可扩展性的设计模式
#应对需求上的变更
观察者模式事件绑定是典型的观察者模式比如 dom 上监视点击了事件点击事件触发以后就去做这个点击事件
观察者模式的目的减少对象间的耦合来提高可扩展性
观察者模式的应用场景当两个模块直接沟通会增加它们的耦合性时
职责链模式
职责链模式的目的为了避免请求发送者与多个请求处理者耦合在一起形成一个链条
组合模式的应用场景把操作分隔成一系列模块每个模块只处理自己的事情 应对需求上的变更
访问者模式的目的解耦数据结构与数据操作
访问者模式的应用场景数据结构不希望与操作有关联
#5.2 基本结构
# 观察者的基本结构 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdfunction/span observe span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanmessagespan stylecolor:#67cdcc/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/spanobservespan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49regist/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spantypespan stylecolor:#cccccc,/spanfnspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanmessagespan stylecolor:#cccccc[/spantypespan stylecolor:#cccccc]/spanspan stylecolor:#67cdcc/spanfn
span stylecolor:#cccccc}/spanobservespan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49fire/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spantypespan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanmessagespan stylecolor:#cccccc[/spantypespan stylecolor:#cccccc]/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/spanobservespan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49remove/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spantypespan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanmessagespan stylecolor:#cccccc[/spantypespan stylecolor:#cccccc]/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdnull/span
span stylecolor:#cccccc}/span
/code/span/span/span 定义一个中转观察者两个模块之间不直接沟通而是通过观察者一般使用与不方便直接沟通或者异步操作
# 职责链模式的基本结构 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49mode1/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49mode2/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49mode3/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span_result span stylecolor:#67cdcc/span span stylecolor:#f08d49mode1/spanspan stylecolor:#cccccc(/span_resultspan stylecolor:#cccccc)/span
_result span stylecolor:#67cdcc/span span stylecolor:#f08d49mode2/spanspan stylecolor:#cccccc(/span_resultspan stylecolor:#cccccc)/span
_result span stylecolor:#67cdcc/span span stylecolor:#f08d49mode3/spanspan stylecolor:#cccccc(/span_resultspan stylecolor:#cccccc)/span
/code/span/span/span 把要做的事情组织为一条有序的链条通过再这条链条传递消息来完成功能适用于不设计到赋值异步操作
#访问者模式的基本结构 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdvar/span data span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cc99cdvar/span span stylecolor:#f08d49handler/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanhandlerspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49get/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdvar/span span stylecolor:#f08d49vistor/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanhandlerspan stylecolor:#cccccc,/span dataspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanhandlerspan stylecolor:#cccccc./spanspan stylecolor:#f08d49get/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
/code/span/span/span 通过定义一个访问者代替直接访问对象来减少两个对象之间的耦合
#5.3 应用示例
# 观察者模式示例
多人合作的问题
需求现在假设 A 工程师写了首页模块然后 B 工程师写了评论模块。现在要把评论展示在首页 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdfunction/span observe span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanmessagespan stylecolor:#67cdcc/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/spanobservespan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49regist/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spantypespan stylecolor:#cccccc,/spanfnspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanmessagespan stylecolor:#cccccc[/spantypespan stylecolor:#cccccc]/spanspan stylecolor:#67cdcc/spanfn
span stylecolor:#cccccc}/spanobservespan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49fire/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spantypespan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanmessagespan stylecolor:#cccccc[/spantypespan stylecolor:#cccccc]/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49comment/span span stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span selfspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc;/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spancommentListspan stylecolor:#67cdcc/spanspan stylecolor:#cccccc[/spanspan stylecolor:#cccccc{/spantypespan stylecolor:#67cdcc:/spanspan stylecolor:#7ec699hot/spanspan stylecolor:#cccccc,/spancontentspan stylecolor:#67cdcc:/spanspan stylecolor:#7ec699xxxx/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc;/span
span stylecolor:#999999// 注册事件/span
observeObspan stylecolor:#cccccc./spanspan stylecolor:#f08d49regist/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699gotHot/spanspan stylecolor:#cccccc,/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span _arrspan stylecolor:#67cdcc/spanspan stylecolor:#cccccc[/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc;/spanselfspan stylecolor:#cccccc./spancommentListspan stylecolor:#cccccc./spanspan stylecolor:#f08d49forEach/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc(/spanitemspan stylecolor:#cccccc)/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/spanspan stylecolor:#cccccc(/spanitemspan stylecolor:#cccccc./spantypespan stylecolor:#67cdcc/spanspan stylecolor:#7ec699hot/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/span_arrspan stylecolor:#cccccc./spanspan stylecolor:#f08d49push/spanspan stylecolor:#cccccc(/spanitemspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdreturn/span _arr
span stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
span stylecolor:#999999// 调用事件/span
span stylecolor:#cc99cdvar/span _arrspan stylecolor:#67cdcc/spanobserveObspan stylecolor:#cccccc./spanspan stylecolor:#f08d49fire/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699gotHot/spanspan stylecolor:#cccccc)/span/code/span/span/span 一个转盘
需求有一个转盘应用每转一圈速度加快 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdfunction/span observe span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanmessagespan stylecolor:#67cdcc/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/spanobservespan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49regist/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spantypespan stylecolor:#cccccc,/spanfnspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanmessagespan stylecolor:#cccccc[/spantypespan stylecolor:#cccccc]/spanspan stylecolor:#67cdcc/spanfn
span stylecolor:#cccccc}/spanobservespan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49fire/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spantypespan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanmessagespan stylecolor:#cccccc[/spantypespan stylecolor:#cccccc]/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/spanspan stylecolor:#cc99cdvar/span observeObspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdnew/span span stylecolor:#f8c555observe/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#999999// 初始化html 最终结果选定 运动结果 运动控制/spanspan stylecolor:#cc99cdvar/span _domArrspan stylecolor:#67cdcc/spanspan stylecolor:#cccccc[/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49htmlInit/span span stylecolor:#cccccc(/spantargetspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdfor/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdlet/span i span stylecolor:#67cdcc/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc;/spanispan stylecolor:#67cdcc/spanspan stylecolor:#f08d499/spanspan stylecolor:#cccccc;/spanispan stylecolor:#67cdcc/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span _divspan stylecolor:#67cdcc/spandocumentspan stylecolor:#cccccc./spanspan stylecolor:#f08d49createElement/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699div/spanspan stylecolor:#cccccc)/span_divspan stylecolor:#cccccc./spaninnerHTMLspan stylecolor:#67cdcc/spani_divspan stylecolor:#cccccc./spanspan stylecolor:#f08d49setAttribute/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699class/spanspan stylecolor:#cccccc,/spanspan stylecolor:#7ec699item/spanspan stylecolor:#cccccc)/spantargetspan stylecolor:#cccccc./spanspan stylecolor:#f08d49appendChild/spanspan stylecolor:#cccccc(/span_divspan stylecolor:#cccccc)/span_domArrspan stylecolor:#cccccc./spanspan stylecolor:#f08d49push/spanspan stylecolor:#cccccc(/span_divspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49getFinal/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span _numspan stylecolor:#67cdcc/spanMathspan stylecolor:#cccccc./spanspan stylecolor:#f08d49random/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#67cdcc*/spanspan stylecolor:#f08d4910/spanspan stylecolor:#67cdcc/spanspan stylecolor:#f08d4940/spanspan stylecolor:#cc99cdreturn/span Mathspan stylecolor:#cccccc./spanspan stylecolor:#f08d49floor/spanspan stylecolor:#cccccc(/span_numspan stylecolor:#cccccc,/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
span stylecolor:#999999// 运动模块/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49mover/span span stylecolor:#cccccc(/spanmoveConfigspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span nowInspan stylecolor:#67cdcc/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc;/spanspan stylecolor:#cc99cdvar/span removeNumspan stylecolor:#67cdcc/spanspan stylecolor:#f08d499/spanspan stylecolor:#cccccc;/spanspan stylecolor:#cc99cdvar/span timerspan stylecolor:#67cdcc/spanspan stylecolor:#f08d49setInterval/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/spanspan stylecolor:#cccccc(/spannowInspan stylecolor:#67cdcc!/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanremoveNumspan stylecolor:#67cdcc/spannowInspan stylecolor:#67cdcc-/spanspan stylecolor:#f08d491/spanspan stylecolor:#cccccc}/span_domArrspan stylecolor:#cccccc[/spanremoveNumspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49setAttribute/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699class/spanspan stylecolor:#cccccc,/spanspan stylecolor:#7ec699item/spanspan stylecolor:#cccccc)/span_domArrspan stylecolor:#cccccc[/spannowInspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49setAttribute/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699class/spanspan stylecolor:#cccccc,/spanspan stylecolor:#7ec699item item-on/spanspan stylecolor:#cccccc)/spannowInspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdif/spanspan stylecolor:#cccccc(/spannowInspan stylecolor:#67cdcc/spanmoveConfigspan stylecolor:#cccccc./spanmoveTimespan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#f08d49clearInterval/spanspan stylecolor:#cccccc(/spantimerspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdif/spanspan stylecolor:#cccccc(/spanmoveConfigspan stylecolor:#cccccc./spanmoveTimespan stylecolor:#67cdcc/spanspan stylecolor:#f08d4910/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanobserveObspan stylecolor:#cccccc./spanspan stylecolor:#f08d49fire/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699finish/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanmoveConfigspan stylecolor:#cccccc./spanspeedspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49moveControll/span span stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span finalspan stylecolor:#67cdcc/spanspan stylecolor:#f08d49getFinal/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdvar/span _circlespan stylecolor:#67cdcc/spanMathspan stylecolor:#cccccc./spanspan stylecolor:#f08d49floor/spanspan stylecolor:#cccccc(/spanfinalspan stylecolor:#67cdcc//spanspan stylecolor:#f08d4910/spanspan stylecolor:#cccccc,/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdvar/span stopNumspan stylecolor:#67cdcc/spanfinalspan stylecolor:#67cdcc%/spanspan stylecolor:#f08d4910/spanspan stylecolor:#cc99cdvar/span _speedspan stylecolor:#67cdcc/spanspan stylecolor:#f08d492000/spanspan stylecolor:#cc99cdvar/span _runCirclespan stylecolor:#67cdcc/spanspan stylecolor:#f08d490/spanspan stylecolor:#f08d49mover/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc{/spanmoveTimespan stylecolor:#67cdcc:/spanspan stylecolor:#f08d4910/spanspan stylecolor:#cccccc,/spanspeedspan stylecolor:#67cdcc:/span_speedspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanobserveObspan stylecolor:#cccccc./spanspan stylecolor:#f08d49regist/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699finish/spanspan stylecolor:#cccccc,/spanspan stylecolor:#f08d49fucntion/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span _timespan stylecolor:#67cdcc/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc;/span_speedspan stylecolor:#67cdcc-/spanspan stylecolor:#f08d4950/spanspan stylecolor:#cccccc;/span_runCirclespan stylecolor:#67cdcc/spanspan stylecolor:#cccccc;/spanspan stylecolor:#cc99cdif/spanspan stylecolor:#cccccc(/span_runCirclespan stylecolor:#67cdcc/span_circlespan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/span_timespan stylecolor:#67cdcc/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdelse/span span stylecolor:#cccccc{/span_timespan stylecolor:#67cdcc/spanstopNumspan stylecolor:#cccccc}/spanspan stylecolor:#f08d49mover/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc{/spanmoveTimespan stylecolor:#67cdcc:/span_timespan stylecolor:#cccccc,/spanspeedspan stylecolor:#67cdcc:/span_speedspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/spanspan stylecolor:#f08d49htmlInit/spanspan stylecolor:#cccccc(/spandocumentspan stylecolor:#cccccc./spanspan stylecolor:#f08d49getElementById/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699app/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc)/span
span stylecolor:#f08d49moveControll/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
/code/span/span/span #职责链模式示例
Axios 的拦截器
需求axios 拦截器的设计大家可以看成一个用给职责链的思想去处理请求 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49axios/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spaninterceptors span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanrequestspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555interceptorsManner/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc,/spanresponsespan stylecolor:#67cdcc:/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555interceptorsManner/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanaxiosspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49request/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span chain span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spandispathReuestspan stylecolor:#cccccc,/span span stylecolor:#cc99cdundefined/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cc99cdvar/span promise span stylecolor:#67cdcc/span Promisespan stylecolor:#cccccc./spanspan stylecolor:#f08d49resolve/spanspan stylecolor:#cccccc(/spanconfigspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spaninterceptorsspan stylecolor:#cccccc./spanrequestspan stylecolor:#cccccc./spanhandlersspan stylecolor:#cccccc./spanspan stylecolor:#f08d49forEach/spanspan stylecolor:#cccccc(/spaninterceptor span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanchainspan stylecolor:#cccccc./spanspan stylecolor:#f08d49unshift/spanspan stylecolor:#cccccc(/spaninterceptorspan stylecolor:#cccccc./spanfulfilledspan stylecolor:#cccccc,/span interceptorspan stylecolor:#cccccc./spaninjectedspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spaninterceptorsspan stylecolor:#cccccc./spanresponsespan stylecolor:#cccccc./spanhandlersspan stylecolor:#cccccc./spanspan stylecolor:#f08d49forEach/spanspan stylecolor:#cccccc(/spaninterceptor span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanchainspan stylecolor:#cccccc./spanspan stylecolor:#f08d49shift/spanspan stylecolor:#cccccc(/spaninterceptorspan stylecolor:#cccccc./spanfulfilledspan stylecolor:#cccccc,/span interceptorspan stylecolor:#cccccc./spaninjectedspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdwhile/span span stylecolor:#cccccc(/spanchainspan stylecolor:#cccccc./spanlengthspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanpromise span stylecolor:#67cdcc/span promisespan stylecolor:#cccccc./spanspan stylecolor:#f08d49then/spanspan stylecolor:#cccccc(/spanchainspan stylecolor:#cccccc./spanspan stylecolor:#f08d49shift/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc,/span chainspan stylecolor:#cccccc./spanspan stylecolor:#f08d49shift/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49interceptorsManner/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanhandlers span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanspan stylecolor:#cccccc]/span
span stylecolor:#cccccc}/spaninterceptorsMannerspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49use/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanfulfilledspan stylecolor:#cccccc,/span rejectedspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanhandlersspan stylecolor:#cccccc./spanspan stylecolor:#f08d49push/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc{/spanfulfilledspan stylecolor:#67cdcc:/span fulfilledspan stylecolor:#cccccc,/spanrejectedspan stylecolor:#67cdcc:/span rejectedspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
/code/span/span/span 利用职责链组织一个表单验证
需求有一个表单需要前后台校验后台校验 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 表单事件绑定-表单前端验证-表单后端验证/span
span stylecolor:#999999// 思想把你要做的事情拆分为模块模块之间只做自己模块的事情/spaninputspan stylecolor:#cccccc./spanspan stylecolor:#f08d49onblur/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span _value span stylecolor:#67cdcc/span inputspan stylecolor:#cccccc./spanvaluespan stylecolor:#cc99cdvar/span _arr span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanfontspan stylecolor:#cccccc,/span middlespan stylecolor:#cccccc,/span backspan stylecolor:#cccccc,/span fontAgainspan stylecolor:#cccccc]/spanspan stylecolor:#cc99cdasync/span span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49test/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span _result span stylecolor:#67cdcc/span _valuespan stylecolor:#cc99cdwhile/span span stylecolor:#cccccc(/span_arrspan stylecolor:#cccccc./spanlength span stylecolor:#67cdcc/span span stylecolor:#f08d490/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/span_result span stylecolor:#67cdcc/span span stylecolor:#cc99cdawait/span _arrspan stylecolor:#cccccc./spanspan stylecolor:#f08d49shift/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc(/span_resultspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdreturn/span _resultspan stylecolor:#cccccc}/spanspan stylecolor:#f08d49test/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49then/spanspan stylecolor:#cccccc(/spanres span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanconsolespan stylecolor:#cccccc./spanspan stylecolor:#f08d49log/spanspan stylecolor:#cccccc(/spanresspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49font/spanspan stylecolor:#cccccc(/spanresultspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49middle/spanspan stylecolor:#cccccc(/spanresultspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49back/spanspan stylecolor:#cccccc(/spanresultspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49fontAgain/spanspan stylecolor:#cccccc(/spanresultspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
/code/span/span/span # 访问者模式示例
不同角色访问数据
需求假设有一个公司的财务报表财务关心支出和收入老板关心盈利 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49report/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanincome span stylecolor:#67cdcc/span span stylecolor:#7ec699/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spancost span stylecolor:#67cdcc/span span stylecolor:#7ec699/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanprofit span stylecolor:#67cdcc/span span stylecolor:#7ec699/span
span stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49boss/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanbossspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49get/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49account/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanaccountspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49get/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spannum1span stylecolor:#cccccc,/span num2span stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49vistor/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc,/span manspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span handle span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49boss/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanmanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49get/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc./spanprofitspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanspan stylecolor:#f08d49account/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanmanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49get/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc./spanincomespan stylecolor:#cccccc,/span dataspan stylecolor:#cccccc./spancostspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanhandlespan stylecolor:#cccccc[/spanmanspan stylecolor:#cccccc./spanconstructorspan stylecolor:#cccccc./spannamespan stylecolor:#cccccc]/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/spanspan stylecolor:#f08d49vistor/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdnew/span span stylecolor:#f8c555report/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc,/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555account/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc)/span
span stylecolor:#f08d49vistor/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdnew/span span stylecolor:#f8c555report/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc,/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555boss/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc)/spanspan stylecolor:#999999// 设计的数据结构操作难以去访问具体的数据结构的时候/span
/code/span/span/span 表格操作
需求一个可以新增删除的表格 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccode span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49table/span span stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/span span stylecolor:#cccccc}/spantablespan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49show/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spantablespan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49delete/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49vistor/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spantableDataspan stylecolor:#cccccc,/spanspan stylecolor:#7ec699delete/spanspan stylecolor:#cccccc,/spanidspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spantablespan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49add/spanspan stylecolor:#67cdcc/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdvar/span tableDataspan stylecolor:#67cdcc/spanspan stylecolor:#cccccc[/spanspan stylecolor:#cccccc{/spanidspan stylecolor:#67cdcc:/spanspan stylecolor:#f08d491/spanspan stylecolor:#cccccc,/spannamespan stylecolor:#67cdcc:/spanspan stylecolor:#7ec699xxx/spanspan stylecolor:#cccccc,/spanprizespan stylecolor:#67cdcc:/spanspan stylecolor:#7ec699xxx/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49vistor/span span stylecolor:#cccccc(/spantablespan stylecolor:#cccccc,/spandataspan stylecolor:#cccccc,/spanhandlespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span handleObspan stylecolor:#67cdcc/spanspan stylecolor:#cccccc{/spanspan stylecolor:#f08d49delete/spanspan stylecolor:#67cdcc:/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanidspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanaddspan stylecolor:#67cdcc:/spanspan stylecolor:#f08d49funtion/spanspan stylecolor:#cccccc(/spanidspan stylecolor:#cccccc,/spannamespan stylecolor:#cccccc,/spanpricespan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdvar/span argspan stylecolor:#67cdcc/spanspan stylecolor:#f8c555Array/spanspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49splice/spanspan stylecolor:#cccccc(/spanargumentsspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc;/spanargspan stylecolor:#cccccc./spanspan stylecolor:#f08d49splice/spanspan stylecolor:#cccccc(/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc,/spanspan stylecolor:#f08d493/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc;/spanhandleObspan stylecolor:#cccccc[/spanhandlespan stylecolor:#cccccc]/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49apple/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc,/spanargspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
/code/span/span/span #5.4 总结
观察者模式
适用于不适合直接沟通的模块之间的组织
职责链模式
组织同步模块把要做的事情划分为模块要做的事情一次传递
访问者模式
解耦数据操作与数据结构
#6. 提高代码质量
提高代码质量
高质量的代码方便后续的一切操作方便他人阅读
什么是代码质量
代码整洁结构规整没有漫长的结构阅读好理解
#6.1 优化代码结构
策略模式/状态模式
策略/状态模式的目的优化 if-else 分支
策略/状态模式的应用场景当代码 if-else 分支过多时
外观模式
外观模式的目的通过为多个复杂的子系统提供一个一致的接口
外观模式的应用场景当完成一个操作时需要操作多个子系统不如提供一个更高级的
#6.2 优化你的代码操作
迭代器模式
迭代器者模式的目的不访问内部的情况下方便的遍历数据
迭代器模式的应用场景当我们需要对某个对象进行操作但是又不能暴露内部
备忘录模式
备忘录模式的目的记录状态方便回滚
备忘录模式的应用场景系统状态多样为了保证状态的回滚方便记录状态
#6.3 基本结构
#策略模式的基本结构
假设要编写一个计算器有加减乘除我们把一层一层的 if 判断变成下面的形式 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccode span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Strategy/span span stylecolor:#cccccc(/spantypespan stylecolor:#cccccc,/spanaspan stylecolor:#cccccc,/spanbspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span Strategyerspan stylecolor:#67cdcc/spanspan stylecolor:#cccccc{/spanspan stylecolor:#f08d49add/spanspan stylecolor:#67cdcc:/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#cccccc(/spanaspan stylecolor:#cccccc,/spanbspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span aspan stylecolor:#67cdcc/spanbspan stylecolor:#cccccc}/spanspan stylecolor:#f08d49minus/spanspan stylecolor:#67cdcc:/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanaspan stylecolor:#cccccc,/spanbspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span aspan stylecolor:#67cdcc-/spanbspan stylecolor:#cccccc}/spanspan stylecolor:#f08d49division/spanspan stylecolor:#67cdcc:/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#cccccc(/spanaspan stylecolor:#cccccc,/spanbspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span aspan stylecolor:#67cdcc//spanbspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdreturn/span Strategyerspan stylecolor:#cccccc[/spantypespan stylecolor:#cccccc]/spanspan stylecolor:#cccccc(/spanaspan stylecolor:#cccccc,/spanbspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
/code/span/span/span # 状态模式的基本结构加了状态的策略模式
为了减少 if-else 结构将判断变成对象内部的一个状态通过对象内部的状态改变让其拥有不同的行为 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49stateFactor/spanspan stylecolor:#cccccc(/spanstatespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span stateObject span stylecolor:#67cdcc/span span stylecolor:#cccccc{/span_statusspan stylecolor:#67cdcc:/span span stylecolor:#7ec699/spanspan stylecolor:#cccccc,/spanstatespan stylecolor:#67cdcc:/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49state1/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanspan stylecolor:#f08d49state2/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanspan stylecolor:#f08d49run/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstatespan stylecolor:#cccccc[/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./span_statusspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanstateObjectspan stylecolor:#cccccc./span_status span stylecolor:#67cdcc/span statespan stylecolor:#cc99cdreturn/span stateObject
span stylecolor:#cccccc}/span
/code/span/span/span # 外观模式的基本结构
我们组织方法模块时可以细化多个接口但是我们给别人使用时要合为一个接口就像你可以直接去餐厅去点套餐 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 模块1/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Model1/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#999999// 模块2/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Model2/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
span stylecolor:#999999// 功能由Model1获取Model2得结果来完成/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49use/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49Model2/spanspan stylecolor:#cccccc(/spanspan stylecolor:#f08d49Model1/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
/code/span/span/span # 迭代器模式的基本结构
在不暴露对象内部结构的同时可以顺序的访问对象内部可以帮助我们简化循环简化数据操作 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Iterator/spanspan stylecolor:#cccccc(/spanitemspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanitem span stylecolor:#67cdcc/span item
span stylecolor:#cccccc}/span
span stylecolor:#f8c555Iterator/spanspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49dealEach/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanfnspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdfor/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdvar/span i span stylecolor:#67cdcc/span span stylecolor:#f08d490/spanspan stylecolor:#cccccc;/span i span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanitemspan stylecolor:#cccccc./spanlengthspan stylecolor:#cccccc;/span ispan stylecolor:#67cdcc/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49fn/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanitemspan stylecolor:#cccccc[/spanispan stylecolor:#cccccc]/spanspan stylecolor:#cccccc,/span ispan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
/code/span/span/span # 备忘录模式的基本结构
记录对象内部的状态当有需要时回滚到之前的状态或者方便对象使用 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Memento/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span cache span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spancacheNamespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spancachespan stylecolor:#cccccc[/spancacheNamespan stylecolor:#cccccc]/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999// 有缓存的操作/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cccccc{/spanspan stylecolor:#999999// 没有缓存的操作/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdvar/span MementtoFn span stylecolor:#67cdcc/span span stylecolor:#f08d49Memento/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
span stylecolor:#f08d49MementtoFn/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699xxxcx/spanspan stylecolor:#cccccc)/span
/code/span/span/span #6.4 应用示例
# 策略/状态模式的示例
动态的内容
需求项目有一个动态的内容根据用户权限的不同显示不同的内容 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 没有用策略的模式的情况/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49showPart1/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanconsolespan stylecolor:#cccccc./spanspan stylecolor:#f08d49log/spanspan stylecolor:#cccccc(/spanspan stylecolor:#f08d491/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49showPart2/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanconsolespan stylecolor:#cccccc./spanspan stylecolor:#f08d49log/spanspan stylecolor:#cccccc(/spanspan stylecolor:#f08d492/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49showPart3/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanconsolespan stylecolor:#cccccc./spanspan stylecolor:#f08d49log/spanspan stylecolor:#cccccc(/spanspan stylecolor:#f08d493/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
axiosspan stylecolor:#cccccc./spanspan stylecolor:#f08d49get/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699xxx/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49then/spanspan stylecolor:#cccccc(/spanres span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanres span stylecolor:#67cdcc/span span stylecolor:#7ec699boss/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49showPart1/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#f08d49showPart2/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#f08d49showPart3/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanres span stylecolor:#67cdcc/span span stylecolor:#7ec699manner/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49showPart1/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#f08d49showPart2/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanres span stylecolor:#67cdcc/span span stylecolor:#7ec699staff/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49showPart3/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanspan stylecolor:#999999// 用策略模式的情况/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49showControl/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstatus span stylecolor:#67cdcc/span span stylecolor:#7ec699/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanpower span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49boss/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49showPart1/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#f08d49showPart2/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#f08d49showPart3/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanspan stylecolor:#f08d49manner/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49showPart1/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#f08d49showPart2/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/spanspan stylecolor:#f08d49staff/spanspan stylecolor:#67cdcc:/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49showPart3/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
showControlspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49show/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span self span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanaxiosspan stylecolor:#cccccc./spanspan stylecolor:#f08d49get/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699xxx/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49then/spanspan stylecolor:#cccccc(/spanres span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanselfspan stylecolor:#cccccc./spanstatus span stylecolor:#67cdcc/span resselfspan stylecolor:#cccccc./spanpowerspan stylecolor:#cccccc[/spanselfspan stylecolor:#cccccc./spanstatusspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdnew/span span stylecolor:#f8c555showControl/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49show/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
/code/span/span/span 复合运动
需求有一个小球可以控制它左右移动或则左前右前等方式移动 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49moveLeft/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanconsolespan stylecolor:#cccccc./spanspan stylecolor:#f08d49log/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699left/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49moveRight/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanconsolespan stylecolor:#cccccc./spanspan stylecolor:#f08d49log/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699RigmoveRight/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49moveTop/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanconsolespan stylecolor:#cccccc./spanspan stylecolor:#f08d49log/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699Top/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49moveBottom/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanconsolespan stylecolor:#cccccc./spanspan stylecolor:#f08d49log/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699bomoveBottom/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/spanspan stylecolor:#999999// 没有用状态模式的情况/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49mover/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanargumentsspan stylecolor:#cccccc./spanlength span stylecolor:#67cdcc/span span stylecolor:#f08d491/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanargumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span span stylecolor:#7ec699left/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49moveLeft/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanargumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span span stylecolor:#7ec699right/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49moveRight/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanargumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span span stylecolor:#7ec699top/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49moveTop/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanargumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span span stylecolor:#7ec699bottom/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49moveBottom/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanargumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span span stylecolor:#7ec699left/span span stylecolor:#67cdcc/span argumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d491/spanspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span span stylecolor:#7ec699top/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49moveLeft/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#f08d49moveTop/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanargumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d490/spanspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span span stylecolor:#7ec699right/span span stylecolor:#67cdcc/span argumentsspan stylecolor:#cccccc[/spanspan stylecolor:#f08d491/spanspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span span stylecolor:#7ec699bottom/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49moveRight/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#f08d49moveBottom/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/spanspan stylecolor:#999999// 用状态模式的情况/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49mover/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstatus span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanactionHandle span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanleftspan stylecolor:#67cdcc:/span moveLeftspan stylecolor:#cccccc,/spanrightspan stylecolor:#67cdcc:/span moveRightspan stylecolor:#cccccc,/spantopspan stylecolor:#67cdcc:/span moveTopspan stylecolor:#cccccc,/spanbottomspan stylecolor:#67cdcc:/span moveBottomspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
moverspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49run/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstatus span stylecolor:#67cdcc/span span stylecolor:#f8c555Array/spanspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49slice/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49call/spanspan stylecolor:#cccccc(/spanargumentsspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstatusspan stylecolor:#cccccc./spanspan stylecolor:#f08d49forEach/spanspan stylecolor:#cccccc(/spanaction span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanactionHandlespan stylecolor:#cccccc[/spanactionspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdnew/span span stylecolor:#f8c555mover/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49run/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699left/spanspan stylecolor:#cccccc,/span span stylecolor:#7ec699right/spanspan stylecolor:#cccccc)/span
/code/span/span/span # 外观模式的示例
插件封装的规律
需求插件基本都会给最终使用提供一个高级接口 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 划分功能给使用者一个统一的接口/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49tab/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandom span stylecolor:#67cdcc/span span stylecolor:#cc99cdnull/span
span stylecolor:#cccccc}/span
tabspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49initHTML/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
tabspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49changeTab/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/span
tabspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49eventBind/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span self span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandomspan stylecolor:#cccccc./spanspan stylecolor:#f08d49onclick/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanselfspan stylecolor:#cccccc./spanspan stylecolor:#f08d49changeTab/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
tabspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49init/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanconfigspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49initHTML/spanspan stylecolor:#cccccc(/spanconfigspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49eventBind/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
/code/span/span/span 封装成方法的思想
需求在兼容时代我们会常常需要检测能力不妨作为一个统一接口 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999//dom支持检测/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49addEvent/spanspan stylecolor:#cccccc(/spandomspan stylecolor:#cccccc,/span typespan stylecolor:#cccccc,/span fnspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spandomspan stylecolor:#cccccc./spanaddEventListenerspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spandomspan stylecolor:#cccccc./spanspan stylecolor:#f08d49addEventListener/spanspan stylecolor:#cccccc(/spantypespan stylecolor:#cccccc,/span fnspan stylecolor:#cccccc,/span span stylecolor:#f08d49false/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spandomspan stylecolor:#cccccc./spanattachEventspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spandomspan stylecolor:#cccccc./spanspan stylecolor:#f08d49attachEvent/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699on/span span stylecolor:#67cdcc/span typespan stylecolor:#cccccc,/span fnspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cccccc{/spandomspan stylecolor:#cccccc[/spanspan stylecolor:#7ec699on/span span stylecolor:#67cdcc/span typespan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span fnspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
/code/span/span/span # 迭代器模式的示例
构建一个自己的 forEach
需求forEach 方法其实是一个典型的迭代器方法 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999// 对数组和对象进行迭代/span
span stylecolor:#999999//forEach/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Iterator/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandata span stylecolor:#67cdcc/span data
span stylecolor:#cccccc}/span
span stylecolor:#f8c555Iterator/spanspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49dealEach/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanfnspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandata span stylecolor:#cc99cdinstanceof/span span stylecolor:#f8c555Array/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdfor/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdvar/span i span stylecolor:#67cdcc/span span stylecolor:#f08d490/spanspan stylecolor:#cccccc;/span i span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandataspan stylecolor:#cccccc./spanlengthspan stylecolor:#cccccc;/span ispan stylecolor:#67cdcc/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49fn/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandataspan stylecolor:#cccccc[/spanispan stylecolor:#cccccc]/spanspan stylecolor:#cccccc,/span ispan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdfor/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdvar/span item span stylecolor:#cc99cdin/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandataspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49fn/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandataspan stylecolor:#cccccc[/spanitemspan stylecolor:#cccccc]/spanspan stylecolor:#cccccc,/span itemspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
/code/span/span/span 给你的项目数据添加迭代器
需求项目经常对于后端数据进行遍历操作不如封装一个迭代器遍历的更方便 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999//数据迭代器/span
span stylecolor:#cc99cdvar/span data span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanspan stylecolor:#cccccc{/span numspan stylecolor:#67cdcc:/span span stylecolor:#f08d491/span span stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/span span stylecolor:#cccccc{/span numspan stylecolor:#67cdcc:/span span stylecolor:#f08d492/span span stylecolor:#cccccc}/spanspan stylecolor:#cccccc,/span span stylecolor:#cccccc{/span numspan stylecolor:#67cdcc:/span span stylecolor:#f08d493/span span stylecolor:#cccccc}/spanspan stylecolor:#cccccc]/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49i/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdfunction/span span stylecolor:#f08d49Iterator/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandata span stylecolor:#67cdcc/span dataspan stylecolor:#cccccc}/spanspan stylecolor:#f8c555Iterator/spanspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49getHasSomenum/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanhandlerspan stylecolor:#cccccc,/span numspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span _arr span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanspan stylecolor:#cccccc]/spanspan stylecolor:#cc99cdvar/span handleFnspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdtypeof/span handler span stylecolor:#67cdcc/span span stylecolor:#7ec699function/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanhandleFn span stylecolor:#67cdcc/span handlerspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49handleFn/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanitemspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanitemspan stylecolor:#cccccc[/spanhandlerspan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span numspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span itemspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdfor/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdvar/span i span stylecolor:#67cdcc/span span stylecolor:#f08d490/spanspan stylecolor:#cccccc;/span i span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandataspan stylecolor:#cccccc./spanlengthspan stylecolor:#cccccc;/span ispan stylecolor:#67cdcc/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span _result span stylecolor:#67cdcc/span span stylecolor:#f08d49handleFn/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49call/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc,/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spandataspan stylecolor:#cccccc[/spanispan stylecolor:#cccccc]/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/span_resultspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/span_arrspan stylecolor:#cccccc./spanspan stylecolor:#f08d49push/spanspan stylecolor:#cccccc(/span_resultspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdreturn/span _arrspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdnew/span span stylecolor:#f8c555Iterator/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc)/span
span stylecolor:#cccccc}/span
span stylecolor:#f08d49i/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49getHasSomenum/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699num/spanspan stylecolor:#cccccc,/span span stylecolor:#f08d491/spanspan stylecolor:#cccccc)/span
span stylecolor:#999999// 自定义的筛选方法/span
span stylecolor:#f08d49i/spanspan stylecolor:#cccccc(/spandataspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49getHasSomenum/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanitemspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanitemspan stylecolor:#cccccc./spannum span stylecolor:#67cdcc-/span span stylecolor:#f08d491/span span stylecolor:#67cdcc/span span stylecolor:#f08d492/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span itemspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span
/code/span/span/span #备忘录模式的示例
文章页的缓存
需求项目有一个文章页需求现在进行优化如果上一篇已经读取过了则不进行请求否则请求文章数据 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999//缓存/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49pager/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdvar/span cache span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cc99cdreturn/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanpageNamespan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spancachespan stylecolor:#cccccc[/spanpageNamespan stylecolor:#cccccc]/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdreturn/span cachespan stylecolor:#cccccc[/spanpageNamespan stylecolor:#cccccc]/spanspan stylecolor:#cccccc}/span span stylecolor:#cc99cdelse/span span stylecolor:#cccccc{/spanaxiosspan stylecolor:#cccccc./spanspan stylecolor:#f08d49get/spanspan stylecolor:#cccccc(/spanpageNamespan stylecolor:#cccccc)/spanspan stylecolor:#cccccc./spanspan stylecolor:#f08d49then/spanspan stylecolor:#cccccc(/spanres span stylecolor:#67cdcc/span span stylecolor:#cccccc{/spancachespan stylecolor:#cccccc[/spanpageNamespan stylecolor:#cccccc]/span span stylecolor:#67cdcc/span resspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
span stylecolor:#cc99cdvar/span getpage span stylecolor:#67cdcc/span span stylecolor:#f08d49pager/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span
span stylecolor:#f08d49getpage/spanspan stylecolor:#cccccc(/spanspan stylecolor:#7ec699pageone/spanspan stylecolor:#cccccc)/span
/code/span/span/span 前进后退功能
需求开发一个可移动的 div拥有前进后退功能能回滚到之前的位置 span stylebackground-color:#282c34span stylecolor:#2c3e50span stylecolor:#cccccccodespan stylecolor:#999999//前进后退/span
span stylecolor:#cc99cdfunction/span span stylecolor:#f08d49moveDiv/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstateList span stylecolor:#67cdcc/span span stylecolor:#cccccc[/spanspan stylecolor:#cccccc]/span span stylecolor:#999999// 缓存之前的状态/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spannowState span stylecolor:#67cdcc/span span stylecolor:#f08d490/span span stylecolor:#999999// 状态指针指向当前状态在哪个/span
span stylecolor:#cccccc}/span
span stylecolor:#999999/*** param {string} type 往哪个方向移动* param {Number} num 移动多远*//span
moveDivspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49move/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spantypespan stylecolor:#cccccc,/span numspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#f08d49changeDiv/spanspan stylecolor:#cccccc(/spantypespan stylecolor:#cccccc,/span numspan stylecolor:#cccccc)/span span stylecolor:#999999//假设移动位置的函数/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstateListspan stylecolor:#cccccc./spanspan stylecolor:#f08d49push/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc{/spantypespan stylecolor:#67cdcc:/span typespan stylecolor:#cccccc,/spannumspan stylecolor:#67cdcc:/span numspan stylecolor:#cccccc}/spanspan stylecolor:#cccccc)/span span stylecolor:#999999// 添加状态/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spannowState span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstateListspan stylecolor:#cccccc./spanlength span stylecolor:#67cdcc-/span span stylecolor:#f08d491/span span stylecolor:#999999// 设置当前指针/span
span stylecolor:#cccccc}/span
moveDivspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49go/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999//前进/spanspan stylecolor:#cc99cdvar/span _statespan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spannowState span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstateListspan stylecolor:#cccccc./spanlength span stylecolor:#67cdcc-/span span stylecolor:#f08d491/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999//当前指针小于数组最后一位说明能前进/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spannowStatespan stylecolor:#67cdcc/span_state span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstateListspan stylecolor:#cccccc[/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spannowStatespan stylecolor:#cccccc]/spanspan stylecolor:#f08d49changeDiv/spanspan stylecolor:#cccccc(/span_statespan stylecolor:#cccccc./spantypespan stylecolor:#cccccc,/span _statespan stylecolor:#cccccc./spannumspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
moveDivspan stylecolor:#cccccc./spanprototypespan stylecolor:#cccccc./spanspan stylecolor:#f08d49back/span span stylecolor:#67cdcc/span span stylecolor:#cc99cdfunction/spanspan stylecolor:#cccccc(/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#999999//后退/spanspan stylecolor:#cc99cdvar/span _statespan stylecolor:#cc99cdif/span span stylecolor:#cccccc(/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spannowState span stylecolor:#67cdcc/span span stylecolor:#f08d490/spanspan stylecolor:#cccccc)/span span stylecolor:#cccccc{/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spannowStatespan stylecolor:#67cdcc--/span_state span stylecolor:#67cdcc/span span stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spanstateListspan stylecolor:#cccccc[/spanspan stylecolor:#cc99cdthis/spanspan stylecolor:#cccccc./spannowStatespan stylecolor:#cccccc]/spanspan stylecolor:#f08d49changeDiv/spanspan stylecolor:#cccccc(/span_statespan stylecolor:#cccccc./spantypespan stylecolor:#cccccc,/span _statespan stylecolor:#cccccc./spannumspan stylecolor:#cccccc)/spanspan stylecolor:#cccccc}/span
span stylecolor:#cccccc}/span
/code/span/span/span #6.5 本章总结
策略/状态模式
帮助我们优化 if-else 结构
外观模式
一种套餐化接口的思想提醒我们封装常用方法
迭代器模式
帮助我们更好的遍历数据
备忘录模式
帮我们缓存以及回到过去的状态
#7 总结 提示 我们的设计模式要记住其思想不用记住其结构结构不是固定我们通过设计模式主要是提高我们代码的质量
