设计模式(0) 面向对象&设计原则

什么是面向对象

把客观的对象抽象成属性数据和对数据的相关的操作（也就是方法），把内部的细节和不想关的信息隐藏起来，把同一个类型的客观对象的属性数据和操作绑定在一起，封装成类，并且允许分成不同层次进行抽象，通过继承实现属性和操作的共享。

• 面向对象的分析 OOA
• 面向对象的设计 OOD
• 面向对象的编程 OOP

继承

/**
 * 类 对象（实例）
 * 父类 Animal 是公共的
 */
class Animal {
  constructor(name) {
    this.name = name
  }

  eat() {
    console.log(`${this.name} eat`)
  }
}

let animal = new Animal('动物')

animal.eat()

/**
 * 继承
 * 子类继承父类
 * 继承可以把公共方法抽离出来，减少冗余
 */
class Cat extends Animal {
  constructor(myName, age) {
    super(myName)
    this.age = age
  }

  speak() {
    console.log(`${this.name}: 喵喵～～`)
  }
}

let cat = new Cat('小花猫', 2)

cat.eat()
cat.speak()

封装

把数据封装起来，减少耦合，不该外部访问的不要让外部访问，利于数据的接口权限管理 ES6 目前不支持，一般认为_开头的都会私有的，不要使用，后面讲的会使用 ts

class person {
  public name // 公共的，类或者类外都可以访问，比如：你的名字谁都可以知道
  protected age // 受保护的自己和自己的子类可以访问，比如：女性的年龄
  private monney // 只有自己可以知道哦，私房钱

  constructor(name, age, monney) {
    this.name = name
    this.age = age
    this.monney = monney
  }

  getName() {
    console.log(this.name)
  }

  getAge() {
    console.log(this.age)
  }

  getMonney() {
    console.log(this.monney) // [ts] 属性 monney 为私有属性，只能在类 Person 中访问
  }
}

let person = new person('jack', 20, '10000')

多态

同一个接口可以不同实现，保持子类的开发性和灵活性，面向接口编程

class Animal {
  public name
  protected age
  private weight

  constructor(name, age, weight) {
    this.name = name
    this.age = age
    this.weight = weight
  }
}

class Person extends Animal {
  private monney

  constructor(name, age, weight, monney) {
    super(name, age, weight)
    this.monney = monney
  }

  speak() {
    console.log('hi hi')
  }
}

class Dog extends Animal {
  private monney

  constructor(name, age, weight) {
    super(name, age, weight)
  }

  speak() {
    console.log('汪汪～～')
  }
}

let p = new Person('jack', 10, 10, 10)
p.speak()

let d = new Dog('rose', 10, 10)
d.speak()

设计原则

单一职责原则

• 一个程序只做好一件事
• 如果功能特别复杂就拆分

开放封闭原则

• 对扩展开放，对修改关闭
• 增加需求时，扩展新代码，而非修改已有代码
• 这是软件设计的终极目标

function parseJSON() {
  return response.json()
}

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  }

  const error = new Error(response.statusText)
  error.response = response
  throw error
}

export default function requset(url, options) {
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON)
    .then(data => data)
    .catch(err => ({ err }))
}

其他原则

• 里氏替换原则
• 接口隔离原则
• 依赖倒置原则