工厂模式
简单工厂模式
** 这是一个植物父类Plant,拥有一个名字和grow方法。底下一个苹果和橘子继承植物的衣钵，也拥有生长，同时也有自己的属性和特性。 **
class Plant {
constructor(name) {
this.name = name;
}
grow() {
console.log('gorw~~~~~~')
}
}
class Apple extends Plant {
constructor(name) {
super(name);
this.content = '做苹果的步骤。。。削皮';
this.taste = '甜';
}
}
class Orange extends Plant {
constructor(name) {
super(name);
this.content = '做橘子的步骤.... 剥皮';
this.taste = '酸';
}
}
** 普通调用 **
缺点：麻烦！用户需要知道怎么创建实例，用户需要了解苹果和橘子是怎么做出来的。所以就出来了简单工厂模式
// 直接new 缺点
// 1.耦合，2.依赖具体实现
new Apple();
new Orange();
** 简单工厂模式 **
优点：用户避开了创建实例过程，只需要声明需要哪种水果，不用处理其他的事情。
class Factory {
static create(name) {
switch (name) {
case 'Apple':
return new Apple('苹果');
case 'Orange':
return new Orange('橘子');
default:
throw Error('抱歉，没有')
}
}
}
let apple = Factory.create('Apple');
let orange = Factory.create('Orange');
// 执行结果
Apple { name: '苹果', content: '做苹果的步骤。。。削皮', taste: '甜' }
Orange { name: '橘子', content: '做橘子的步骤.... 剥皮', taste: '酸' }
** 简单工厂例子-jQuery **
用户避开了获取实例过程，只需要执行$()里对应方法。
class jQuery {
constructor(selector) {
console.log(selector)
let elements = Array.from(document.querySelectorAll(selector));
let length = elements.length ? elements.length : 0;
for (let i = 0; i < length; i++) {
this[i] = elements[i];
}
this.length = length;
}
hahaha(e) {
console.log(this,e)
}
}
window.$ = function (selector) {
return new jQuery(selector)
}
$('#userFrom').hahaha('hhhhh');
** 调用结果 **
工厂方法模式
这比简单工厂模式更符合设计规则，对修改关闭，扩展开放。
class Plant {
constructor(name) {
this.name = name;
}
grow() {
console.log('gorw~~~~~~')
}
}
class Apple extends Plant {
constructor(name) {
super(name);
this.content = '做苹果的步骤。。。削皮';
this.taste = '甜';
}
}
class Orange extends Plant {
constructor(name) {
super(name);
this.content = '做橘子的步骤.... 剥皮';
this.taste = '酸';
}
}
class ApplyFactory {
create() {
return new Apple('苹果');
}
}
class OrangeFactory {
create() {
return new Orange('橘子');
}
}
const setting = {
'apple': ApplyFactory,
'orange': OrangeFactory
}
let apple = new setting['apple']().create();
let orange = new setting['orange']().create();
// 执行结果
Apple { name: '苹果', content: '做苹果的步骤。。。削皮', taste: '甜' }
Orange { name: '橘子', content: '做橘子的步骤.... 剥皮', taste: '酸' }
抽象工厂模式
现在工厂不用负责所以产品的创建，将具体的生成产品交给子类来做。
class Button {
render() {
}
}
class AppleButton {
render() {
console.log('苹果按钮')
}
}
class WindowButton {
render() {
console.log('Windows按钮')
}
}
class Icon {
render() {
}
}
class AppleIcon {
render() {
console.log('苹果图标');
}
}
class WindowIcon {
render() {
console.log('Windows图标');
}
}
class Factory {
createButton() { }
}
class AppleFactory {
createButton() {
return new AppleButton();
}
createIcon() {
return new AppleIcon();
}
}
class WindowsFactory {
createButton() {
return new WindowButton();
}
createIcon() {
return new WindowIcon();
}
}
const setting = {
'apple': AppleFactory,
'windows': WindowsFactory
}
let appleFactory = new setting['apple']();
appleFactory.createButton().render();
appleFactory.createIcon().render();
let windowFactory = new setting['windows']();
windowFactory.createButton().render();
windowFactory.createIcon().render();
// 执行结果
苹果按钮
苹果图标
Windows按钮
Windows图标
