javascript享元模式和对象池技术

来源：互联网发布：linux 原生镜像编辑：程序博客网时间：2024/05/29 17:18

javascript享元模式

享元模式：运用共享技术来有效支持大量细粒度的对象
内部状态:被一些对象共享，独立于具体场景，通常不变
外部状态:取决于具体的场景，并根据场景而变化

文件上传的假设例子

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) {    this.uploadType = uploadType;};Upload.prototype.delFile = function (id) {    uploadManager.setExternalState(id, this);    if (this.fileSize < 3000){        return this.dom.parentNode.removeChild(this.dom);    }    if (window.confirm('确定要删除文件?'+this.fileName)){        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);        }    }})();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;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    }]);

除去功能性的代码，实际上以上逻辑很简单，uploadFactory用来创建上传对象，并对不同的对象做缓存，每次上传修改的仅仅是文件的属性，对不同的文件仅仅是调用上传对象，文件的属性都只是文件自身的属性即外部状态，跟上传对像无关，所以直接存放到uploadmanager中

对象池

对象池技术和享元模式思想不同，但是目的相同，高效利用对象

var toolTipFactory = (function () {    var toolTipPool = [];       //存放已经创建的对象    return{        create: function () {            if(toolTipPool.length == 0){           //如果对象池为空,需要创建新的对象                var div = document.createElement('div'); //创建节点                document.body.appendChild(div);                return div;            } else {                            //对象池不为空，直接获取                return toolTipPool.shift();            }        },        recover: function (tooltipDom) {              //对象的回收            return toolTipPool.push(tooltipDom);        }    }})();//第一次使用创建两个var ary = [];for (var i = 0, str; str = ['A', 'B'][i++];){    var toolTip = toolTipFactory.create();    toolTip.innerHTML = str;    ary.push(toolTip);};//回收对象for(var i = 0, toolTip; toolTip = ary[i++];){    toolTipFactory.recover(toolTip);};//创建新的对象for (var i = 0, str; str = ['A', 'B', 'C', 'D', 'E', 'D'][i++];){    var toolTip = toolTipFactory.create();    toolTip.innerHTML = str;}

0 0