工厂模式

三个按钮控制一个header框,成功,警告,错误,分别对应三个颜色
创建了一个Base类,里面存放着Success,Warning,Error三个类的公共方法和属性
Factrory类,根据不同的status创建不同的对象,
然后想要扩展的东西就是再各自的类里面进行扩展,
再Base类,还可以扩展一些校验的方法,比如说 static validStatus()

index.html

  
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>工厂模式</title>
  <style>
    .content {
      position: fixed;
      top: 100px;
      left: 100px;
      width: 100px;
      height: 100px;
      border: 1px solid red;
    }
 
    .title {
      border: 1px solid blue
    }
 
    .success {
      background-color: green;
    }
 
    .warning {
      background-color: orange;
    }
 
    .error {
      background-color: red;
    }
  </style>
</head>
 
<body>
  <div>
    <div class="content">
      <header class="title">header</header>
      <div>
        body
      </div>
    </div>
    <div id="btn-group">
      <button data-status="success">success</button>
      <button data-status="warning">waring</button>
      <button data-status="error">error</button>
    </div>
  </div>
  <script type="module" src="src/main.js"></script>
</body>
 
</html>

main.js

  
import { Factory } from './factory.js'
 
 
const domEle = document.getElementsByClassName('title')[0]
const btnGroup = document.getElementById('btn-group')
 
const factory = new Factory(domEle)
 
const init = () => {
  btnGroup.addEventListener('click', handleClick)
}
 
const handleClick = (e) => {
  const status = e.target.dataset.status
  // 通过工厂对象 根据不同的状态创建不同的对象
  const obj = factory.create(status, '通用header')
  // 通过对象的形式改变状态
  obj.changeStatus()
}
 
init()

factory.js

  
import { STATUS } from './type.js'
 
// Suceess,Warning,Error的基类,存放这个共同的方法
class Base {
 
  constructor(dom, status) {
    this.dom = dom
    this.status = status
  }
 
  get className() {
    let name = 'title'
    switch (this.status) {
      case STATUS.SUCCESS:
        name += ' success'
        break
      case STATUS.WARNING:
        name += ' warning'
        break
      case STATUS.ERROR:
        name += ' error'
        break
      default:
        break
    }
    return name
  }
 
  changeStatus() {
    this.dom.className = this.className
  }
 
  static validStatus(status) {
    for (let key in STATUS) {
      if (STATUS[key] === status) {
        return
      }
    }
    throw new Error('不存在' + status + '状态')
  }
}
 
class Success extends Base {
  constructor(dom, status, title) {
    super(dom, status)
    this.title = '成功header' + title
  }
  changeStatus() {
    super.changeStatus()
    this.dom.innerText = this.title
    setTimeout(() => this.goHome(), 3000)
  }
  goHome() {
    window.location.href = 'https://www.baidu.com'
  }
}
 
class Warning extends Base {
  constructor(dom, status, title) {
    super(dom, status)
    this.title = '警告header' + title
  }
  changeStatus() {
    super.changeStatus()
    this.dom.innerText = this.title
    this.showWaring()
  }
  showWaring() {
    console.log('warning info is here ...');
  }
}
 
class Error extends Base {
  constructor(dom, status, title) {
    super(dom, status)
    this.title = '错误header' + title
  }
  changeStatus() {
    super.changeStatus()
    this.dom.innerText = this.title
  }
  showError() {
    console.log('error info is here ...');
  }
}
 
class Factory {
  constructor(dom) {
    this.dom = dom
  }
  // 根据不同的status创建不同的对象,这个也是工厂类最最注意的作用,根据一些条件创建不同的对象,然后返回
  create(status, title) {
    // 校验状态
    Base.validStatus(status)
    switch (status) {
      case STATUS.SUCCESS:
        return new Success(this.dom, status, title)
      case STATUS.WARNING:
        return new Warning(this.dom, status, title)
      case STATUS.ERROR:
        return new Error(this.dom, status, title)
      default:
        break
    }
  }
}
export { Factory }

type.js

  
const STATUS = {
  SUCCESS: 'success',
  WARNING: 'warning',
  ERROR: 'error'
}
export { STATUS }

