简单工厂模式

原创

兰亭古墨 2021-07-16 09:49:06 ©著作权

©著作权归作者所有：来自51CTO博客作者兰亭古墨的原创作品，请联系作者获取转载授权，否则将追究法律责任

简单工厂模式

需求: 原生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()