JS设计模式--工厂模式

介绍

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

演示

	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();
	p.fn1();
	p.fn2();

场景

• jQuery -> $(‘div’)

	class jQuery {
		constructor(selector) {
			// ...
		}
		append(node) {}
		// ...
	}
	// 只暴露一个接口，将（new 构造函数）这个操作进行封装，方便用户使用
	window.$ = function (selector) {
		return new jQuery(selector);
	}

• React -> React.createElement

	class Vnode {
		constructor(tag, attrs, children) {/* ... */}
		// ...
	}
	React.createElement = function () {
		return new Vnode(tag, attrs, children);
	}

• Vue -> 异步组件

设计模式的设计原则

• 构造函数和创建者分离
• 符合开放封闭原则