快捷導(dǎo)航

javascript設(shè)計模式之享元模式

更新時間：2022年01月15日 16:53:43 作者：石頭山_S

這篇文章主要為大家介紹了javascript享元模式，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

一. 認識享元模式

享元模式：是一種用于性能優(yōu)化的模式，其核心是運用共享技術(shù)來有效支持大量細粒度的對象。

通俗點來講就是找出事物很多屬性種屬性分類最少的一種，利用屬性值的個數(shù)來分類。比如說有這么一個例子，假如一個工廠需要 20 個男性模特和 20 個女性模特需要穿上 40 件新款衣服拍照做宣傳，如果我們不使用享元模式，則需要聘請 40 位模特，這會造成巨大的經(jīng)濟損失，也沒有必要，如果使用享元模式通過性別來區(qū)分，則只需要一男一女兩個模特。下面我們來看代碼實現(xiàn)。

二. 代碼具體實現(xiàn)

1. 不使用享元模式實現(xiàn)上述案例

分析：這是正常的代碼實現(xiàn)，我們一共創(chuàng)建了 40 個對象，我們?nèi)粘＞帉懘a可能不會注意這種情況，但是在實際開發(fā)中如果遇到創(chuàng)建幾萬個甚至幾十萬個對象，就會造成嚴重的性能損耗，浪費內(nèi)存。

        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 < 20 ; i++){
            new Model('男',  'underwear' + i).takePhoto();
        }
        for(let i = 0; i < 20 ; i++){
            new Model('女',  'underwear' + i).takePhoto();
        }

2. 使用享元模式重構(gòu)上述代碼

分析：代碼重構(gòu)后，我們只創(chuàng)建了兩個對象便完成了同樣的任務(wù)，無論需要多少對象，但是我們只需要創(chuàng)建兩個對象，大大提高了性能。

        let ModelR = function( sex ) {
            this.sex = sex;
        }
        let ModelF = new ModelR( '女' );
        let ModelM = new ModelR('男');
        ModelR.prototype.takePhoto = function () {
            console.log('sex=' + this.sex + '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();
        }

總體分析：

現(xiàn)在我們對享元模式有了一個大致的了解，思想其實很簡單，利用所有對象相同的屬性來初始化創(chuàng)建對象，上述例子中利用人的性別這個屬性來創(chuàng)建對象，而性別這個屬性只有男女這兩種，因此我們只需要創(chuàng)建兩個對象，將衣服作為其他不同的屬性添加到對象中便完成了對象的替換，相當于擁有 40 個不同的對象，但是實際只創(chuàng)建了兩個。

因此，我們就引出了一個新的概念，內(nèi)部狀態(tài)與外部狀態(tài)。

3. 享元模式的狀態(tài)

內(nèi)部狀態(tài)：也就是我們上文提到的屬性分類最少的一種，也就是性別，只有兩種，可以被對象共享。
外部狀態(tài)：其他屬性，不能被共享。

結(jié)論：剝離了外部狀態(tài)的對象成為了共享對象，外部對象在必要時被傳入共享對象來組裝成一個完整的對象，組裝外部對象需要花費一定的時間，但節(jié)省了大量內(nèi)存損耗，因此，享元模式是一種時間換空間的優(yōu)化模式。

三. 享元模式實際應(yīng)用

假如我們需用對文件上傳，現(xiàn)在假設(shè)有兩種上傳方式 flash 和 plugin，每一次上傳都對應(yīng)一次 js 對象的創(chuàng)建，如果我們按部就班，當大量文件上傳時就會造成瀏覽器假死狀態(tài)，因此我們用享元模式來設(shè)計代碼，首先我們來確定文件的內(nèi)部狀態(tài)和外部狀態(tài)，我們思考下文件有什么屬性，文件大小，文件類型，文件上傳方式，文件大小和文件類型都是不可控屬性，文件上傳方式只有兩種，因此將文件上傳方式作為外部狀態(tài)，現(xiàn)在我們來編寫代碼。

        let 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);
            }
        }
        // 使用工廠模式來創(chuàng)建對象
        let UploadFactory = function() {
            let cache = {};
            return {
                create(uploadType) {
                    if(cache[uploadType]){
                        return cache[uploadType];
                    }
                    return cache[uploadType] = new Upload( uploadType );
                }
            }
        }()
        // 創(chuàng)建一個管理器封裝外部狀態(tài)
        let uploadManager = function() {
            uploadDatabase = {};
            return {
                add(id, uploadType, fileName, fileSize){
                    let uploadObj = UploadFactory.create( uploadType );
                    let dom = document.createElement('div');
                    dom.innerHTML = `<span>文件名稱： ${ fileName },文件大?。?{fileSize}</span> <button id="del">刪除</button>`;
                    dom.querySelector('#del').onclick = function() {
                        uploadObj.delFile( id );
                    }
                    document.body.appendChild( dom );
                    uploadDatabase[ id ] = {
                        fileName,
                        fileSize,
                        dom
                    }
                    return uploadObj;
                },
                setExternalState(id, uploadObj){
                    let uploadData = uploadDatabase[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
            }
        ])

擴展：再談內(nèi)部狀態(tài)和外部狀態(tài)

現(xiàn)在我們思考下，如果沒有內(nèi)部狀態(tài)或者沒有外部狀態(tài)那有該怎么辦。

沒有內(nèi)部狀態(tài)享元：此時，所有屬性作為外部享元，相當于內(nèi)部享元只有一種空，因此我們只需要創(chuàng)建一個對象，此時便相當于之前所提單的單例模式。
沒有外部狀態(tài)享元：這時引入一個新的概念，對象池。

四. 對象池

對象池的應(yīng)用十分廣泛，數(shù)據(jù)庫的連接池就是其重要用武之地。對象池的大多數(shù)使用場景就是 DOM 操作，因為 DOM 的創(chuàng)建和刪除是 js 種最消耗性能的操作。

理解對象池非常簡單，比如說我們想做一個圓形的月餅，只需要制造一個圓形的模具便可以做無數(shù)的圓形月餅，當我們想做方形月餅時，只需要制造一個方形模具，同時將圓形模具保留下來，等再次使用時拿出來直接用便可。對象池就是這樣的原理，我們看一下其通用實現(xiàn)代碼。

       let objectPoolFactory = 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);
                }
            }
        }

實際應(yīng)用

我們在地圖上搜索幾個不同的位置，第一次搜索顯示北京的兩個景區(qū)位置，第二次搜索北京三個飯店的位置。

分析：第一次需要兩個 DOM 節(jié)點，因此創(chuàng)建兩個節(jié)點，之后將其回收，第二次需要三個DOM節(jié)點，使用之前的兩個，只需要再創(chuàng)建一個新的節(jié)點便可，大大提高了代碼性能。

        // 創(chuàng)建 dom 節(jié)點
        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];
        }