js设计模式-工厂模式

工厂模式

什么是工厂模式
工厂模式是一种 创建模式，用来解决创建对象的问题。根据参数类型，通过调用工厂方法来创建不同类型的对象。直营店下单给工厂，工厂造出所需的产品。具体怎么做的不管， 对于工厂来说，根据订单找另外的厂家，买来组装到一起。

适用场景：

• 对象的构建十分复杂
• 根据不同的条件创建不同的对象
• 处理大量具有相同属性的小对象

例如:
手机店 -> 根据指定类型出售手机功能

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()

贴膜可以由手机店来做，但生产手机不应该由手机店生产。可以让厂家生产

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()

一个实际点的例子

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://xxx.com').appendTo(document.body)
Dom.create('link', 'https://xxx.com').appendTo(document.body)
Dom.create('image','https://xxx.com/addons/theme//logo.acace42c.png').appendTo(document.body)

改进

const Dom = {
  create:  function(type, url) {
    return new this.types[type]
  },
  types: {
    text: function() {
      this.node = document.createTextNode('')
      this.appendTo = function(parent) {
        parent.appendChild(this.node)
        return this
      }
      this.setText = function(text) {
        this.node.data = text
        return this
      }
    },
    image: function() {
      this.node = document.createElement('img')
      this.appendTo = function(parent) {
        parent.appendChild(this.node)
        return this
      }
      this.setSrc = function(src) {
        this.node.src = src
        return this
      }
      this.setSize = function(width, height) {
        this.node.style.width = width + 'px'
        this.node.style.height = height + 'px'
        return this
      }
    },
    link: function() {
      this.node = document.createElement('a')
      this.appendTo = function(parent) {
        parent.appendChild(this.node)
        return this
      }
      this.setHref = function(href){
        this.node.href = href
        return this
      }
      this.setText = function(text) {
        this.node.appendChild(document.createTextNode(text))
        return this
      }
    }
  }
}

Dom.create('text')
    .setText('https://xxx.com')
    .appendTo(document.body)
Dom.create('link')
    .setHref('https://xxx.com')
    .setText('xxx')
    .appendTo(document.body)
Dom.create('image')
    .setSrc( 'http://xxx/11.jpg')
    .setSize(30, 30)
    .appendTo(document.body)