JavaScript享元模式与开发实践（上）

前言

作为一个前端切图仔，少有和各类设计模式打交道。但这不影响我们学习设计模式的思维，来提升我们的代码水平。

本章通过讲解享元模式，希望能够让你对设计模式更一步的学习。

本章学习内容👇

• 认识享元模式

享元模式

什么是享元模式？

享元模式是一种用于性能优化得模式。

如何优化的呢？

享元模式核心运用共享技术来有效支持大量细粒度的对象。

在开发中，我们可能回因为创建了大量类似的对象而导致内存过高。这种情况就适合使用享元模式来解决。而在JavaScript的运用场景中(浏览器)，特别是移动端的浏览器内存不是很多，这时候就更有必要使用享元模式了。

接下来，我们通过一个案例来接触享元模式。

My first 享元模式

example: 假设有个内衣工厂，目前有50种产品分别有男款和女款俩款，为了推销产品，需要找一些模特来穿上拍广告。正常情况下需要50个男模特和女模特，让他们穿上拍照。

不使用享元模式情况下，我们用javaScript实现的话👇

code：

let Model = function (sex,underwear){
    this.sex = sex;
    this.underwear = underwear
}
​
Model.prototype.takePhoto = function (){
    console.log('sex=' + this.sex +' underwear' + this.underwear)
}
​
for(let i = 0 ; i < 50;i++){
    let maleModel = new Model('male','underwear' + i)
    maleModel.takePhoto()
}
​
for(let i = 0 ; i < 50;i++){
    let femaleModel = new Model('female','underwear' + i)
    femaleModel.takePhoto()
}

从上述代码中我们可以明显看出，由于要拍100张照片，我们就创建了100个对象；那么如果要拍1000张照片，那么我是不是就该创建1000个对象呢？

这样依次创建下去会非常的消耗我们的内存资源，那么该如何规避呢？

仔细想想，其实我们只需要用一个男模特和一个女模特，让他们每次换上不同的内衣就可以了🤔。

现在来改写下代码👇

let Model = function (sex,underwear){
    this.sex = sex;
}
​
Model.prototype.takePhoto = function (){
    console.log('sex=' + this.sex +' underwear' + this.underwear)
}
​
let maleModel = new Model('male')
​
for(let i = 0 ; i < 50;i++){
    maleModel.underwear = 'underwear'+i
    maleModel.takePhoto()
}
​
let femaleModel = new Model('female')
​
for(let i = 0 ; i < 50;i++){
    femaleModel.underwear = 'underwear'+i
    femaleModel.takePhoto()
}

通过这种改写，我们不再创建大量类似的对象，而是用一个对象，通过改写属性的形式来完成需求。

这也就完成了我们第一个享元模式🎉🎉🎉

尾声

下一章继续讲解享元模式