如何删除DOM事件处理程序的重复JavaScript代码？

我正在尝试删除重复的JavaScript代码.我有一个包含许多< input type =“file”>的页面.每个加载图像并执行一些不同的处理.问题是我有以下代码的许多重复：

inputFile1.onchange = function (e) {
        var file = e.target.files[0];
        if (typeof file == 'undefined' || file == null) {
            return;
        }
        var imageType = /image.*/;
        if (!file.type.match(imageType)) {
            window.alert('Bad file type!');
            return;
        }
        var reader = new FileReader();
        reader.onloadend = function (e) {
            var imageLoader = new Image();
            imageLoader.onload = function () {
                // process image
            };
            imageLoader.src = e.target.result;
        };
        reader.readAsDataURL(file);
    };

inputFile2.onchange = ... (repeats all but process image)
inputFile3.onchange = ... (repeats all but process image)

只有过程映像注释中的代码会有所不同.如何删除周围的重复代码？

我知道JavaScript函数是对象.如何定义函数对象并为每个事件处理程序创建一个不同的实例,将过程映像的不同函数传递给每个对象？

解决方法:

您可以使用闭包将单个回调作为参数为这些函数创建一个生成器：

function getChangeHandler(loadCallback) {
    return function (e) {
        var file = e.target.files[0];
        if (typeof file == 'undefined' || file == null) {
            return;
        }
        var imageType = /image.*/;
        if (!file.type.match(imageType)) {
            window.alert('Bad file type!');
            return;
        }
        var reader = new FileReader();
        reader.onloadend = function (e) {
            var imageLoader = new Image();
            imageLoader.onload = loadCallback; // <= uses the closure argument
            imageLoader.src = e.target.result;
        };
        reader.readAsDataURL(file);
    };
}
inputFile1.onchange = getChangeHandler(function() { /* custom process image */ });
inputFile2.onchange = getChangeHandler(function() { /* custom process image */ });
inputFile3.onchange = getChangeHandler(function() { /* custom process image */ });

另一种最终优越的方法是对所有输入只使用一个更改事件处理程序,它通过输入的名称或id动态选择自定义图像处理器：

var imageProcessors = {
    "box1": function() { … },
    "anotherbox": function() { … },
    …
};
function changeHandler(e) {
    var input = this; // === e.target
    …
    reader.onloadend = function (e) {
        …
        imageLoader.onload = imageProcessors[input.id];
    };
}
// and bind this one function on all inputs (jQuery-style):
$("#box1, #anotherbox, …").click(changeHandler);

标签：javascript,dom,javascript-events,readability
来源： https://codeday.me/bug/20190901/1786758.html