Question

我只是学习如何使用JavaScript中的模块，因此我有三个单独的.js文件：main，listener和fileHandler

这是一个程序，可以将计算机中每个选定或删除的文件（图像）附加到页面上。当我将文件拖放到页面时，函数正在工作，但是当我通过inputBox按钮文件选择它们时，即使文件存储在inputBox.files中，它们也不会被附加到页面上。

var uploader = {};

uploader.init = function () {
    this.inputBox = document.getElementById('uploadButton');
    this.dropbox = document.getElementById('dropbox');
    this.listener();
}

和监听器方法为：

我可能会打电话来改变＆＃39;事件错误，不附加文件。

uploader.listener = function () {
    uploader.inputBox.addEventListener('change', uploader.fileHandler.addFiles(uploader.inputBox.files));
    this.dropbox.addEventListener('drop', this.fileHandler.drop.bind(this));
}

另一个构造函数是：

uploader.fileHandler = new function () {
    var uploadHandler = function () {...}
    this.addFiles = function (files) {
        Object.keys(files).forEach(function (key) {
            var file = files[key];
            uploadHandler(files[key]);
        });
    };
    this.drop = function (event) {
        event.stopPropagation();
        event.preventDefault();
        var files = event.dataTransfer.files;
        this.fileHandler.addFiles(files);
    };
}

Answer 1

修改

我看到另一个问题。当你这样做时：

uploader.inputBox.addEventListener('change', uploader.fileHandler.addFiles(uploader.inputBox.files));

您正在立即呼叫uploader.fileHandler.addFiles(uploader.inputBox.files)并将其返回值传递给.addEventListener()。可能你想要的是：

uploader.inputBox.addEventListener('change', function() { uploader.fileHandler.addFiles(uploader.inputBox.files) });

这里传递一个匿名函数引用，稍后可以通过事件处理程序调用它。

这个结构：

uploader.fileHandler = new function () { this.addFiles = function (files) { Object.keys(files).forEach(function (key) { var file = files[key]; uploadHandler(files[key]); }); }; }

仅为uploader.fileHandler分配功能。在您实际调用该函数（未显示）之前，它不会定义uploader.fileHandler.addFiles。

我不知道为什么你要尝试嵌套你的函数定义（这通常只会导致比Javascript中的好处更复杂），但如果你真的想以这种方式定义它们，你可以这样做：

uploader.fileHandler = { addFiles: function (files) { Object.keys(files).forEach(function (key) { var file = files[key]; uploadHandler(files[key]); }); }, drop: function(...) {...} };

然后，这将定义这两个函数：

uploader.fileHandler.addFiles() uploader.fileHandler.drop()

在模块化JavaScript中调用事件

1 个答案: