什么是工厂模式？
工厂模式是一种 创建模式，用来解决创建对象的问题。根据参数类型，通过调用工厂方法来创建不同类型的对象。
适用场景：
1、对象的构建十分复杂。
2、根据不同的条件创建不同的对象。
3、处理大量具有相同属性的小对象。
代码演示
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://jirengu.com').appendTo(document.body)
Dom.create('link', 'https://jirengu.com').appendTo(document.body)
Dom.create('image', 'https://jirengu.com/addons/theme/hunger-new/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://jirengu.com')
.appendTo(document.body)
Dom.create('link')
.setHref('https://jirengu.com')
.setText('饥人谷')
.appendTo(document.body)
Dom.create('image')
.setSrc( 'http://cdn.jirengu.com/book.jirengu.com/img/11.jpg')
.setSize(30, 30)
.appendTo(document.body)