JavaScript 设计模式----工厂模式

1. 工厂模式

1.1 工厂模式介绍

1.1.1 介绍

• 将 new 操作单独封装
  • new 操作主要出现在面向对象创建实例的过程中
• 遇到 new 时，就要考虑是否该使用工厂模式

1.1.2 示例

• 去吃饭，直接点餐，取餐，不会自己亲手做
• 商店要“封装”做饭菜的工作，做好直接给买者

1.2 工厂模式 UML类图

1.2.1 传统 UML 类图

1.2.2 简化后的 UML 类图

1.3 工厂模式演示场景

1.3.1 工厂模式代码

class Product {
	constructor(name) {
		this.name = name
	}
	init() {
		alert('init')
	}
	fun1() {
		alert('fun1')
	}
	fun2() {
		alert('fun2')
	}
}

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

// 测试
let creator = new Creator()
let p = creator.create('p1')
p.init()
p.fun1()

1.3.2 工厂模式场景

• jQuery 中的 $('div')

  • $(‘div’) 和 new $(‘div’) 有何区别
    • $(‘div’) 是工厂模式，new $(‘div’) 不是工厂模式，是根据构造函数去生成实例的
    • 书写麻烦，jQuery 的链式操作很麻烦
    • 一旦 jQuery 构造函数的名字变化，问题会很严重
      • 通过一个工厂模式把真正的构造函数和使用者隔离开，让创建对象、实例的时候有一个统一的入口，不是说把所有的构造函数开放给所有的人来自己生成
      • 如果是 new $(‘div’) 的方式完全开放给所有人，会导致开放的东西太多了，没有封装好
      • 如果是 $(‘div’) 的方式就把该封装的东西封装好了，只是开放给用户一个 create 创建的函数，如果有改动，这种方式更好

• React.createElement

  • React.createElement 是一个工厂模式
  • 创建 div，传入 img、h3 以及各自的属性等等
  • 最终创建的是一个 Vnode 实例，一个虚拟DOM节点Vnode的实例

var profile = <div>
				<img src="avatar.png" className="profile" />
				<h3>{[user.firstName, user.lastName].join(' ')}</h3>
			  </div>;

// jsx 编译后
var profile = React.createElement("div", null, 
	React.createElement("img", { src: "avatar.png", className: "profile" }),
	React.createElement("h3", null, [user.firstName, user.lastName].join(" "))
);

// 源码
class Vnode(tag, attrs, chilren) {
	// ... 省略内部代码 ...
}
React.createElement = function (tag, attrs, children) {
	return new Vnode(tag, attrs, chilren)
}

• vue 异步组件
  • Vue.component 是一个 Promise，但是最终返回的也是 Vue 的组件
  • Vue 异步组件在不同场景下用到的不一样
  • 是针对异步拉取创建组件的一种形式

Vue.component('async-example', function (resolve, reject) {
	setTimeout(function () {
		resolve({
			template: '<div>I am async!</div>'
		})
	}, 1000)
})

1.3.3 设计原则验证

• 构造函数和创建者分离
  • 工厂模式在于将构造函数与创建者（工厂）进行分离
  • 通过工厂方法把构造函数与用户之间进行分离，不产生耦合关系，符合设计原则
• 符合开放封闭原则
  • 大部分开放封闭的原则都是基于分离的情况