javascript设计模式之享元模式

更新时间:2023-04-04 15:24:18 阅读：评论：0

一. 认识享元模式

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

通俗点来讲就是找出事物很多属性种属性分类最少的一种，利用属性值的个数来分类。比如说有这么一个例子，假如一个工厂需要 20 个男性模特和 20 个女性模特需要穿上 40 件新款衣服拍照做宣传，如果我们不使用享元模式，则需要聘请 40 位模特，这会造成巨大的经济损失，也没有必要，如果使用享元模式通过性别来区分，则只需要一男一女两个模特。下面我们来看代码实现。

二. 代码具体实现

1. 不使用享元模式实现上述案例

分析：这是正常的代码实现，我们一共创建了40个对象，我们日常编写代码可能不会注意这种情况，但是在实际开发中如果遇到创建几万个甚至几十万个对象，就会造成严重的性能损耗，浪费内存。

        let model = function(x, underwear) {            this.x = x;            this.underwear = underwear;        }        model.prototype.takephoto = function () {            console.log('x=' + this.x + 'underwear = ' + this.underwear);   正切函数定义域     }        for(let i = 0; i < 20 ; i++){            new model('男',  'underwear' + i).takephoto();        }        for(let i = 0; i < 20 ; i++){            new model('女',  'underwear' + i).takephoto();        }

2. 使用享元模式重构上述代码

分析：代码重构后，我们只创建了两个对象便完成了同样的任务，无论需要多少对象，但是我们只需要创建两个对象，大大提高了性能。

        let modelr = function( x ) {            this.x = x;        }        let modelf = new modelr( '女' );        let modelm = new modelr('男');        modelr.prototype.takephoto = function () {            console.log('x=' + this.x + 'underwear = ' + this.underwear);        }        for(let i = 0; i < 20 ; i++) {            modelf.underwear = 'underwear' + i;            modelf.takephoto();        }        for(let i = 0; i < 20 ; i++) {            modelm.underwear = 'underwear' + i;            modelm.takephoto();        }

总体分析：

现在我们对享元模式有了一个大致的了解，思想其实很简单，利用所有对象相同的属性来初始化创建对象，上述例子中利用人的性别这个属性来创建对象，而性别这个属性只有男女这两种，因此我们只需要创建两个对象，将衣服作为其他不同的属性添加到对象中便完成了对象的替换，相当于拥有 40 个不同的对象，但是实际只创建了两个。

因此，我们就引出了一个新的概念，内部状态与外部状态。

3. 享元模式的状态

内部状态：也就是我们上文提到的属性分类最少的一种，也就是性别，只有两种，可以被对象共享。外部状态：其他属性，不能被共享。

结论：剥离了外部状态的对象成为了共享对象，外部对象在必要时被传入共享对象来组装成一个完整的对象，组装外部对象需要花费一定的时间，但节省了大量内存损耗，因此，享元模式是一种时间换空间的优化模式。

三. 享元模式实际应用

假如我们需用对文件上传，现在假设有两种上传方式flash和开学第一课有感plugin，每一次上传都对应一次js对象的创建，如果我们按部就班，当大量文件上传时就会造成浏览器假死状态，因此我们用享元模式来设计代码，首先我们来确定文件的内部状态和外部状态，我们思考下文件有什么属性，文件大小，文件类型，文件上传方式，文件大小和文件类型都是不可控属性，文件上传方式只有两种，因此将文件上传方式作为外部状态，现在我们来编写代码。

        let upload = function(uploadtype) {            this.uploadtype = uploadtype;        }        upload.prototype.delfile = function( id ) {            uploadmanager.texternalstate(id, this);            if(this.filesize < 3000) {                return this.dom.parentnode.removechild(this.dom);            }        }        // 使用工厂模式来创建对象        let uploadfactory = function() {            let cache = {};            return {                create(uploadtype) {                    if(cache[uploadtype]){                        return cache[uploadtype];                    }                    return cache[uploadtype] = new upload( uploadtype );                }            }        }()        // 创建一个管理器封装外部状态        let uploadmanager = function() {            uploaddataba = {};            return {                add(id, uploadtype, filename, filesize){                    let uploadobj = uploadfactory.create( uploadtype );                    let dom = document.createelement('div');                    dom.innerhtml = `<span>文件名称： ${ filename },文件大小：${files克里斯蒂娜 圭密ize}</span> <button id="del">删除</button>`;                    dom.querylector('#del').onclick = function() {                        uploadobj.delfile( id );                    }                    document.body.appendchild( dom );                    uploaddataba[ id ] = {                        filename,                        filesize,                        dom                    }                    return uploadobj;                },                texternalstate(id, uploadobj){                    let uploaddata = uploaddataba[id];                    for(let i in uploaddata) {                        uploadobj[i] = uploaddata[i];                    }                }            }        }();        let id = 0;        window.startupload = function(uploadtype, files) {            for(let i = 0,file; file = files[i++];){                let uploadobj = uploadmanager.add(++id, uploadtype, file.filename, file.filesize);                // 进行上传            }        };        startupload('plugin', [            {                filename: '1.txt',                filesize: 1000            },            {                filename: '2.txt',                filesize: 1000            },            {                filename: '3.txt',                filesize: 3000            }        ])        startupload('flash', [            {                filename: '4.txt',                filesize: 1000            },            {                filename: '5.txt',                filesize: 1000            },            {                filename: '6.txt',                filesize: 3000            }        ])

扩展：再谈内部状态和外部状态

现在我们思考下，如果没有内部状态或者没有外部状态那有该怎么办。

没有内部状态享元：此时，所有属性作为外部享元，相当于内部享元只有一种空，因此我们只需要创建一个对象，此时便相当于之前所提单的单例模式。没有外部状态享元：这时引入一个新的概念，对象池。

四. 对象池

对象池的应用十分广泛，数据库的连接池就是其重要用武之地。对象池的大多数使用场景就是dom操作，因为dom的创建和删除是js种最消耗性能的操作。

理解对象池非常简单，比如说我们想做一个圆形的月饼，只需要制造一个圆形的模具便可以做无数的圆形月饼，当我们想做方形月饼时，只需要制造一个方形模具，同时将圆形模具保留下来，等再次使用时拿出来直接用便可。对象池就是这样的原理，我们看一下其通用实现代码。

       let objectpoolfacto广字旁的字有哪些ry = function( fn ) {            let pool = [];            return {                create(...args){                    let obj = (pool.length === 0)? fn.apply(this, args) : pool.shift();                    return obj;                },                recover(obj) {                    pool.push(obj);                }            }        }

实际应用

我们在地图上搜索几个不同的位置，第一次搜索显示北京的两个景区位置，第二次搜索北京三个饭店的位置。

分析：第一次需要两个 dom 节点，因此创建两个节点，之后将其回收，第二次需要三个dom节点，使用之前的两个，只需要再创建一个新的节点便可，大大提高了代码性能。

        // 创建 dom 节点        let createdomfactory = objectpoolfactory(()=>{            let div = document.createelement('div');            document.body.appendchild(div);            return div;        });        let ary = []; // 用于回收        let name = ['天安门', "长城"];        for(let i = 0, l= name.length; i < l ;i++){            let dom = createdomfactory.create();            dom.innerhtml = name[i];            ary.push(dom);        }        for(let i = 0, l = ary.length; i < l ; i ++ ){            createdomfactory.recover(ary[i]);        }        let name1 = ["饭店1", "饭店2", "饭店3"];        for(let i = 0, l = name1.length; i旅游管理专业课程 < l; i++) {            let dom = createdomfactory.create();            dom.innerhtml = name1[i];        }