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


本論文の実例は、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 = '<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 ];
        }
     }
  }
})();

その後、アップロード動作をトリガする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数学演算の使い方のまとめ
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。