JavaScript使用享元模式實現(xiàn)文件上傳優(yōu)化操作示例
本文實例講述了JavaScript使用享元模式實現(xiàn)文件上傳優(yōu)化操作。分享給大家供大家參考,具體如下:
一、享元模式是一種用于性能優(yōu)化的模式,主要優(yōu)化方式為,若系統(tǒng)中因為創(chuàng)建了大量類似的對象而導(dǎo)致內(nèi)存占用過高,則可以考慮使用享元模式實現(xiàn)。
二、實例說明:
如果在瀏覽器中上傳文件,若使用常規(guī)寫法, 每上傳一個文件,就會創(chuàng)建一個實例對象;如果上傳2000個文件,那就有2000個對象,瀏覽器很可能出現(xiàn)假死狀態(tài)。這種情況下,我們考慮適應(yīng)享元模式。
三、實例:
var Upload = function( uploadType ){ this.uploadType = uploadType; }; Upload.prototype.delFile = function( id ){ uploadManager.setExternalState( id, this ); if( this.fileSize < 300 ){ return this.dom.parentNode.removeChild( this.dom ); } if( window.confirm('確定要刪除該文件嗎?' + this.fileName )){ return this.dom.parentNode.removeChild( this.dom); } }; var UploadFactory = (function(){ var createdFlyWeightObjs = {}; return { create: function( uploadType ){ if(createFlyWeightObjs[uploadType]){ return createdFlyWeightObjs[uploadType]; } return createdFlyWeightObjs[uploadType] = new Upload(uploadType); } } })(); 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: functon( id, flyWeightObj ){ var uploadData = uploadDatabase[ id ]; for( var i in uploadData){ flyWeightObj[ i ] = uploadData[ i ]; } } } })();
然后需要寫一個觸發(fā)上傳動作的startUpload
函數(shù):
var id = o; window.startUpload = function( uploadType, files ){ for( var i=0,file; file = fules[ i ++ ];){ var uploadObj = uploadManger.add( ++id, uploadType, file.fileName, file.fileSize ); } };
最后調(diào)用,如下:
startUpload( 'plugin', [ { fileName: '1.txt', fileSize: 1000 }, { fileName: '2.html', fileSize: 1000 }, { fileName: '3.txt', fileSize: 5000 } ]); startUpload( 'flash', [ { fileName: '4.txt', fileSize: 1000 }, { fileName: '5.html', fileSize: 1000 }, { fileName: '6.txt', fileSize: 5000 } ]);
四、解釋:
調(diào)用時,有六個對象,但只有兩個類型(plugin和flash),我們通過享元模式,在創(chuàng)建對象時,只有兩個,如果上面提到的上傳2000個文件,利用上面的代碼,同樣只創(chuàng)建兩個對象,那么這就很好的解決了瀏覽器崩潰假死的問題。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
使用javascript實現(xiàn)Iframe自適應(yīng)高度
這篇文章主要介紹了使用javascript實現(xiàn)Iframe自適應(yīng)高度,需要的朋友可以參考下2014-12-12動態(tài)生成的IFRAME,設(shè)置SRC時的,不同位置帶來的影響
動態(tài)生成的IFRAME,設(shè)置SRC時的,不同位置帶來的影響。 以下所說的是在IE7下運行的。IE6下也是同樣。 在這個blog中,直接點擊運行代碼,和把下面代碼保存到為網(wǎng)頁在運行(以本地文件或域名訪問),效果不一樣。2008-03-03收集的一些Array及String原型對象的擴展實現(xiàn)代碼
收集的一些Array及String原型對象的擴展實現(xiàn)代碼,學(xué)習(xí)js的朋友可以參考下。并可以自定義的對字符串與array數(shù)據(jù),進行擴展。2010-12-12