前端設計模式（0）物件導向&&設計原則

duffy發表於2019-01-08
前端設計模式物件

設計模式清單

沒有連結的是還沒有寫的，計劃要寫的，歡迎閱讀交流~
前端設計模式（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使用比較少。

下一遍我們開始來一起學習，工廠模式

相關文章