前端设计模式（1）--工厂模式

时间 2019-11-08

标签前端设计模式工厂繁體版

原文原文链接

设计模式清单

没有连接的是尚未写的，计划要写的，欢迎阅读交流~
前端设计模式（0）面向对象&&设计原则
 前端设计模式（1）--工厂模式
 前端设计模式（2）--单例模式
前端设计模式（3）--适配器模式
前端设计模式（4）--装饰器模式
前端设计模式（5）--代理模式
前端设计模式（6）--外观模式&&观察者模式
前端设计模式（7）--状态和策略模式
前端设计模式（8）--原型模式
...html

写在前面

设计模式有23种，按大类归类的话能够分为三大类：建立型（如：工厂模式、单例模式、原型模式等），结构型模式（如装饰器模式、代理模式等），行为型（如：观察者模式、迭代器模式等）；今天咱们讲的是工厂模式，其分为工厂方法模式、抽象工厂模式、简单工厂模式，好的，咱们一步一步来分析。前端

简单工厂模式

来来来，咱们从简单的开始。简单工厂模式是由一个工厂对象决定建立出哪种产品类的实例类图：苹果和梨都是继承植物java

代码：jquery

class Plant {
    constructor (name) {
        this.name = name
    }
    grow () {
        console.log('我有生长的功能哦~~')
    }
}
class Apple extends Plant {
    constructor (name, color) {
        super(name)
        this.color = color
        console.log(this.color)
    }
}
class Pear extends Plant {
    constructor (name, color) {
        super(name)
        this.color = color
        console.log(this.color)
    }
}
new Apple('苹果', '红色')
new Pear('梨子', '黄色')



// 经典案例-那些年一块儿用过的jquery
class jQuery{
    constructor(selector){
        let elements = Array.from(document.querySelectorAll(selector));
        let length = elements?elements.length:0;
        for(let i=0;i<length;i++){
            this[i]=elements[i];
        }
        this.length = length;
    }
    html(){

    }
}
window.$ = function(selector){
   return new jQuery(selector);
}
复制代码

简单工厂的好处在于，咱们能够在不动以前原逻辑的基础上，继承和拓展新的功能，这样咱们就能够提升效率，以前大神写好的功能能够复用，并且能够站在巨人的肩膀上，不断拓展。固然，其实这些大家平时应该都有写过或者用过，只是如今由一个名词规范起来，是否是以为忽然高大尚了。上面代码直接new 的缺点是，耦合和依赖于具体的实现。windows

工厂方法模式

同先上个类图，需求变了须要添加个橘子：设计模式

上代码：bash

class Plant{
    constructor(name) {
        this.name=name;
    }
    grow() {
        console.log('growing~~~~~~');    
    }
}
class Apple extends Plant{
    constructor(name, color) {
        super(name);
       this.color = color
    }
}
class Orange extends Plant{
    constructor(name, color) {
        super(name);
       this.color = color
    }
}
class AppleFactory{
    create() {
        return new Apple('苹果'，'红色');
    }
}
class OrangeFactory{
    create() {
        return new Orange('桔子', '橙色');
    }
}
const settings={
    'apple': AppleFactory,
    'orange':OrangeFactory
}
let apple=new settings['apple']().create();
console.log(apple);
let orange=new settings['orange']().create();
console.log(orange);
复制代码

这样写的好处是咱们能够随意添加不一样的水果，咱们不用关心如何实现，新增同一个水果类，拿来就用，还有一个好处就是，假如AppleFactory有改动新增新的功能，可是引用的地方不少，咱们只须要新增一个AppleFactory，修改不影响老代码。上面的代码修改一下，引入相似于java接口概念app

class Plant{
    constructor(name) {
        this.name=name;
    }
    grow() {
        console.log('growing~~~~~~');    
    }
}
// 新增Factory
class Factory {
    create() { }
}
class Apple extends Plant{
    constructor(name, color) {
        super(name);
       this.color = color
    }
}
class Orange extends Plant{
    constructor(name, color) {
        super(name);
       this.color = color
    }
}
// 子类继承父类 并实现create 方法
class AppleFactory extends Factory{
    static create() {
     return new Apple('苹果'，'红色');
    }
}
class OrangeFactory extends Factory{
    static create() {
        return new Orange('桔子', '橙色');
    }
}
// 经过配置文件来解耦合
const settings={
    'apple': AppleFactory,
    'orange':OrangeFactory
}
let apple=new settings['apple']().create();
console.log(apple);
let orange=new settings['orange']().create();
console.log(orange);
复制代码

说明一下类Factory

工厂通常是接口，规定子类必须实现的方法
依赖抽象，而不依赖实现
接口只有方法定义，没有具体实现,若是一个类要实现该接口，就必须实现该接口中的全部方法

抽象工厂模式

抽象工厂模式是指当有多个抽象角色时，使用的一种工厂模式抽象工厂模式能够向客户端提供一个接口，使客户端在没必要指定产品的具体的状况下，建立多个产品族中的产品对象.函数

为了好展现咱们来举个例子：好比如今用java来写个软件要运行在不一样系统window、mac等，可是他们的icon和button是不一样的post

类图

代码

class Factory {
    // 公共的方法是有必定的关联
    createButton() {//建立按钮
    }
    createIcon() {// 建立图标
    }
}
class Icon { }
class AppleIcon {
    render() {
        console.log(`绘制苹果图标`)
    }
}
class WindowsIcon {
    render() {
        console.log(`绘制window图标`)
    }
}
class Button { }
class AppleButton {
    render() {
        console.log(`绘制苹果按钮`)
    }
}
class WindowsButton {
    render() {
        console.log(`绘制windows按钮`)
    }
}
class AppleFactory extends Factory {
    createButton() {//建立按钮
        return new AppleButton();
    }
    createIcon() {// 建立图标
        return new AppleIcon();
    }
}
class WindowsFactory extends Factory {
    createButton() {//建立按钮
        return new WindowsButton();
    }
    createIcon() {// 建立图标
        return new WindowsIcon();
    }
}
/**
 * Java是跨平台的
 * 1.画一个图标
 * 2.画一个按钮
 */
let windowsFactory = new WindowsFactory();
windowsFactory.createIcon().render();
windowsFactory.createButton().render();
//=========================================
let appleFactory = new AppleFactory();
appleFactory.createIcon().render();
appleFactory.createButton().render();
复制代码

小结

简单工厂通常就是一个函数返回产品的实例（最经常使用，使用最多）
工厂方法多了工厂类，要想建立产品，须要先建立此工厂的实例，再经过此工厂来建立产品。（少用）
在抽象工厂中，一个工厂能够建立多种产品（基本不用）看到这里了，大家的点赞是我动力~~

补充知识点-类图

用于描述系统中的对象类自己的组成和对象类之间的各类静态关系
类之间的关系：依赖、泛化(继承)、 实现、关联、聚合和组合这里主要讲类图的依赖、泛化(继承)、

依赖关系(Dependence)

只要在类中用到了对方，那么它们之间就存在依赖关系，若是没有对方，连编译都经过不了，通俗的说就是好比动物依赖于水和空气，下面为类图：由三部分组成，类的名字、类的属性、类的方法。依赖关系由虚线空心箭头表示

泛化关系(Generalization)

泛化关系实际上就是继承关系，他就是依赖关系的特例，泛化关系由实线空心箭头表示