设计模式与原则精要

设计原则

单一职责原则- SRP

开放封闭原则 - OCP

里氏替换原则 - LSP

接口隔离原则 - ISP

依赖倒转原则 - DIP

迪米特法则 - DP

合成复用原则 - CSP

什么时候去解耦

如果两个职责在修改的时候，都是同时变化，就不必解耦开；

如果未来可能会独立复用，可以考虑单一职责。

单一职责原则- SRP

class UserOptions {
    //修改用户的名称、修改用户的密码
    updateUserInfo(user, type) {
        if (type === "username") {
            this.user.username = user.username;
        } else if (type === "password") {
            this.user.password = user.password;

        }
    }
}
const userOpts = new UserOptions();
userOpts.updateUserInfo({ username: '张三' }, "username");



class UserOptionsSRP {
    updateUserName(username) {
        this.user.username = username;
    }

    updatePassword(password) {
        this.user.password = password;
    }
}

开放封闭原则 - OCP基础

里氏替换原则 - LSP

在设计的子类的时候，可以完整地继承父类的职责，而不是去修改。

组合的方式，可能会优于继承；

多考虑多态逻辑的实现和应用。

接口隔离原则 - ISP

接口隔离原则

意义和目的是，尽量减少接口之间的耦合存在，在大型的软件架构设计中，多个接口的组合使用，好过一个大而全的接口。

1接口尽量小；

2接口要高内聚

依赖倒转原则 - DIP

依赖倒转原则的核心，是减少高层模块和底层模块之间的耦合。

高层模块不应该直接依赖底层模块，两者都应该依赖于抽象

抽象不应该依赖于细节，细节应该依赖于抽象。

设计模式

创建型：工厂、单例、建造者

结构型：装饰器模式、适配器模式、代理模式

行为型：观察者模式、发布订阅模式、策略模式

构造器模式

function Employee(name, age) {
  this.name = name;
  this.age = age;

  this.say = function () {
    console.log(`我的名字是${this.name}，今年${this.age}岁`);
  };
}

var employee1 = new Employee("小王", 100);
var employee2 = new Employee("tiechui", 18);

console.log(employee1, employee2);
employee1.say();
employee2.say();

原型模式

function Employee(name, age) {
  this.name = name;
  this.age = age;
}

Employee.prototype.say = function () {
  console.log(`我的名字是${this.name}，今年${this.age}岁`);
};

var employee1 = new Employee("小王", 100);
var employee2 = new Employee("tiechui", 18);

console.log(employee1, employee2);
employee1.say();
employee2.say();

class Employee { 
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    say() {
        console.log(`我的名字是${this.name}，今年${this.age}岁`);
    }
}

var employee1 = new Employee("小王", 100);
var employee2 = new Employee("tiechui", 18);

console.log(employee1, employee2);
employee1.say();
employee2.say();

建造者模式

function Car() {

};

Car.prototype.init = function (
    door,
    options,
    color,
    bland
) {
    this.initDoor(door)
        .initOptions(options)
        .initColor(color)
        .initBland(bland)
}


Car.prototype.initDoor = function (door) {
    this.door = door;
    return this;
}


Car.prototype.initOptions = function (options) {
    this.options = options;
    return this;
}

Car.prototype.initColor = function (color) {
    this.color = color;
    return this;
}


Car.prototype.initBland = function (bland) {
    this.bland = bland;
    return this;
}

const MyCar = new Car();
MyCar.initDoor(4)
    .initOptions(['ABS', 'GPS'])
    .initColor('white')
    .initBland('Benz');
console.log(MyCar);

工厂模式

当满足以下任一条件时，即可考虑使用：

​ 对象创建步骤多、逻辑复杂；

​ 需根据条件动态选择创建的对象类型；

​ 希望统一管理对象的生命周期（如复用、监控）；

​ 需降低代码对具体类的依赖，便于后续扩展或替换

简单工厂

es5

function UserFactory(role) {
    function User(role, pages) {
        this.role = role;
        this.pages = pages;
    }
    switch (role) {
        case 'superadmin':
            return new User('superadmin', ['home', 'user-manage', 'right-manage', 'news-manage']);
        case 'admin':
            return new User('admin', ['home', 'user-manage', 'news-manage']);
        case 'editor':
            return new User('editor', ['home', 'news-manage']);
        default:
            throw new Error('参数错误');
    }
}

