重複使用罰款上傳器代碼多實例

我有一個頁面中的罰款上傳器的多個實例。我不想爲每個上傳器實例重複/複製優良的上傳器腳本和模板，因爲它在我的情況下是很多代碼（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版本嗎？

來源

2016-06-21 bizready

第一步是停止使用jQuery插件封裝。但最重要的是，你的問題並不清楚，我不知道你想要做什麼。 –

嗡嗡聲......我在想，jQuery版本比普通版本要好。不知道這對我有多大的改變！無論如何回答你的問題，我有一個頁面上的6-8上傳者，他們每個上傳到S3中的特定子文件夾。大多數情況下，每個上傳器的唯一更改是特定的子文件夾。我希望能夠通過將子文件夾作爲參數傳遞給它，通過調用一個優良的上傳器腳本和模板來創建6-8個實例，而不是每個實例的重複上傳器代碼和模板。 – bizready

所以你實際上需要8個單獨的罰款上傳者的實例？每個附加到不同的元素？ –

這裏，您可以調用創建一組連接到獨特的元素W¯¯精細上傳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循環中執行此操作。

來源

2016-06-21 22:34:29

真棒的想法雷和非常感謝！我將試驗並更新此主題。 – bizready

我已經基於Ray的方向實施了我的解決方案，並且非常流暢。當然，我不得不做很多特定的定製，因此在這裏添加代碼可能沒有用處。再次感謝Ray對他的大力支持以及具體的例子。 – bizready

重複使用罰款上傳器代碼多實例

回答

相關問題