重复使用罚款上传器代码多实例

我有一个页面中的罚款上传器的多个实例。我不想为每个上传器实例重复/复制优良的上传器脚本和模板，因为它在我的情况下是很多代码（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

重复使用罚款上传器代码多实例

回答

相关问题