【记录】前端工程化 - 设计模式

创建型

（1）工厂模式

应用

• jQuery的$()函数。
• Vue.component()。

class Product{
	constructor(name){
		this.name = name;
	}
	init(){
		console.log('init');
	}
	fun(){
		console.log('fun');
	}
}

class Factory{
	create(name){
		return new Product(name);
	}
}

let factory = new Factory();
let p = factory.create('p1');
p.init();
p.fun();

（2）原型模式

在继承原型的基础上添加方法。

class Person{
	constructor(name){
		this.name = name;
	}
	getName(){}
}
class Student extends Person{
	constructor(name){
		super(name);
	}
	sayHello(){}
}
let stu = new Student('x');
stu.sayHello();

（3）访问者模式

// 访问者  
class Visitor {
    constructor() {}
    visitConcreteElement(ConcreteElement) {
        ConcreteElement.operation()
    }
}
// 元素类  
class ConcreteElement{
    constructor() {
    }
    operation() {
       console.log("ConcreteElement.operation invoked");  
    }
    accept(visitor) {
        visitor.visitConcreteElement(this)
    }
}
// client
let visitor = new Visitor()
let element = new ConcreteElement()
element.accept(visitor)

结构型

行为型

（1）观察者模式
（2）发布订阅模式
（3）访问者模式

技巧型

架构型

模块化

• 将复杂的系统分解成高内聚、低耦合的模块，使系统开发变得可控、可维护、可扩展，提高模块的复用率。

（1）MVC模式
（2）MVP模式
（3）MVVM模式