前端设计模式（0）面向对象&&设计原则

设计模式清单

没有连接的是尚未写的，计划要写的，欢迎阅读交流~
前端设计模式（0）面向对象&&设计原则
前端设计模式（1）--工厂模式
前端设计模式（2）--单例模式
前端设计模式（3）--适配器模式
前端设计模式（4）--装饰器模式
前端设计模式（5）--代理模式
前端设计模式（6）--外观模式&&观察者模式
前端设计模式（7）--状态和策略模式
前端设计模式（8）--原型模式
...

什么是面向对象

把客观对象抽象成属性数据和对数据的相关操做，把内部细节和不想关的信息隐藏起来，把同一个类型的客观对象的属性数据和操做绑定在一块儿，封装成类，而且容许分红不一样层次进行抽象，经过继承实现属性和操做的共享，来，前端设计模式咱们从面向对象开始。

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

继承

/**
 * 类 对象（实例）
 * 父类Animal是公共的
 */
class Animal {
  constructor (name) {
    this.name = name
  }
  eat () {
    console.log(`${this.name}eat`)
  }
}
let animal = new Animal('动物')
animal.eat()


/**
 * 继承
 * 子类继承父类
 * 继承能够把公共的方法抽离出来，提升复用，减小冗余
 */
class Animal {
  constructor (name) {
    this.name = name
  }
  eat () {
    console.log(`${this.name}eat`)
  }
}

class Cat extends Animal {
  constructor (myname, age) {
    super(myname)
    this.age = age
  }
  speak () {
    console.log(`${this.name}：喵喵~`)
  }
}
let cat = new Cat('小花猫', 0)
cat.eat () 
cat.speak () 
复制代码

封装

这里说明一下， 把数据封装起来 减小耦合，不应外部访问的不要让外部访问 利于数据的接口权限管理 ES6 目前不支持，通常认为_开头的都会私有的，不要使用，后面讲的会使用ts，有不了解的童鞋能够去官网看看，2分钟入门

class Animal2 {
  public name  // 公共的，类内或者类外均可以访问，好比：你的名字谁均可以知道
  protected age // 收保护的本身和本身的子类能够访问，好比：女性的年龄
  private monney // 只有本身能够知道哦，私房钱嘛
  constructor (name, age, monney) {
    this.name = name
    this.age = age
    this.monney = monney
  }
}
class Person2 extends Animal2 {
  private card;
  constructor(name,age,monney,card) {
      super(name, age, monney)
      this.card=card;
  }
  getName() {
      console.log(this.name);
  }
  getAge() {
      console.log(this.age);
  }
  getWeight() {
      console.log(this.monney); // [ts] 属性“monney”为私有属性，只能在类“Animal2”中
  }
}
let person = new Person2('dafei', 18, '100000', '金卡')
复制代码

多态

同一个接口能够不一样实现

保持子类的开放性和灵活性

面向接口编程

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 money;
    constructor(name,age,weight,money) {
        super(name,age,weight);
        this.money=money;
    }
    speak() {
        console.log('你好!');
    }    
}
class Dog extends Animal {
    private money;
    constructor(name,age,weight) {
        super(name,age,weight);
    }
    speak() {
        console.log('汪汪汪!');
    }    
}

let p=new Person('dafei',10,10,10);
p.speak();
let d=new Dog('dafei',10,10);
d.speak();
复制代码

设计原则

单一职责原则

• Single responsibility principle
• 一个程序只作好一件事
• 若是功能特别复杂就进行拆分

开放封闭原则

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

function parseJSON(response) {
  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 request(url, options) {
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON)
    .then(data=>{data})
    .catch(err => ({ err }));
}
复制代码

单一职责原则

• Single responsibility principle
• 一个程序只作好一件事
• 若是功能特别复杂就进行拆分

其它原则

还有L 里氏替换原则、I 接口隔离原则、D 依赖倒置原则，JS使用比较少。

下一遍咱们开始来一块儿学习，工厂模式