91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

javascript設計模式的享元模式怎么實現

發布時間:2022-01-17 09:02:30 來源:億速云 閱讀:147 作者:iii 欄目:開發技術

這篇文章主要介紹“javascript設計模式的享元模式怎么實現”的相關知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“javascript設計模式的享元模式怎么實現”文章能幫助大家解決問題。

    一. 認識享元模式

    享元模式:是一種用于性能優化的模式,其核心是運用共享技術來有效支持大量細粒度的對象。

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

    二. 代碼具體實現

    1. 不使用享元模式實現上述案例

    分析:這是正常的代碼實現,我們一共創建了 40 個對象,我們日常編寫代碼可能不會注意這種情況,但是在實際開發中如果遇到創建幾萬個甚至幾十萬個對象,就會造成嚴重的性能損耗,浪費內存。

            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. 使用享元模式重構上述代碼

    分析:代碼重構后,我們只創建了兩個對象便完成了同樣的任務,無論需要多少對象,但是我們只需要創建兩個對象,大大提高了性能。

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

    總體分析

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

    因此,我們就引出了一個新的概念,內部狀態與外部狀態。

    3. 享元模式的狀態

    • 內部狀態:也就是我們上文提到的屬性分類最少的一種,也就是性別,只有兩種,可以被對象共享。

    • 外部狀態:其他屬性,不能被共享。

    結論:剝離了外部狀態的對象成為了共享對象,外部對象在必要時被傳入共享對象來組裝成一個完整的對象,組裝外部對象需要花費一定的時間,但節省了大量內存損耗,因此,享元模式是一種時間換空間的優化模式。

    三. 享元模式實際應用

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

            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);
                }
            }
            // 使用工廠模式來創建對象
            let UploadFactory = function() {
                let cache = {};
                return {
                    create(uploadType) {
                        if(cache[uploadType]){
                            return cache[uploadType];
                        }
                        return cache[uploadType] = new Upload( uploadType );
                    }
                }
            }()
            // 創建一個管理器封裝外部狀態
            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
                }
            ])

    擴展:再談內部狀態和外部狀態

    現在我們思考下,如果沒有內部狀態或者沒有外部狀態那有該怎么辦。

    • 沒有內部狀態享元:此時,所有屬性作為外部享元,相當于內部享元只有一種,因此我們只需要創建一個對象,此時便相當于之前所提單的單例模式

    • 沒有外部狀態享元:這時引入一個新的概念,對象池

    四. 對象池

    對象池的應用十分廣泛,數據庫的連接池就是其重要用武之地。對象池的大多數使用場景就是 DOM 操作,因為 DOM 的創建和刪除是 js 種最消耗性能的操作。

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

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

    實際應用

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

    分析:第一次需要兩個 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];
            }

    關于“javascript設計模式的享元模式怎么實現”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識,可以關注億速云行業資訊頻道,小編每天都會為大家更新不同的知識點。

    向AI問一下細節

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    AI

    伊川县| 长岭县| 车险| 宁安市| 秦安县| 河间市| 阳新县| 民县| 永宁县| 山西省| 美姑县| 玉林市| 永修县| 溧阳市| 英德市| 宝应县| 江陵县| 曲麻莱县| 锡林郭勒盟| 咸丰县| 涟水县| 枝江市| 新邵县| 思南县| 略阳县| 海晏县| 崇文区| 吴忠市| 嘉峪关市| 格尔木市| 尖扎县| 四会市| 沈丘县| 鄢陵县| 乌兰察布市| 枞阳县| 界首市| 青铜峡市| 宁陕县| 灵山县| 临城县|