设计模式 5 大原则
1，单一职责原则
一个类只封装一定的功能
过于复杂的代码块想办法拆分成单独的方法
2，开闭原则
对修改关闭，对扩展开放
增加或者变更需求时，不应该修改核心代码，应该再之前的基础上新增功能
3，里氏替换原则
父类能用的地方，子类都能用，即可以用任何子类替换父类
4，接口隔离原则
接口之间功能不要重复
接口更纯粹干净
5，依赖倒置原则
使用方应该依赖抽象，比如接口，抽象类，配置等，而不是其实现，因为实现会频繁变更
设计模式分类
1，创建型
1，单例模式
一个类只有一个全局实例，并提供一个获取它的全局入口。
class LoginForm {
constructor() {
}
}
//用闭包存一个永久的单例
LoginForm.getInstance = (function () {
let instance = null
return = function () {
if (!instence) {
instance = new LoginForm()
}
return instance
}
})()
2，工厂模式
如果不想让某个子系统与较大的哪个对象之间形成强耦合。而是想在运行时可以从许多系统进行挑选或者切换的话。工厂模式可以进行解耦。
class product1 {
run () { }
}
class product2 {
run () { }
}
class Fatory {
}
Fatory.create(productName) {
if (productName === '1') {
return new product1()
}
else {
return new product2()
}
}
let p = Fatory.create('1')
p.run()
2，结构型
1，适配器模式
适配器用于解决两个接口不兼容的情况，通过适配器可以在不改变原有接口源码的情况下，让两个不兼容的接口通信
//客户端接收一个对象，必须有run方法
class client {
constructor(app) {
this.app = app
}
run () {
this.app.run()
}
}
//appForien没有run方法，无法与client兼容
class appForien {
constructor(name) {
this.name
}
business () {
return this.name
}
}
//创建Forien适配器
class forienAdapter {
constructor(app) {
this.app = app
}
run () {
const result = this.app.business()
return result
}
}
//使用
const app = new appForien()
const fa=new forienAdapter(app)
const c = new client(fa)
c.run()
应用场景：vue中的computed就是适配器，将原先各种数据组装成客户端能用的新数据
2，装饰器模式
动态的给对象或者函数添加某些功能
class cellPhone {
create () {
}
}
class Decorator {
constructor(cellPhone, funcBefore, funcAfter) {
this.cellPhone = cellPhone
}
create () {
funcBefore()
this.cellPhone.create()
funcAfter()
}
}
//使用
const d = new Decorator(new cellPhone(), () => {
//前置功能
}
, () => {
//后置功能
})
d.create()
3，代理模式
客户端不直接与接口进行通信，而是加一个代理层进行通讯
class client {
constructor() {
this.msg = ''
}
getMsg () {
return this.msg
}
setMsg (msg) {
this.msg = msg
}
}
class msgProxy {
constructor(client, encodeMsg) {
this.client = client
this.encodeMsg = encodeMsg
}
getMsg () {
return this.encodeMsg(this.client.getMsg())
}
setMsg (msg) {
const msgStr = this.encodeMsg(msg)
this.client.setMsg(msgStr)
}
}
//使用
const c = new client()
const p = new msgProxy(c, (str) => {
return str + '111'
})
p.setMsg('aaa')
console.log(p.getMsg())
4，组合模式
3，行为型
1，观察者模式
定义了一种一对多的模式。有多个观察者监听一个主题，只要主题发送通知，所有观察者都会进行响应。
这其中的关键是主题要收集到所有的观察者。然后有一个通知方法，循环遍历通知每一个观察者。对于观察者而言，他们有一个依赖的
主题，并且有一个同名的响应方法。
//一个主题，用于收集依赖，发布通知
class Subject {
constructor() {
this.state = 0
this.observers = []
}
getState () {
return this.state
}
setState (state) {
this.state = state
this.notifyAllObservers()
}
notifyAllObservers () {
this.observers.forEach(ob => {
ob.update()
})
}
attach (observer) {
this.observers.push(observer)
}
}
//观察者，用于跟踪主题，响应通知
class Observer{
constructor(name,subject){
this.name = name
this.subject = subject
this.subject.attach(this)
}
update(){
//do something
}
}
2，迭代器模式
提供一种方法顺序执行一个聚合对象中各个元素，而又不暴露该对象得内部表示
class Iterator {
constructor(container) {
this.list = container.list
this.index = 0
}
next () {
if (this.hasNext()) {
//do something
return this.list[this.index++]
}
return null
}
hasNext () {
return this.index >= this.list.length
}
}
class Container{
constructor(list){
this.list = list
}
getIterator(){
return new Iterator(this)
}
}
//使用
const con = new container([1,2,3,4,5])
let iterator = con.getIterator()
while(iterator.hasNext()){
iterator.next()
}
3，策略模式
将不同的可能用到的方法封装在一起，并且他们可以互相替换
//应用场景：表单验证
//策略对象
class strategies {
static isRequire (value, errorMsg) {
if (!value) {
console.log(errorMsg)
}
}
static minLength (value, errorMsg, length) {
if (value.length < length) {
console.log(errorMsg)
}
}
}
//验证类
class Validator {
constructor(form) {
this.form = form
}
valid (rules) {
rules.forEach(rule => {
rule.stratege(form[rule.name], rule.errorMsg,rule.args)
});
}
}
//使用，配置策略
const rules = [
{ name: id, stratege: strategies.isRequire, errorMsg: '必填' },
{ name: address, stratege: strategies.minLength, errorMsg: '过长', args: 10 },
]
const formValidator = new Validator({
id:'123',
address:'tom jack no 100'
}).valid(rules)
4，模板方法模式
将一个过程或者一个流程算法的公共部分提取出来，可变部分的逻辑给子类去实现和变动，整个大步骤不变
class flow{
constructor(step1,step2){
this.step1=step1
this.step2=step2
}
run(){
this.start()
this.step1()
this.step2()
this.end()
}
start(){
console.log('start')
}
end(){
console.log('end')
}
}
5，命令模式
将执行逻辑和执行对象之间解耦，使得执行逻辑可以更容易扩展
//接收器
class Receiver {
run () {
console.log('run start')
}
}
//命令类型
class Command {
constructor(Receiver) {
this.Receiver = Receiver
}
execute () {
this.Receiver.run()
}
}
//命令触发器
class Invoker {
constructor(Command) {
this.Command = Command
}
invoke () {
this.Command.execute()
}
}
//使用，客户下订单发货
const base = new Receiver() //仓库
const order = new Command(base) //订单
const client = new Invoker(order) //客户
//客户下订单
client.invoke()
6，中介模式
将多个对象的直接交互，变成由一个中介对象来间接交互，可以将交互对象之间解耦
class A {
constructor() {
this.val = ''
}
setB (m, val) {
m.setB(val)
}
}
class B {
constructor() {
this.val = ''
}
setA (m, val) {
m.setA(val)
}
}
//中介者
class Mediator {
constructor(a, b) {
this.a = a
this.b = b
}
setA (val) {
A.val = val
}
setB (val) {
A.val = val
}
}
