簡單工廠模式

簡單工廠模式

需求: 原生js實現一個登陸驗證的提示，當用戶輸入用戶名或者密碼不正確時，給出提示

var LoginAlert = function (text) {
  this.content = text
}
LoginAlert.prototype.show = function () {
  alert(this.content)
}
​
var userNameAlert = new LoginAlert('用戶名不能多於16個字母和數字')
userNameAlert.show()
​
var pasWordAlert = new LoginAlert('輸入密碼不正確')
pasWordAlert.show()

 

新需求： 再加一個註冊按鈕，同樣進行輸入框的驗證

var RegisterAlert = function (text) {
  this.content = text
}
RegisterAlert.prototype.show = function () {
  alert(this.content)
}
​
var RegisterFailedAlert = new RegisterAlert('用戶名已存在，請重新輸入')
RegisterFailedAlert.show()

 

新需求： 再添加一個登錄成功的提示框

var LoginPrompt = function (text) {
  this.content = text
}
LoginPrompt.prototype.show = function () {
  alert(this.content)
}
var loginSuccess = new LoginPrompt('登錄成功，填寫今天的心情吧~~~')
loginSuccess.show()

 

點評： 這麼寫已經能夠滿足於需求，只是比較零散，如果將上述類封裝在一個類，複用重複性代碼，然後調用一個類，從而實現需求的功能，豈不是好？

var Factory = function (name) {
  switch (name) {
    case 'alert':
      return new LoginAlert();
    case 'register':
      return new RegisterAlert()
    case 'LoginPrompt':
      return new LoginPrompt()
  }
}

 

點評：上述代碼雖然將多個類封裝在一個函數裏面，但是存在大量的重複性代碼，可以繼續優化下

var LoginValid = function (tips) {
  this.content = tips
}
LoginValid.prototype.show = function () {
  alert(this.content)
}
var FactoryFun = function (type, tips) {
  var obj = new Object();
  obj.content = tips;
  obj.show = function () {
    alert(this.content)
  }
  if (type === 'alert') {
​
  }
  if (type === 'register') {
​
  }
  if (type === 'LoginPrompt') {
​
  }
  return obj
}
​
var loginInstance = FactoryFun('alert', '用戶名輸入錯誤')
loginInstance.show()

 

點評： 上述代碼相對首次書寫定義多個類進行驗證是不是優雅很多呢？ 提供一個工廠函數，根據傳入參數判斷類型、提示語。 在團隊項目開發，我們應該儘可能少的創建全局變量。同一類對象的不同需求，重複性代碼可以提取出來，代碼複用是面向對象編程的一條準則；