本文由我们团队肖建朋总结

最近开发由于项目越来越大，发现项目中需要优化的地方越来越多，就抽空看看了享元模式。

享元模式（flyweight）是一种用于性能优化的模式，“fly”在这里指苍蝇的意思，意为蝇量级。享元模式的核心是运用共享技术来有效支持大量细粒度的对象。

初识享元模式

看概念可能会有些懵逼，那么我看先来看个例子：有个服装厂，生产了男女服装各50种款式，为了推销需要找模特来拍照，正常可能会找男女模特各50个，每人穿一种拍一组照片。这时用程序实现就会这样写：

var Model = function(sex, clothes) {
    this.sex = sex
    this.clothes = clothes
    this.takePhoto = function() {
        console.log( 'sex= ' + this.sex + ' clothes=' + this.clothes);
    }
}
let iM = 1
while(iM <= 50){
    var model = new Model('男', 'clothes' + iM)
    model.takePhoto()
    iM++
}
let iF = 1
while(iF <= 50){
    var model = new Model('女', 'clothes' + iF)
    model.takePhoto()
    iF++
}

以上代码可以看出需要创建100个model对象，随着衣服种类的增多，就需要创建更多的对象，当对象多到一定数量程序必然会崩溃。

下面我们就用享元模式来优化一下这段代码，首先我们可以发现一个男模特是可以穿50种男式衣服的任意一件的。同样女模特可以穿50种女式衣服任意一件。所以对于服装厂来说只需要找一个男模特和一个女模特就可以了。

改造后的代码如下：

var Model = function(sex) {
    this.sex = sex
    this.takePhoto = function() {
        console.log( 'sex= ' + this.sex + ' clothes=' + this.clothes);
    }
}
var mModel = new Model('男')
var fModel = new Model('女')
var i = 1
while(i <= 50) {
    mModel.clothes = ' clothes=男式衣服=' + i
    mModel.takePhoto()
    fModel.clothes = ' clothes=女式衣服=' + i
    fModel.takePhoto()
    i++
}

这里我们只创建一个男模特对象和一个女模特对象，然后让他们一次试穿拍照男女的50套衣服，代码是不是清爽了许多，而且空间复杂对也降低了。

享元模式的内部状态和外部状态

享元模式要求将对象的属性划分为内部状态与外部状态(这里的状态通常指属性)。享元模式的目标是尽量减少共享对象的数量。

划分内部状态和外部状态的可以从以下几点来区分：

内部状态存储于对象的内部。
内部状态可以被一些对象共享。
内部状态独立于具体的场景，通常不会改变。
外部状态取决于具体的场景，并根据场景而变化，外部状态不能被共享。

根据上面几点我们可以看出上一个例子中，sex就是Model的内部状态，clothes就是它的外部状态

由于组装外部状态成为一个完整对象的过程需要花费一定的时间，但是可以大大减少系统中的对象数量，因此享元模式是一种用时间换空间的优化模式。

享元模式的通用结构

上面衣服和模特的例子，初步展示了享元模式的威力，但这并不是一个完整的享元模式，因为存在以下问题：

模特对象在其他场景中可能并不需要一开始就创建所有共享对象。
外部状态在其他场景中可能会非常复杂，这样他们与共享对象的联系就会变得很困难。

解决了这两个问题，就可以得出享元模式的通用结构：

工厂模式创建共享对象，当共享对象被真正需要时，它才从工厂中被创建出来。
管理器记录外部状态，使用一个管理器来记录对象相关的外部状态，使这些外部状态通过某个钩子和共享对象联系起来。

基于上面总结的享元模式通用结构，我们来实现一个完整的享元模式例子:文件上传

文件上传

// 构造Upload 对象，包含内部状态 uploadType 和一个delFile方法
var Upload = function( uploadType){
    this.uploadType = uploadType;

    this.delFile = function(id) {
        uploadManager.setExternalState( id, this ); // (1)
        if ( this.fileSize < 3000 ){
            return this.dom.parentNode.removeChild( this.dom );
        } 
        if ( window.confirm( '确定要删除该文件吗? ' + this.fileName ) ){
            return this.dom.parentNode.removeChild( this.dom );
        }
    }
}
// 构造上传工厂来创建upload对象
var UploadFactory = (function () {
    var createdFlyWeightObjs = {};
    return {
        create: function (uploadType) {
            if (createdFlyWeightObjs[uploadType]) {
                return createdFlyWeightObjs[uploadType];
            }
            return createdFlyWeightObjs[uploadType] = new Upload(uploadType);
        }
    }
})();
// 上传管理器，负责向UploadFactory提交对象创建申请，并保存所有upload对象的外部状态到uploadDatabase对象中，
var uploadManager = (function(){
    var uploadDatabase = {};
    return {
        add: function (id, uploadType, fileName, fileSize) {
            var flyWeightObj = UploadFactory.create(uploadType);
            var dom = document.createElement('div');
            dom.innerHTML =
                '<span>文件名称:' + fileName + ', 文件大小: ' + fileSize + '</span>' +
                '<button class="delFile">删除</button>';
            dom.querySelector('.delFile').onclick = function () {
                flyWeightObj.delFile(id);
            }
            document.body.appendChild(dom);
            uploadDatabase[id] = {
                fileName: fileName,
                fileSize: fileSize,
                dom: dom
            };
            return flyWeightObj;
        },
        setExternalState: function (id, flyWeightObj) {
            var uploadData = uploadDatabase[id];
            for (var i in uploadData) {
                flyWeightObj[i] = uploadData[i];
            }
        }
    }
})();
var id = 0;
// startUpload上传函数，调用uploadManager
window.startUpload = function (uploadType, files) {
    for (var i = 0, file; file = files[i++];) {
        var uploadObj = uploadManager.add(++id, uploadType, file.fileName, file.fileSize);
    }
};
// 上传测试数据
startUpload('plugin', [
    {
        fileName: '1.txt',
        fileSize: 1000
    },
    {
        fileName: '2.html',
        fileSize: 3000
    },
    {
        fileName: '3.txt',
        fileSize: 5000
    }
]);

startUpload('flash', [
    {
        fileName: '4.txt',
        fileSize: 1000
    },
    {
        fileName: '5.html',
        fileSize: 3000
    },
    {
        fileName: '6.txt',
        fileSize: 5000
    }
]);

享元模式的使用场景

一个程序中使用了大量的相似对象。
由于使用了大量对象，造成内存开销过大。
对象的大多数状态都可以变为外部状态。
剥离出对象的外部状态后，可以用较少的共享对象取代大量对象。

总结

享元模式是一种为了解决性能问题而生的模式，在一个存在大量相似对象的系统中，享元模式可以很好的解决大量对象带来的性能问题。