zhangdi

工厂模式 ⭐ ​

定义 ​

工厂模式（Factory Pattern），我们在创建对象时不会暴露创建逻辑，并且是通过使用一个共同的接口来指向新创建的对象。

工厂方法模式 ⭐ ​

定义 ​

工厂方法模式（Factory Method Pattern），本意是将实际创建对象的工作推迟到子类中，这样核心类就变成了抽象类。我们可以将工厂方法看作是一个实例化对象的工厂类。

实现 ​

js
// 文本工厂
class Text {
  constructor(text) {
    this.text = text
  }
  insert(where) {
    const txt = document.createTextNode(this.text)
    where.appendChild(txt)
  }
}

// 链接工厂
class Link {
  constructor(url) {
    this.url = url
  }
  insert(where) {
    const link = document.createElement('a')
    link.href = this.url
    link.appendChild(document.createTextNode(this.url))
    where.appendChild(link)
  }
}

// 图片工厂
class Image {
  constructor(url) {
    this.url = url
  }
  insert(where) {
    const img = document.createElement('img')
    img.src = this.url
    where.appendChild(img)
  }
}

// DOM工厂
class DomFactory {
  constructor(type) {
    return new (this[type]())()
  }

  // 各流水线
  link() {
    return Link
  }
  text() {
    return Text
  }
  image() {
    return Image
  }
}

// 创建工厂
const linkFactory = new DomFactory('link')
const textFactory = new DomFactory('text')

linkFactory.url = 'https://zdzhangdi.cn'
// linkFactory.insert(document.body)

textFactory.text = 'Hello world!'
// textFactory.insert(document.body)

抽象工厂模式 ​

定义 ​

抽象工厂模式（Abstract Factory Pattern），在工厂方法的基础上再抽象一层，用来管理多个工厂类，该超级工厂又称为其他工厂的工厂。

实现 ​

js
function getFunction(path, params) {
  console.log(path, params)
}

function postFunction(path, params) {
  console.log(path, params)
}

function putFunction(path, params) {
  console.log(path, params)
}

function ajaxInterface(type, path, params) {
  switch (type) {
    case 'post': {
      return postFunction(path, params)
    }
    case 'put': {
      return putFunction(path, params)
    }
    default:
      return getFunction(path, params)
  }
}

function user() {
  const USER_URL_MAP = {
    getUser: 'getUserUrl',
    updateUser: 'updateUserUrl',
  }

  return {
    getUser(params) {
      return ajaxInterface('get', USER_URL_MAP['getUser'], params)
    },
    updateUser(params) {
      return ajaxInterface('post', USER_URL_MAP['getUser'], params)
    },
  }
}

function order() {
  const ORDER_URL_MAP = {
    getOrder: 'getOrderUrl',
    getOrderList: 'getOrderUrl',
    setOrder: 'setOrderUrl',
    delOrder: 'delOrderUrl',
    updateOrder: 'updateOrderUrl',
  }
  return {
    getOrder(params) {
      return ajaxInterface('get', ORDER_URL_MAP['getOrder'], params)
    },
    getOrderList(params) {
      return ajaxInterface('get', ORDER_URL_MAP['getOrderList'], params)
    },
    delOrder(params) {
      return ajaxInterface('post', ORDER_URL_MAP['delOrder'], params)
    },
  }
}

function senUrl(businessType) {
  switch (businessType) {
    case 'user': {
      return user
    }
    case 'order': {
      return order
    }
    default: {
      console.log('无此业务类型')
      break
    }
  }
}

const userAction = senUrl('user')
userAction().getUser('用户信息哦')

const orderAction = senUrl('order')
orderAction().getOrder('订单信息哦')

应用场景 ​

  • jQuery 的 $
  • Vue 的 _createElementVNode
  • React 的 createElement

参考 ​