欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript设计模式之工厂模式

程序员文章站 2024-01-21 18:20:34
...

引入:

你去肯德基买汉堡,直接点餐、取餐,而不是进入肯德基的厨房自己去做汉堡,做汉堡的工作由肯德基店来实现,即肯德基店要封装做汉堡的工作,做好直接给消费者。
肯德基店就充当了工厂,他去生产汉堡,也就是new汉堡的操作由他来实现

工厂模式介绍:

  • 将new 操作单独封装
  • 遇到new时,就要考虑是否该使用工厂模式

使用场景:

  • jQuery里的$(‘div’)中的$()就是一个工厂,因为用户不能每次都去new jQuery(),而这个操作就应该交给$()工厂来干,这样就符合开放封闭原则。
  • React.createElement
  • Vue异步组件

工厂模式实现:

//工长模式
class Product {
	constructor (name) {
		this.name = name
	}
	init () {
		console.log('init')
	}
	fn1 () {
		console.log('fn1')
	}
	fn2 () {
		console.log('fn2')
	}
}

class Creator {
	create (name) {
		return new Product(name)
	}
}

let creator = new Creator()
let p = creator.create('p1')
p.init()