JavaScriptが享元モードを使ってファイルアップロードの最適化を実現する操作例

3560 ワード

本論文の実例は、JavaScriptが享元モードを使用してファイルアップロードの最適化操作を実現することを述べている.皆さんに参考にしてあげます.具体的には以下の通りです.
一、享元モードは性能最適化のためのモードで、主な最適化方式は、システムに類似の対象が大量に作成されたためメモリ占有が高すぎると、享元モードを使用して実現することが考えられます.
二、実例説明:
ブラウザにファイルをアップロードすると、通常の書き方を使うと、ファイルをアップロードするごとにインスタンスオブジェクトが作成されます.2000のファイルをアップロードすれば、2000のオブジェクトがあります.ブラウザが仮死状態になる可能性があります.この場合,享元モードに適応することを考えた.
三、例:

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 = '    :'+fileName+',    :' +fileSize + '' + '';
      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 ];
        }
     }
  }
})();

その後、アップロード動作をトリガするstartUpload関数を書く必要があります.

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

最後に呼び出します.以下の通りです.

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

四、説明:
呼び出し時、6つのオブジェクトがありますが、2つのタイプしかありません.私達は享元モードを通じてオブジェクトを作成する時、2つしかないです.上記のアップロードファイルが2000件あります.上のコードを利用して、同じ2つのオブジェクトだけを作成すれば、ブラウザの崩壊仮死問題を解決できます.
JavaScriptの関連内容については、当駅のテーマを見ることができます.「javascript対象入門教程」、「JavaScript切替特効と技巧のまとめ」、「JavaScript検索アルゴリズム技術のまとめ」、「JavaScriptエラーとデバッグ技術のまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」『JavaScript数学演算の使い方のまとめ』
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます.