JavaScript设计模式之工厂模式
Contents
- 1 介绍
- 2 举例
- 3 UML类图
- 4 代码演示
- 5 使用场景
- 5.1 jQuery
- 5.2 React.createElement
- 5.3 vue的异步组件
介绍
- 将
new操作单独封装 - 遇到
new时。考虑是否使用工厂模式
举例
- 去购买汉堡，直接点餐、取餐，不会自己做
- 商店要封装做汉堡的工作，做好直接给买着不会将面包鸡肉等给买者
UML类图
- 创建一个Product商品类包含
name,init,fun1,fun2等属性和方法 - 创建一个
Creator创建类 返回一个Product类，这样在newProduct的时候可以考虑不直接new的形式而通过Creator实例的create方法返回一个Product实例
代码演示
//商品类
class Product{
constructor(name){
this.name = name
}
init(){
alert(`init -- ${this.name}`)
}
fun1(){
alert('fun1')
}
fun2(){
alert('fun2')
}
}
//工厂类
class Creator{
create(name){
return new Product(name)
}
}
const c = new Creator();
const pro = c.create('汉堡包')
pro.init()
pro.fun1()使用场景
- jQuery – $(‘div’)
- React.createElement
- vue异步组件
jQuery
- $(‘div’)和 new $(‘div’)的区别
- 首先是书写麻烦，如果全部使用$(‘div’)工厂创建的话不会带来链式操作的复制
- 其次是如果jQuery的名字发生变化，将会是灾难性的,工厂模式创建的对象跟需要创建的对象的联系只有一次只需修改一个地方即可
class JQuery {
constructor(selector) {
let slice = Array.prototype.slice
let dom = slice.call(document.querySelectorAll(selector))
let len = dom ? dom.length : 0
for (let i = 0; i < len; i++) {
this[i] = dom[i]
}
this.length = len
this.selector = selector || ''
}
append(node) {
}
addClass(name) {
}
html() {
}
//...若干api
}
window.$ = function (selector) {
return new JQuery(selector)
}React.createElement
//jsx
var profile = `<div>
<img src="avatar.png" alt="">
<h3>{[user.firstName,user.lastName].join('-')}</h3>
</div>`;
//React 将书写的jsx转化成这样的
var profile = React.createElement('div',null,
React.createElement('img',{src:'avatar.png',alt:''}),
React.createElement('h3',null,[user.firstName,user.lastName].join('-'))
)
//创建虚拟dom
class Vnode{
constructor(tag,attrs,chilren){
//。。。省略
}
}
React.createElement = function (tag,attrs,chilren) {
return new Vnode(tag,attrs,chilren)
}vue的异步组件
//只是演示代码
Vue.component('async-example',function (resolve,reject) {
setTimeout(function () {
resolve({
template:`<div>I am async</div>`
})
},1000)
})代码：https://github.com/ahwgs/design-pattern-learning/tree/master/3%E3%80%81JavaScript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B9%8B%E5%B7%A5%E5%8E%82%E6%A8%A1%E5%BC%8F
举报
腾讯云开发者