posted on 2022-11-16 23:15 超级无敌美少男战士阅读(23) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· ja_JavaScript_生成器

· threejs_单例模式_项目结构_tansform控制器_css2dlabel_事件派发EventDispacher_事件管理

· 02.01工厂方法模式

· 工厂方法模式

· 工厂方法模式 (Factory Method Pattern)

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

怪物奇妙物语

最新随笔

我的标签

积分与排名

随笔分类 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

工厂模式

index.html

main.js

factory.js

type.js


	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>工厂模式</title>
	<style>
	.content {
	position: fixed;
	top: 100px;
	left: 100px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
	}

	.title {
	border: 1px solid blue
	}

	.success {
	background-color: green;
	}

	.warning {
	background-color: orange;
	}

	.error {
	background-color: red;
	}
	</style>
	</head>

	<body>
	<div>
	<div class="content">
	<header class="title">header</header>
	<div>
	body
	</div>
	</div>
	<div id="btn-group">
	<button data-status="success">success</button>
	<button data-status="warning">waring</button>
	<button data-status="error">error</button>
	</div>
	</div>
	<script type="module" src="src/main.js"></script>
	</body>

	</html>


	import { Factory } from './factory.js'


	const domEle = document.getElementsByClassName('title')[0]
	const btnGroup = document.getElementById('btn-group')

	const factory = new Factory(domEle)

	const init = () => {
	btnGroup.addEventListener('click', handleClick)
	}

	const handleClick = (e) => {
	const status = e.target.dataset.status
	// 通过工厂对象根据不同的状态创建不同的对象
	const obj = factory.create(status, '通用header')
	// 通过对象的形式改变状态
	obj.changeStatus()
	}

	init()


	import { STATUS } from './type.js'

	// Suceess,Warning,Error的基类,存放这个共同的方法
	class Base {

	constructor(dom, status) {
	this.dom = dom
	this.status = status
	}

	get className() {
	let name = 'title'
	switch (this.status) {
	case STATUS.SUCCESS:
	name += ' success'
	break
	case STATUS.WARNING:
	name += ' warning'
	break
	case STATUS.ERROR:
	name += ' error'
	break
	default:
	break
	}
	return name
	}

	changeStatus() {
	this.dom.className = this.className
	}

	static validStatus(status) {
	for (let key in STATUS) {
	if (STATUS[key] === status) {
	return
	}
	}
	throw new Error('不存在' + status + '状态')
	}
	}

	class Success extends Base {
	constructor(dom, status, title) {
	super(dom, status)
	this.title = '成功header' + title
	}
	changeStatus() {
	super.changeStatus()
	this.dom.innerText = this.title
	setTimeout(() => this.goHome(), 3000)
	}
	goHome() {
	window.location.href = 'https://www.baidu.com'
	}
	}

	class Warning extends Base {
	constructor(dom, status, title) {
	super(dom, status)
	this.title = '警告header' + title
	}
	changeStatus() {
	super.changeStatus()
	this.dom.innerText = this.title
	this.showWaring()
	}
	showWaring() {
	console.log('warning info is here ...');
	}
	}

	class Error extends Base {
	constructor(dom, status, title) {
	super(dom, status)
	this.title = '错误header' + title
	}
	changeStatus() {
	super.changeStatus()
	this.dom.innerText = this.title
	}
	showError() {
	console.log('error info is here ...');
	}
	}

	class Factory {
	constructor(dom) {
	this.dom = dom
	}
	// 根据不同的status创建不同的对象,这个也是工厂类最最注意的作用,根据一些条件创建不同的对象,然后返回
	create(status, title) {
	// 校验状态
	Base.validStatus(status)
	switch (status) {
	case STATUS.SUCCESS:
	return new Success(this.dom, status, title)
	case STATUS.WARNING:
	return new Warning(this.dom, status, title)
	case STATUS.ERROR:
	return new Error(this.dom, status, title)
	default:
	break
	}
	}
	}
	export { Factory }


	const STATUS = {
	SUCCESS: 'success',
	WARNING: 'warning',
	ERROR: 'error'
	}
	export { STATUS }