javascript设计模式之工厂模式

什么是工厂模式？

简单来说：工厂模式是一种 创建模式，用来解决创建对象的问题。根据参数类型，通过调用工厂方法来创建不同类型的对象。

为什么使用工厂模式？

当我们需要根据不同的需要来创建不同对象的时候，那么工厂模式就可以派上用场了。举个栗子：我们用代码来演示

function phoneShop() {}
phoneShop.prototype = {
  sellPhone: function(type) {
    var phone;
    switch(type) {
      case '苹果':
        phone = new iPhone()
        break
      case '华为': 
        phone = new Huawei()
        break
      default:
        phone = new Xiaomi()
    }
    phone.film()  //给手机贴膜
    return phone
  }

}

function iPhone() {
  this.say = function() {
    console.log('iPhone: 宇宙我最贵')
  }
  this.film = function() {
    console.log('iPhone 贴膜完成')
  }
}

function Huawei() {
  this.say = function() {
    console.log('华为: 我能看到银河')
  }
  this.film = function() {
    console.log('华为贴膜完成')
  }
}

function Xiaomi() {
  this.say = function() {
    console.log('小米: 你永远买不到我')
  }
  this.film = function() {
    console.log('小米贴膜完成')
  }
}

var shop = new phoneShop()
var myPhone = shop.sellPhone('华为')
myPhone.say()复制代码

那么对于手机店，不应该负责手机的生产，即new iphone() 这个实例的生产过程，交给手机工厂去生产就好，手机商店只负责销售和贴膜。那么应用工厂模式，代码如下：

var phoneFactory = {
  createPhone: function(type) {
    var phone;
    switch(type) {
      case '苹果':
        phone = new iPhone()
        break
      case '华为': 
        phone = new Huawei()
        break
      default:
        phone = new Xiaomi()
    }
    return phone
  }

}

function phoneShop() {}
phoneShop.prototype = {
  sellPhone: function(type) {
    var phone = phoneFactory.createPhone(type)
    phone.film()
    return phone
  }

}

function iPhone() {
  this.say = function() {
    console.log('iPhone: 宇宙我最贵')
  }
  this.film = function() {
    console.log('iPhone 贴膜完成')
  }
}

function Huawei() {
  this.say = function() {
    console.log('华为: 我能看到银河')
  }
  this.film = function() {
    console.log('华为贴膜完成')
  }
}

function Xiaomi() {
  this.say = function() {
    console.log('小米: 你永远买不到我')
  }
  this.film = function() {
    console.log('小米贴膜完成')
  }
}

var shop = new phoneShop();
var myPhone = shop.sellPhone('苹果')
myPhone.say()
复制代码

这样，我们通过phoneFactory.createPhone 来实例化手机对象，这样我们只需要关注商店需要什么类型的手机，工厂就可以产出相应的手机。

具体应用场景

1.比如我们最常见的jquery中的$('div')在选择div的时候就应用到了工厂模式，具体代码如下:

window.$ = function(selector){
    return new JQuery(selector)
}

class JQuery{
    constructor(selector){
        //省略
   }
}复制代码

这样我们便使用到了工厂模式。

2.我们根据不同的操作来创建不同的DOM

const Dom = {
    create:  function(type, url) {
        return new this.types[type](url) 
    },
    types: {
        text: function(url) {
           this.appendTo = function(parent) {
                parent.appendChild(document.createTextNode(url))
           }
        },
        image: function(url) {
           this.appendTo = function(parent) {
                let img = document.createElement('img')
                img.src = url
                parent.appendChild(img)
           }
        },
        link: function(url) {
           this.appendTo = function(parent) {
                let link = document.createElement('a')
                link.href = url
                link.appendChild(document.createTextNode(url))
                parent.appendChild(link)
           }
        }
    }
}

Dom.create('text', 'https://baidu.com').appendTo(document.body)
Dom.create('link', 'https://baidu.com').appendTo(document.body)
Dom.create('image', 'https://img.com').appendTo(document.body)复制代码

总结

当我们需要根据不同的条件来创建对象的时候，我们就可以考虑，使用工厂模式创建。

外部不许关心内部构造器是怎么生成的，只需调用一个工厂方法生成一个实例即可；

使构造函数和创建者分离，使程序的耦合度降低。

转载于:https://juejin.im/post/5d07013f518825699040e9a8