[TOC] >[success] # 代碼案例 * 享元模式的構成 ~~~ 'Flyweight':是抽象享元角色，為具體享元角色規定了必須實現的方法。 'ConcreteFlyweight':是具體享元角色，實現抽象享元角色定義的方法。 'FlyweightFactory':是享元工廠，負責創建和管理享元角色，它用于構造一個池容器， 同時提供從池中獲得對象的方法。 'Client':是客戶端角色：維護對所有享元對象的引用，而且還需要存儲對應的外蘊狀態。 ~~~ >[danger] ##### 書中上傳案例 ~~~ 1.書中舉了一個文件上傳的例子，作者思路是封裝一個文件上傳的類'Upload',這個類有一個 'init' 方法用來初始化上傳文件信息，生成上傳文件列表，'delFile' 方法如果文件尺寸大于3000kb 詢問是否刪除否則直接上傳 2.這整個類的參數有'uploadType' 用來記錄使用的那種上傳方式，'fileName' 記錄文件名， 'fileSize' 文件大小 3.上傳文件都存在數組中去，然后會調用'startUpload '這個 'window'全局方法用來生成上傳實例 ~~~ * 代碼的問題 ~~~ 1.隨著上傳文件越來越多整個創建的實例也會越來越多，這時候就可以用享元模式來解決 ~~~ ~~~ var id = 0 /** * @param uploadType 使用上傳對象的類型 * @param files 上傳文件數組集合 * **/ window.startUpload = function (uploadType, files) { // 將文件保存進上傳對應插件的實類中 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, fileName, fileSize) { this.uploadType = uploadType this.fileName = fileName this.fileSize = fileSize this.dom = null } // 初始化創建文件列表信息 Upload.prototype.init = function (id) { var that = this this.id = id this.dom = document.createElement('div') this.dom.innerHTML = '<span>文件名稱:'+ this.fileName +', 文件大小: '+ this.fileSize +'</span>' + '<button class="delFile">刪除</button>'; this.dom.querySelector( '.delFile' ).onclick = function(){ that.delFile(); } document.body.appendChild( this.dom ); } // 刪除小于3000KB 文件直接刪除 Upload.prototype.delFile = function(){ if ( this.fileSize < 3000 ){ return this.dom.parentNode.removeChild( this.dom ); } if ( window.confirm( '確定要刪除該文件嗎? ' + this.fileName ) ){ return this.dom.parentNode.removeChild( this.dom ); } }; // 上傳文件 ，兩種上傳方式插件上傳 和 flash 上傳 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 } ]); ~~~ >[info] ## 書中解決思路 ~~~ 1.使用享元模式，首先分析內外狀態，分析的四個步驟： 1.1.內部狀態儲存于對象內部。 1.2.內部狀態可以被一些對象共享。 1.3.內部狀態獨立于具體的場景，通常不會改變。 1.4.外部狀態取決于具體的場景，并根據場景而變化，外部狀態不能被共享。 2.開始分析 對象中的三個屬性'uploadType, fileName, fileSize',其中'uploadType'類型 是固定可以看成為內部屬性，就好比上個案例的性別一樣屬于固定類型個數的屬性， 'fileName, fileSize' 屬于動態變化歸類為外部狀態屬性 ~~~ >[danger] ##### 只包含內部狀態的上傳類(第一部分) ~~~ 1.將內部元素封裝成類的屬性，這里要注意的是，'init'方法也已經不是內部類了，因為 現在使用享元模式后，不會在隨著參數創建實例，而是會根據類型創建實例因此'init'方法 也失去了原本的意義，也需要配合不停改變的外部元素進行創建 ~~~ ~~~ var Upload = function( uploadType){ this.uploadType = uploadType; }; Upload.prototype.delFile = function( id ){ uploadManager.setExternalState( id, this ); // (1) if ( this.fileSize < 3000 ){ return this.dom.parentNode.removeChild( this.dom ); } if ( window.confirm( '確定要刪除該文件嗎? ' + this.fileName ) ){ return this.dom.parentNode.removeChild( this.dom ); } }; ~~~ >[danger] ##### 創建工廠對實例化對象進行控制（第二部分） ~~~ 1.接下來定義工廠，用來緩存創建的對象，如果該類型的對象存在直接調用之前的對象 ~~~ ~~~ var UploadFactory = (function(){ var createdFlyWeightObjs = {}; return { create: function( uploadType){ if ( createdFlyWeightObjs [ uploadType] ){ return createdFlyWeightObjs [ uploadType]; } return createdFlyWeightObjs [ uploadType] = new Upload( uploadType); } } })(); ~~~ >[danger] ##### 對外部狀態的管理（第三部分） ~~~ 1.剛才將原本創建對象的類'Upload ' 進行了打散的操作現在就需要在外部管理這個方法進行 重新的組裝，來調用剛才的'工廠函數'因為'工廠函數'內部會去調用'Upload' 2.整個對外部元素創建的管理，做了兩件事，一件事有一個add方法等同于之前實例中的'init' 方法，一個'setExternalState' 用將對應的創建對象和'Upload '中'delFile'方法進行關聯，以做到 刪除調用 ~~~ ~~~ 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 ]; } } } })() ~~~ >[danger] ##### 全局調用的方法(第四部分) ~~~ 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 ); } }; ~~~ >[danger] ##### 使用 ~~~ 1.無論怎么使用創建實例的個數永遠都只會根據內部狀態變量的改變個數決定 ~~~ ~~~ startUpload( 'plugin', [ { fileName: '1.txt', fileSize: 1000 }, { fileName: '2.html', fileSize: 3000 }, { fileName: '3.txt', fileSize: 5000 } ]); ~~~