前言

Js有一个设计模式的概念，可以这样说，任何一门语言都有设计模式，我们可以理解为你写代码的方式，你为什么这样去写代码而不那样去写代码，以这种手段去写代码而不用那种手段去写代码；其实是你潜意识里面有一种设计，就比如你为什么用构造函数去创建一个对象而不直接创造一个对象，你所考虑的思想就是一种设计。

设计模式

是什么？

前言中用通俗的话简单描述了一下，用官方一点的话：

设计模式是解决软件开发某些特定问题而提出的一些解决方案也可以理解成解决问题的一些思路；设计模式总结的是经验之谈，是前人的经验，提供给我们使用借鉴。

为什么要使用设计模式？

1. 提高我们的思维能力，编程能力和设计能力。
2. 使程序设计更加标准化、代码编制更加工程化，使软件开发效率大大提高，从而缩短软件的开发周期。
3. 使设计的代码可重用性高、可读性强、可靠性高、灵活性好、可维护性强。

单例模式

是什么？

用一句话概括为：一个类只有一个实例。

代码

class Single {
    show() {
        console.log('我是一个单例对象');
    }
}
//利用闭包判断类Single是否被new,被new后就返回实例
Single.getInstance = (function () {
    let instance = null
    return function () {
        if (!instance) {
            instance = new Single()
        }
        return instance
    }
})()

const s1 = Single.getInstance()
const s2 = Single.getInstance()

console.log(s1 === s2);//true

应用场景

比如页面弹出框，我们只要点击一下就有一个弹出框，点击多下还是这个弹出框，不会新建一个弹出框，这就应用了单例模式，实现代码如下所示：

 const Model = (function () {
            let model = null
            return function () {
                if (!model) {
                    model = document.createElement('div')
                    model.innerHTML = '我是弹出框'
                    model.id = 'model'
                    model.style.display = 'none'
                    document.body.appendChild(model)
                }
                return model
            }
        })()

        document.getElementById('open').addEventListener('click', () => {
            const model = Model()
            model.style.display = 'block'
        })

        document.getElementById('close').addEventListener('click', () => {
            const model = Model()
            model.style.display = 'none'
        })

当这个弹出框实现之后，页面中有弹出框就可以使用这个，大大提高了开发效率，实现了代码的可重用性。

工厂模式

是什么？

工厂模式属于创建型的设计模式，将创建实例推迟到子类中进行。工厂模式分为简单工厂模式和抽象工厂模式：简单工厂模式又叫静态工厂方法，用来创建某一种产品对象的实例，用来创建单一对象，将创建对象的过程单独封装，简化了批量化操作的流程；抽象工厂模式是对类的工厂抽象用来创建产品类簇，不负责创建某一类产品的实例，它声明最终目标产品的共性，遵从开放封闭原则。

优点

创建对象过程可能很复杂，但我们只需要关心创建结果。

代码

简单工厂模式

我们拿公司里面的工种作为例子，找出工种之间的相似点，用构造函数创建实例对象，再找到不同点另外写；最后想要实例对象new出来就行。

function User(name, age, career, work) {
    this.name = name
    this.age = age
    this.career = career
    this.work = work
}

function Fatroty(name, age, career) {
    let work;
    switch (career) {
        case 'coder':
            work = ['写代码', '改bug', '跟产品经理吵架']
            break
        case 'product manager':
            work = ['订会议室', '写PRD', '催更']
            break
        case 'boss':
            work = ['喝茶', '看报', '见客户']
            break
        // ...
    }
    return new User(name, age, career, work)
}

抽象工厂模式

以生产手机为例，看下面代码：

//抽象工厂
class MobilePhoneFactory {
    //专门创建系统
    createOS() {

    }
    //硬件
    createHardWare() {

    }

}
//创建一款菠萝牌手机继承创建手机必有的方法
class PiniaFactory extends MobilePhoneFactory {
    createOS() {
        //希望有专门提供安装系统
        return new AndroidOS()
    }
    createHardWare() {
        //希望有专门提供高通硬件
        return new QualcommHardWare()
    }
}

// ----------------------------------------
//创建一个系统可以操作硬件的类
class OS {
    controlHardWare() {
        throw new Error('抽象方法')
    }
}
//安卓系统继承系统操作硬件
class AndroidOS extends OS {
    controlHardWare() {
        console.log('我会以安卓的方式来操作硬件');
    }
}
//苹果系统继承系统操作硬件
class AppleOS extends OS {
    controlHardWare() {
        console.log('我会以苹果的方式来操作硬件');
    }
}

// ----------------------------------------
//创建一个硬件可以被指令操作的类
class HardWare {
    operateByOrder() {
        throw new Error('抽象方法')
    }
}
//硬件继承被高通运行
class QualcommHardWare extends HardWare {
    operateByOrder() {
        console.log('我会用高通的方式去运行');
    }
}
//硬件继承被小米运行
class MiHardWare extends HardWare {
    operateByOrder() {
        console.log('我会用小米的方式去运行');
    }
}



//生产一台手机
const myPhone = new PiniaFactory()
const myOS = myPhone.createOS()
const myHardWare = myPhone.createHardWare()
myOS.controlHardWare()
myHardWare.operateByOrder()


//想生产一种新的手机时，直接使用这个工厂，换个手机继续卖
class OrangeFactory extends MobilePhoneFactory {
    createOS() {

    }
    createHardWare() {

    }
}

小结

所有的设计模式都来自我们的生活中，毕竟编程源于生活；生活中的场景造就了我们用代码去解决问题。Js中的设计模式不只这两种，我们有机会下次来聊，希望到时不见不散。