快捷導(dǎo)航

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

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

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

一. 認(rèn)識(shí)享元模式

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

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

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

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

分析：這是正常的代碼實(shí)現(xiàn)，我們一共創(chuàng)建了 40 個(gè)對(duì)象，我們?nèi)粘＞帉懘a可能不會(huì)注意這種情況，但是在實(shí)際開發(fā)中如果遇到創(chuàng)建幾萬個(gè)甚至幾十萬個(gè)對(duì)象，就會(huì)造成嚴(yán)重的性能損耗，浪費(fèi)內(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)建了兩個(gè)對(duì)象便完成了同樣的任務(wù)，無論需要多少對(duì)象，但是我們只需要?jiǎng)?chuàng)建兩個(gè)對(duì)象，大大提高了性能。

        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)在我們對(duì)享元模式有了一個(gè)大致的了解，思想其實(shí)很簡單，利用所有對(duì)象相同的屬性來初始化創(chuàng)建對(duì)象，上述例子中利用人的性別這個(gè)屬性來創(chuàng)建對(duì)象，而性別這個(gè)屬性只有男女這兩種，因此我們只需要?jiǎng)?chuàng)建兩個(gè)對(duì)象，將衣服作為其他不同的屬性添加到對(duì)象中便完成了對(duì)象的替換，相當(dāng)于擁有 40 個(gè)不同的對(duì)象，但是實(shí)際只創(chuàng)建了兩個(gè)。

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

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

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

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

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

假如我們需用對(duì)文件上傳，現(xiàn)在假設(shè)有兩種上傳方式 flash 和 plugin，每一次上傳都對(duì)應(yīng)一次 js 對(duì)象的創(chuàng)建，如果我們按部就班，當(dāng)大量文件上傳時(shí)就會(huì)造成瀏覽器假死狀態(tài)，因此我們用享元模式來設(shè)計(jì)代碼，首先我們來確定文件的內(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)建對(duì)象
        let UploadFactory = function() {
            let cache = {};
            return {
                create(uploadType) {
                    if(cache[uploadType]){
                        return cache[uploadType];
                    }
                    return cache[uploadType] = new Upload( uploadType );
                }
            }
        }()
        // 創(chuàng)建一個(gè)管理器封裝外部狀態(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);
                // 進(jìn)行上傳
            }
        };
        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
            }
        ])

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

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

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

四. 對(duì)象池

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

理解對(duì)象池非常簡單，比如說我們想做一個(gè)圓形的月餅，只需要制造一個(gè)圓形的模具便可以做無數(shù)的圓形月餅，當(dāng)我們想做方形月餅時(shí)，只需要制造一個(gè)方形模具，同時(shí)將圓形模具保留下來，等再次使用時(shí)拿出來直接用便可。對(duì)象池就是這樣的原理，我們看一下其通用實(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);
                }
            }
        }

實(shí)際應(yīng)用

我們?cè)诘貓D上搜索幾個(gè)不同的位置，第一次搜索顯示北京的兩個(gè)景區(qū)位置，第二次搜索北京三個(gè)飯店的位置。

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

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