var user = UserFactory('superadmin');
console.log(user);

es6

class User {
    constructor(role, pages) {
        this.role = role;
        this.pages = pages;
    }
    static UserFactory(role) {

        switch (role) {
            case 'superadmin':
                return new User('superadmin', ['home', 'user-manage', 'right-manage', 'news-manage']);
            case 'admin':
                return new User('admin', ['home', 'user-manage', 'news-manage']);
            case 'editor':
                return new User('editor', ['home', 'news-manage']);
            default:
                throw new Error('参数错误');
        }
    }
}


var user = User.UserFactory('superadmin');
console.log(user);

抽象工厂

假如对于实际的生产来说，我的BYD和dongfeng不可能是一个工厂生产

class AbstratFacrtory {
    createCar() {};
    createTruck() {};
};


class Car {
    constructor() {
        this.door = 4;
        this.options = ['drive', 'drived'];
    }
};

class Truck {
    constructor() {
        this.door = 2;
        this.options = ['drive', 'pullGoods'];
    }
};


class DongfengCar extends Car { 
    constructor(color) {
        super();
        this.bland = 'dongfeng';
        this.color = color;
    }

}

class BYDCar extends Car { 
    constructor(color) {
        super();
        this.bland = 'byd';
        this.color = color;
    }

}

class DongfengTruck extends Truck { 
    constructor() {
        super();
        this.bland = 'dongfeng';
    }

}


class BYDTruck extends Truck { 
    constructor() {
        super();
        this.bland = 'byd';
    }

}


class DongfengFactory {
    createCar(color) {
        return new DongfengCar(color);
    }

    createTruck() {
        return new Truck();
    }
}


class BYDFactory {
    createCar(color) {
        return new BYDCar(color);
    }

    createTruck() {
        return new BYDTruck();
    }
}

const myFactory = new BYDFactory();
const myCar = myFactory.createCar('blue');
console.log(myCar);

class User {
    constructor(name, role, pages) {
        this.name = name;
        this.role = role;
        this.pages = pages;
    }
    welcome() {
        console.log(`欢迎回来`, this.name);
    }
    dataShow() {
        throw new Error('抽象方法需要被实现');
    }
}


class SuperAdmin extends User {
    constructor(name) {
        super(name, 'superadmin', ['home', 'user-manage', 'right-manage', 'news-manage']);
    }
    dataShow() {
        console.log(`superadmin-datashow`);
    }

    addRight() {

    }

    addUser() {

    }
}


class Admin extends User {
    constructor(name) {
        super(name, 'admin', ['home', 'user-manage',  'news-manage']);
    }
    dataShow() {
        console.log(`superadmin-datashow`);
    }

    addRight() {

    }

    addUser() {
        
    }
}

class Editor extends User {
    constructor(name) {
        super(name, 'editor', ['home', 'news-manage', 'new-manage']);
    }
    dataShow() {
        console.log(`superadmin-datashow`);
    }

    addRight() {

    }

    addUser() {
        
    }
}


function getAbstratctUserFactory(role) { 
    switch (role) {
        case 'superadmin':
            return new SuperAdmin('superadmin');
        case 'admin':
            return new Admin('admin');
        case 'editor':
            return new Editor('editor');
        default:
            throw new Error('参数错误');
    }
}

let user = getAbstratctUserFactory('superadmin');
console.log(user);

单例模式

是全局的，唯一的实例

好处

全局唯一

可以实现状态状态管理

坏处

副作用太大

不符合单一职责的原则。

Vue项目中的Vue实例

Node项目中的App实例

Vuex React-Redux中的store

// ###########################################################构造函数的实现，实例在外部
let singleton;

function Singleton() {
    if (!singleton) {
        singleton = this;
    }
    return singleton;
}

Singleton.prototype.getName = function () {
    console.log('我是单例');
}

let singleton1 = new Singleton();
let singleton2 = new Singleton();

console.log(singleton1 === singleton2);


