简单工厂模式

简单工厂模式

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

 

点评： 上述代码相对首次书写定义多个类进行验证是不是优雅很多呢？ 提供一个工厂函数，根据传入参数判断类型、提示语。 在团队项目开发，我们应该尽可能少的创建全局变量。同一类对象的不同需求，重复性代码可以提取出来，代码复用是面向对象编程的一条准则；