本文共 1813 字，大约阅读时间需要 6 分钟。

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 = 
   
				
    				
    
{
   [user.firstName, user.lastName].join(' ')}
			  
   
;// 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: '
   
    I am async!
   
'		})	}, 1000)})

1.3.3 设计原则验证

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

转载地址：http://ocqwi.baihongyu.com/