マルチインスタンスの詳細なアップローダコードを再利用する

Question

ページ内に複数のアップローダインスタンスがあります。私は、私のケース（6から8までのアップローダ）で多くのコードがあるので、アップローダのすべてのインスタンスに対して、素晴らしいアップローダスクリプトとテンプレートを繰り返す/複製したくありません。私は、次のしている

：

$('#fine-uploader-manual-trigger-section1').fineUploaderS3({ 
    template: 'qq-template-manual-trigger-section1', 
    autoUpload: false, 
    debug: true, 
    request: { 
     endpoint: $("#s3_url").val(), 
     accessKey: $("#access_key").val(),  
    }, 
}); 
$('#fine-uploader-manual-trigger-section2').fineUploaderS3({ 
    template: 'qq-template-manual-trigger-section2', 
    autoUpload: false, 
    debug: true, 
    request: { 
     endpoint: $("#s3_url").val(), 
     accessKey: $("#access_key").val(),  
    }, 
}); 
....... 
up to 6-8; as you can template code also repeat. 

私の目標は、再利用のスクリプトとアプローチの下に使用した可能性がテンプレートです。私はいくつかのアドバイスや解決策が必要な方向性が必要です。確かに、私はコードの重複を避けようとしています。

$('#fine-uploader-manual-trigger-section1').createUploader('section1'); 
$('#fine-uploader-manual-trigger-section2').createUploader('section2'); 

function createUploader(section) { 
    return new fineUploaderS3({ 
    template: 'qq-template-manual-trigger'+section, 
    autoUpload: false, 
    debug: true, 
    request: { 
     endpoint: $("#s3_url").val(), 
     accessKey: $("#access_key").val(),  
    }, 
    }); 
} 

私の質問は、どのように.fineUploaderS3をインスタンス化し、$('#fine-uploader-manual-trigger-section1')にそれを添付するには？上記のアプローチはJQueryバージョンで可能ですか？ここで

Answer 1

あなたは/さまざまなエンドポイントおよびテンプレートワットのユニークな要素にアタッチファインアップローダS3インスタンスのセットを作成するために呼び出すことができます関数です。

function createUploader(uploaderInfo) { 
    return new qq.s3.FineUploader({ 
     element: document.querySelector(uploaderInfo.elementSelector), 
     template: document.querySelector(uploaderInfo.templateSelector), 
     request: { 
     endpoint: uploaderInfo.endpoint 
     } 
    }) 
} 

を...そしてあなたは、このように、この関数を呼び出すことができます：

[ 
    { 
     elementSelector: '#element1', 
     templateSelector: '#template1', 
     endpoint: 'endpoint/1' 
    }, 
    { 
     elementSelector: '#element2', 
     templateSelector: '#template2', 
     endpoint: 'endpoint/2' 
    } 
    ... 
].forEach(function(uploaderInfo) { 
    createUploader(uploaderInfo) 
}) 

これは一般的な考えです。もちろん、必要に応じてコードを変更することもできます。アップローダインスタンスをトラッキングする必要がある場合は、forEachループの内部でも実行できます。