浅析JavaScript工厂模式

这里主要介绍两种工厂模式，第一种“简单工厂模式”，第二种“工厂方法模式”

简单工厂模式

1.定义

由一个工厂对象决定对象创建某一种产品对象的的实例。主要用来创建同一类对象。

2.具体需求

现在有一个登录模块，当用户的输入的用户名多于16个时，给一个警示弹窗

var LoginAlert = function(text) {
  this.content = text  
}

LoginAlert.prototype.show = function() {
  //显示警示框  
}
var userNameAlert = new LoginAlert('用户名不能多于16个字母或数字')
userNameAlert.show()

当用户输入的密码不正确时，给一个密码不正确的弹窗，心中暗喜，面对对象编程真好用，刚刚学完的类就能派上用场

var passwordAlert = new LoginAlert('输入的密码啊不正确')
passwordAlert.show();

新需求：当用户登录时用户名不存在的时候弹窗提示“您的用户名不存在，请重新输入”，并在警示框上加一个注册按钮，完了，之前的累无法复用，又得创建一个类

var LoginConfirm = function(text) {
  this.content = text  
}

LoginConfirm.prototype.show = function() {
  //显示确认框  
}
var loginFailConfrim = new LoginConfirm('您的用户名不存在，请重新输入')
loginFailConfrim.show()

新需求：当用户登录成功的时候给一个弹窗，除了有确认按钮和取消按钮，也提示一句‘欢迎回来，请输入您的心情’，这又得写一个新类

var LoginPrompt = function(text) {
  this.content = text  
}

LoginPrompt.prototype.show = function() {
  //显示确认框  
}

新需求：现在有注册模块也要做，也有这些需求，这时候我们应该怎么办呢？

我们这个把这三个类封装在一个函数里，这时候我们只需要记住这个函数，然后通过这个函数就可以创建我们需要的对象，这样所有使用的人都不在关注这些对象到底依赖于哪些基类，我们知道这个函数就可以。这个函数我们通常也称为工厂函数，这种模式叫简单工厂模式，是工厂模式中最简单的一种形式

如何改造：

var PopFactory = function(name) {
  switch(name) {
    case 'alert':
       return new LoginAlert();  
    case 'confirm':
       return new LoginConfirm(); 
    case 'prompt':
       return new LoginPrompt(); 
  }  
}

这样我们就实现了一个简单的工厂，使用者只要知道这个工厂和参数就行，但是这3个类用很多公有的方法，能不能提取出来？

现在我们把这三个类改成一个工厂模式，首先抽象他们的相同点，不如共有属性this.content,原型共有方法show，当然也有不同点，比如确认框和提示框的确定按钮，提示框的用户输入等等

function createPop(type, text) {
  var o = new Object();
  o.content = text;
  o.show = function() {
    //显示方法  
 }
 if (type == 'alert') {

 }
 if (type == 'prompt') {

 }
 if (type == 'confirm') {

 }  
}
//创建警示框
var userNameAlert = createPop('alert', '用户名只能是26个字母和数字')

总结：团队开发不同于个人开发，其对全局变量限制很大，所以我们要尽量少的创建全局变量。对于同一类对象在不同需求中的重复性使用，很多时候不需要重复创建，代码复用是面向对象的一条准则

 

2.工厂方法模式

定义

通过对产品类的抽象使其创造业务只要负责用户创建多类产品的实例

具体需求

网站首页要展示一个大批学科，字体和颜色不一

var Java = function(content) {
  this.content = content
  (function() {
     var div = document.createElement('div')
     div.innerHtml = content;
     div.style.color = 'green';
     dicument.getElementById('container').appendChild('div')  
  })(content)  
}

var Php = function(content) {
  //....
}

上节课学过的简单工厂模式派上了用场，赶紧去用简单的工厂模式去实现一下，这样以后再创建对象直接找工厂就行

var Java = function(content) {
  this.content = content
  (function() {
     var div = document.createElement('div')
     div.innerHtml = content;
     div.style.color = 'green';
     dicument.getElementById('container').appendChild('div')  
  })(content)  
}

var Php = function(content) {
  //....
}

var JavaScript = function(content) {
 //...
}

function JobFactory(type, content) {
   switch(type) {
      case: 'java':
         return new Java(content)
      case: 'php':
         return new Php(content)
      case: 'javascript':
         return new JavaScript(content)
   }
}

新需求：现在又需要加一批UI学科，红色边框。

问题：需求一直在变，开始需求简单，直接创建对象，后来需求多了，用简单方法工厂方法重构，现在又变了，不仅仅要添加类，还要修改工厂函数，很麻烦，现在引入我们的工厂方法来解决这个问题

Factory.prototype = {
  Java:function(content) {
     //...  
  },
  JavaSctipt:function(content) {
    //...  
  },
  Java: function(content) {
    //...
  }
}

这样我们如果要添加其他的类，只需要写在Factory这个工程类里面就行了

安全的工厂方法

安全的工厂方法是可以屏蔽一些使用过程中造成的错误，我们知道类前面不要有new的关键字，不过如果其他人不知道这个对象是一个雷，忽略了new关键字直接执行，此时得不到我们预期的对象，解决办法如下

var Factory = function(type, content) {
  if (this instanceof Factory) {
     var s = new this[type](content)
    return s
   } else {
     return new Factory(type, content)
   }
}
Factory.prototype = {
  Java:function(content) {
     //...  
  },
  JavaSctipt:function(content) {
    //...  
  },
  Java: function(content) {
    //...
  }
}

Javascript工厂模式介绍到此结束，有不对的地方请及时指出