// ###########################################################实例在内部
function Singleton2() {
    this.instance = null;
}

Singleton2.getInstance = function () {
    if (!this.instance) {
        this.instance = new Singleton2();
    }
}


Singleton2.prototype.getName = function () {
    console.log('我是单例');
}

const single2A = Singleton2.getInstance();
const single2B = Singleton2.getInstance();
console.log(single2A === single2B);


// #####################################################################使用闭包
const Singleton3 = (function () {
    let instance;
    function createInstance() {
        instance = '单例';
        return instance;
    }
    return {
        getInstance: function () {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    }
})();

const ins1 = Singleton3.getInstance();
const ins2 = Singleton3.getInstance();
console.log(ins1 === ins2);

es6

class Singleton {
    static instance;

    constructor() {
        if (!Singleton.instance) {
            Singleton.instance = this;
        }
        return Singleton.instance;
    }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2);

代理模式

VUE

object.defineProperty

new Proxy();

数据缓存的代理

localStorage的缓存 -- localStorage优先使用

观察者模式

class Subject {
    constructor() {
        this.deps = [];
        // state发生改变时，通知所有的observer
        this.state = 0;
    }

    attach(observer) {
        this.deps.push(observer);
    }

    setState(num) {
        this.state = num;
        this.notifyAllObservers();
    }

    notifyAllObservers() {
        this.deps.forEach(obs => obs.run(this.state))
    }
}


class Observer { 
    constructor(subject) {
        this.subject = subject;
        this.subject.attach(this);
    }
    run() {

    }
}


class BinaryObserver extends Observer { 
    constructor(subject) {
        super(subject);
    }
    run(data) {
        console.log(`hello, this is binaryObserver:  ${data}`);
    }
}
class ArrayObserver extends Observer { 
    constructor(subject) {
        super(subject);
    }
    run(data) {
        console.log(`hello, this is arrayObserver:  ${data}`);
    }
}


const subject = new Subject();
const bobs = new BinaryObserver(subject);
const aobs = new ArrayObserver(subject);

subject.setState(15);

class Subject {
    constructor() {
        this.observers = [];
    }

    add(observer) {
        this.observers.push(observer);
    }

    remove(observer) {
        const index = this.observers.indexOf(observer);
        if (index !== -1) {
            this.observers.splice(index, 1);
        }
    }

    notify(data) {
        this.observers.forEach(obs => obs.update(data));
    }
}

class Observer {
    constructor(name) {
        this.name = name;
    }

    update(data) {
        console.log(`${this.name} 收到数据：${data}`);
    }
}

const subject = new Subject();
const observer1 = new Observer('张三');
const observer2 = new Observer('李四');

subject.add(observer1);
subject.add(observer2);

setTimeout(() => {
    subject.remove(observer1)
}, 1000);

setTimeout(() => {
    subject.notify('Hello World!');
}, 1000);

发布订阅者模式

解耦代码

装饰器模式

保证原有函数功能不变的同时，增加一个新的功能(AOP面向切面编程)

ES和TypeScript的Decoratori语法

类装饰器，函数（方法）装饰器，属性装饰器

实现方式：class、高阶函数

适配器模式

class Target {
    api() {
        console.log('this is the api');
        
    }
}

class Adaptee { 
    newLogic() {
        console.log('new logic');
    }
}


class Adaptor extends Target { 
    constructor(adaptee) {
        super();
        this.adaptee = adaptee;
    }

    api() {
        this.adaptee.newLogic();
    }
}

const adaptor = new Adaptor(new Adaptee());
adaptor.api();

class TencentMap {
    show() {
        console.log('开始渲染腾讯地图');
    }
}


class BaiduMap {
    display() {
        console.log('开始渲染百度地图');
    }
}

class TencentAdapater extends TencentMap {
    constructor() {
        super();
    }

    display() {
        this.show();
    }
}

function renderMap(map) {
    map.display();
}


renderMap(new TencentAdapater());
renderMap(new BaiduMap());

策略模式

let strategry = {
    A: function (salary) {
        return salary * 4;
    },
    B: function (salary) {
        return salary * 3;
    },
    C: function (salary) {
        return salary * 2;
    }
}

function calBonus(level, salary) {
    return strategry[level](salary);
}

console.log(calBonus('A', 2000));

模块模式

桥接模式

桥接模式：将抽象部分与它的实现部分分离，使它们都可以独立地变化。

使用场景：一个类存在两个或多个独立变化的维度，且这两个维度都需要进行扩展

优点：

把抽象与实现隔离开，有助于独立地管理各组成部分。

缺点：

每使用一个桥接元素都要增加一次函数调用，这对应用程序的性能会有一些负面影响一一提高了系统的复杂程度。

组合模式

​

命令模式

宏命令

class MacroCommand {
    constructor() {
        this.list = [] //子命令对象
    }

    add(command) {
        this.list.push(command)
    }

    execute() {
        for (let item of this.list) {
            item.execute()
        }
    }
}

const Tabs = {
    execute(){
        console.log('选项卡执行');
    }
}

const Swipe = {
    execute(){
        console.log('轮播执行');
    }
}

const macroCommand = new MacroCommand()
macroCommand.add(Tabs)
macroCommand.add(Swipe)

macroCommand.execute()

模版方法模式

var Container = function (params = {}) {
    var F = function () { };

    F.prototype.init = function () {
        this.getData();
        this.render();
    }

    F.prototype.getData = params.getData || function () {
        throw new Error('必须传入getData方法')
    }

    F.prototype.render = function () {
        console.log('render');
    }
    return F;
};

var Myclass = Container({
    getData() {
        console.log('获取comingsoon');
        return [4, 5, 6]
    }
});
new Myclass().init();

迭代器模式

迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素，而又不需要暴露该对象的内部表示。迭

代器模式可以把选代的过程从业务逻辑中分离出来，在使用迭代器模式之后，即使不关心对象的内部构造，

也可以按顺序访问其中的每个元素。

1.为遍历不同数据结构的"集合"提供统一的接口；

2.能遍历访问"集合"数据中的项，不关心项的数据结构

var obj = {
    codeL: 200,
    name: 'kerwin',
    list: ['aaaa', 'bbbb', 'ccc'],
    [Symbol.iterator]: function () { 
        var index = 0;
        return {
            next: () => {
                if (index < this.list.length) {
                    return {
                        value: this.list[index++],
                        done: false
                    }
                } else {
                    return {
                        value: undefined,
                        done: true
                    }
                }
            }
        }
    }
}

for (let item of obj) {
    console.log(item)
}

职责链模式

使多个对象都有机会处理请求，从而避免了请求的发送者与多个接收者直接的耦合关系，将这些接收者连接

成一条链，顺着这条链传递该请求，直到找到能处理该请求的对象。

优点：

1.符合单一职责，使每个方法中都只有一个职责。

2.符合开放封闭原则，在需求增加时可以很方便的扩充新的责任

3.使用时候不需要知道谁才是真正处理方法，减少大量的if或switch语法。

缺点：

1.团队成员需要对责任链存在共识，否则当看到一个方法莫名其妙的返回一个nxt时一定会很奇怪。

2.出错时不好排查问题，因为不知道到底在哪个责任中出的错，需要从链头开始往后找

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="input" />
    <button id="btn">注册</button>
    <script>
      btn.onclick = function () {
        checks.check();
      };

      function checkEmpty() {
        if (input.value.length === 0) {
          console.log("这里不能为空");
          return;
        }
        return "next";
      }

      function checkNumber() {
        if (Number.isNaN(+input.value)) {
          console.log("这里只能是数字");
          return;
        }
        return "next";
      }

      function checkLength() {
        if (input.value.length < 6) {
          console.log("长度不能小于6");
          return;
        }
        return "next";
      }

      class Chain {
        constructor(fn) {
          this.checkRule = fn;
          this.nextRule = null;
        }

        addRule(nextRule) {
          this.nextRule = new Chain(nextRule);
          return this.nextRule;
        }

        end() {
          this.nextRule = {
            check: () => "end"
          };
        }

        check() {
          this.checkRule() === "next" ? this.nextRule.check() : null;
        }
      }
      const checks = new Chain(checkEmpty);
      checks.addRule(checkNumber).addRule(checkLength).end();
    </script>
  </body>
</html>