javascript設計模式學習之路

面向對象

概念

• 類，具備相同或類似屬性或方法的對象的抽象就是類。例如：人都有姓名、年齡，都會吃飯、說話，其中姓名、年齡就是人這個類的屬性，吃飯、說話就是人這個類的方法。
• 對象，類的具體實現就是對象。例如，小明這我的就能夠認爲是人這個類的具體實現。

示例代碼：

// 類
class Person {
  constructor(name, age) {
    this.name = name // 屬性 姓名
    this.age = age // 屬性 年齡
  }
  // 方法 吃飯
  eat() {
    alert(`${this.name} eat something.`)
  }
  // 方法 說話
  speak() {
    alert(`My name is ${this.name}, my age is ${this.age}.`)
  }
}
// 對象 Person的具體實現
const xiaoming = new Person('xiaoming', 10)
xiaoming.eat()
xiaoming.speak()

三要素

• 繼承，子類能夠繼承父類的屬性和方法。例如，學生是人類的一種，具備人類的全部特性，也能夠有本身的特性，能夠認爲學生繼承了人這個父類。

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  eat() {
    alert(`${this.name} eat something.`)
  }
  speak() {
    alert(`My name is ${this.name}, my age is ${this.age}.`)
  }
}

// Student 繼承了 Person，具備 Person 的全部屬性，而且有本身的特有屬性
class Student extends Person {
  constructor(name, age, no) {
    super(name, age)
    this.no = no // 學生能夠有學號屬性
  }
  // 學生能夠學習
  study() {
    alert(`${this.name} study something.`)
  }
}

const xiaoming = new Student('xiaoming', 10, '10010')
xiaoming.study()

• 封裝，類的屬性具備訪問權限。說到封裝不得不說public、protected、private三個關鍵字，其中public關鍵字修飾的屬性表示公有的屬性，能夠隨便訪問，protected關鍵字修飾的屬性表示子類內部能夠訪問，private關鍵字修飾的屬性只能在類內部訪問，外部沒法訪問（圖中+表示共有屬性、#表示子類能夠訪問、-表示私有屬性，因爲 javascript 不支持這三種修飾符，因此此處用 typescript 演示，瞭解便可）。

class Person {
  public name // 公有屬性，能夠隨便訪問
  public age
  protected weight // 子類內部能夠訪問，外部沒法訪問
  constructor(name, age) {
    this.name = name
    this.age = age
    this.weight = 120
  }
  eat() {
    console.log(`${this.name} eat something.`)
  }
  speak() {
    console.log(`My name is ${this.name}, age is ${this.age}.`)
  }
}

class Student extends Person {
  private grilfriend // 私有屬性，只有在 Student 類內部才能夠訪問
  constructor(name, age) {
    super(name, age)
    this.grilfriend = 'xiaoli'
  }
  study() {
    alert(`${this.name} study.`)
  }
  getWeight() {
    alert(`weight ${this.weight}.`) // protected 修飾的屬性子類內部能夠訪問
  }
}

let xiaoming = new Student('xiaoming', 10)
xiaoming.getWeight()
alert(xiaoming.name)
// alert(xiaoming.weight) // 報錯
// alert(xiaoming.grilfriend) // 報錯

• 多態，子類既能夠繼承父類的屬性和方法，也能夠有本身的特性。學生是人類的一種，除了具備人類的全部特性以外，還能夠有本身獨特的特性，例如學生能夠進行學習這個動做。

class Person {
  constructor(name) {
    this.name = name
  }
  saySomething() {}
}

class A extends Person {
  constructor(name) {
    super(name)
  }
  saySomething() {
    alert('This is A.')
  }
}

class B extends Person {
  constructor(name) {
    super(name)
  }
  saySomething() {
    alert('This is B.')
  }
}

五大設計原則

• 單一職責原則，應該有且只有一個引發變動的緣由，一個程序只作一件事情，若是功能過於複雜，就要拆開，每部分保持獨立。
• 開放封閉原則，一個軟件的實體，好比模塊、類、對象應該對擴展開放，對修改封閉，增長新需求時要增長代碼而不是修改代碼。
• 里氏置換原則，只要父類出現的地方，子類就能夠出現，且替換成子類也不會產生任何錯誤或者異常。
• 接口獨立原則，創建單一接口，不要創建臃腫龐大的接口。即接口儘可能細化，同時接口中的方法儘可能少。
• 依賴倒置原則，面向接口編程，模塊間的依賴關係經過接口和抽象類產生，實體類之間不直接發生依賴關係。
• 最少知識原則，爲一個系統提供一個簡單的入口，訪問者或者客戶不用瞭解系統內部的實現細節，只要懂得如何調用就好。

工廠模式

定義一個建立對象的工廠，將建立者和構造函數分離，建立者不用關心具體構造函數的實現，符合開放封閉原則和最少知識原則。

class Product {
  constructor(name) {
    this.name = name
  }
  init() {
    console.log('init.')
  }
  fn() {
    console.log('fn.')
  }
}

class Creator {
  create(name) {
    return new Product(name)
  }
}

const creator = new Creator()
const obj = creator.create('obj')
obj.init()
obj.fn()

單例模式

系統中被惟一使用，一個類只有一個示例，例如：

• 登陸框
• 購物車

class SingleObject {
  constructor() {}
  init() {
    console.log('init...')
  }
}

SingleObject.getInstance = (function() {
  let instance = null
  return function() {
    if (!instance) {
      instance = new SingleObject()
    }
    return instance
  }
})()

const obj1 = SingleObject.getInstance()
obj1.init()
const obj2 = SingleObject.getInstance()
obj2.init()
console.log(obj1 === obj2)