《JavaScript设计模式与开发实践》读书笔记之享元模式

1. 享元模式

享元模式是一种用于性能优化的模式，享元模式的核心是运用共享技术来有效支持大量细粒度的对象

1.1 传统的文件上传方法

以文件上传为例，文件上传功能可以选择依照队列，一个一个的排队上传，也支持同时选择2000个文件。
假如每一个文件都对应着一个JavaScript上传对象的创建，2000个文件就会同时创建2000个upload对象
假设这里的文件上传支持插件和flash两种

var id=0;
window.startUpload=function(uploadType,files){//uploadType区分是控件还是flash
    for(var i=0,file;file=files[i++];){
        var uploadObj=new Upload(uploadType,file.fileName,file.fileSize);
        uploadObj.init(id++);//给upload对象设置一个唯一的id
    }
};

var Upload=function(uploadType,fileName,fileSize){
    this.uploadType=uploadType;
    this.fileName=fileName;
    this.fileSize=fileSize;
    this.dom=null;
};

Upload.prototype.init=function(id){
    var that=this;
    this.id=id;
    this.dom=document.createElement('div');
    this.dom.innerHTML=
                '<span>文件名称：'+this.fileName+',文件大小：'+this.fileSize+'</span>'
                +'<button class="delFile">删除</button>';
    this.dom.querySelector('.delFile').onclick=function(){
        that.delFile();
    };
    document.body.appendChild(this.dom);
};

Upload.prototype.delFile=function(){
    return this.dom.parentNode.removeChild(this.dom);
};

接下来分别创建3个插件上传对象和3个flash上传对象

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
    }
]);

这里一共有6个需要上传的文件，一共创建了6个upload对象

1.2 享元模式重构文件上传

划分内部状态和外部状态的关键主要有以下几点

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

首先，需要确认插件类型uploadType是内部状态
upload对象必须依赖uploadType属性才能工作，因为插件上传、flash上传各自调用的接口是完全不一样的
fileName和fileSize是根据场景而变化，每个文件的fileName和fileSize都不一样，fileName和fileSize没有办法被共享，它们是外部状态

剥离外部状态

var Upload=function(uploadType){
    this.uploadType=uploadType;
};

Upload.prototype.init函数不再需要，upload对象初始化工作被放在后面定义的uploadManager.add函数里面
接下来只需要定义Upload.prototype.delFile函数

Upload.prototype.delFile=function(id){
    uploadManager.setExternalState(id,this);
    return this.dom.parentNode.removeChild(this.dom);
};

工厂进行对象实例化

var UploadFactory=(function(){
    var createdFlyWeightObjs={};
    return {
        create:function(uploadType){
            if(createdFlyWeightObjs[uploadType]){
                return createdFlyWeightObjs[uploadType];
            }
            return createdFlyWeightObjs[uploadType]=new Upload(uploadType);
        }
    }
})();

管理器封装外部状态
完善前面提到的uploadManager对象，它负责向UploadFactory提交创建对象的请求
并用uploadDatabase对象保存所有的upload对象的外部状态

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>文件名称：'+this.fileName+',文件大小：'+this.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];
            }
        }
    }
})();

触发上传动作的startUpload函数

var id=0;
window.startUpload=function(uploadType,files){
    for(var i=0,file;file=files[i++];){
        var uploadObj=uploadManager.add(++id,uploadType,file.fileName,file.fileSize);
    }
};

接下来分别创建3个插件上传对象和3个flash上传对象

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
    }
]);

这里一共有6个需要上传的文件，一共创建了2个upload对象
一个是插件类型的upload对象，一个是flash类型的upload对象

1.3 对象池技术

对象池也是一种共享相关的技术，对象池维护一个装载空闲对象的池子，如果需要对象的时候，不是直接new，而是转从对象池获取
如果此时对象池里没有空闲对象，则创建一个新的对象

通用对象池实现

var objectPoolFactory=function(createObjFn){
    var objectPool=[];
    return {
        create:function(){
            var obj=objectPool.length === 0 ?
                    createObjFn.apply(this,arguments):objectPool.shift();
            return obj;
        },
        recover:function(obj){
            objectPool.push(obj);
        }
    }
};

利用objectPoolFactory创建一个装载iframe的对象池

var iframeFactory=objectPoolFactory(function(){
    var iframe=document.createElement('iframe');
    document.body.appendChild(iframe);
    iframe.onload=function(){
        iframe.onload=null;
        iframeFactory.recover(iframe);//加载完成后，回收节点
    }
    return iframe;
});

setTimeout(function(){
    var iframe=iframeFactory.create();
    iframe.src='http://www.qq.com';
},1000);

这里每隔1秒通过工厂方法创建一个iframe，但是采用上述对象池，始终只会生产一个iframe对象