如何删除DOM事件处理程序的重复JavaScript代码
How to remove duplicate JavaScript code of DOM event handler?
我正在尝试删除重复的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)
只有process image
注释处的代码不同。如何删除周围的重复代码?
我知道JavaScript函数是对象。如何定义一个函数对象并为每个事件处理程序创建一个不同的实例,将process image
的不同函数传递给每个对象?
您可以为这样的函数制作一个生成器,该生成器带有一个以单个回调为参数的闭包:
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 */ });
另一种最终更优越的方法是,对所有输入只使用一个change
-事件处理程序,通过输入的name
或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);
您可以编写一个返回函数的函数:
function processFile(callback) { //callback is the unique file processing routine
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 = callback; //Put it here!
imageLoader.src = e.target.result;
};
reader.readAsDataURL(file);
};
}
然后这样调用:
inputFile1.onchange = processFile(function() {
//file processing for number 1
});
inputFile2.onchange = processFile(function() {
//file processing for number 2
});
inputFile3.onchange = processFile(function() {
//file processing for number 3
});
这里有一个EMCA5解决方案,只是为了将其融入其中。它根据元素绑定动态事件回调。
我假设每个字段都有一个ID(input1
等),但如果对代码进行了一些修改(即通过其他方式识别触发元素),这就没有必要了。
Array.prototype.slice.call(document.querySelectorAll('input[type=file]')).forEach(function(element) {
/* prepare code specific to the element */
var input_specific_code = (function() {
switch (element.id) {
case 'input1': return function() { /* #input1 code here */ };
case 'input2': return function() { /* #input2 code here */ };
case 'input3': return function() { /* #input3 code here */ };
}
})();
element.addEventListener('change', (function(input_specific_code) { return function(evt) {
var id_of_trigger_input = element.id;
/* common code here */
/* element-specific code */
input_specific_code();
/* continuation of common code */
}; })(input_specific_code), false);
});
相关文章:
- 如何为后台更改程序代码设置cookie
- 我如何知道js文件之间的javascript应用程序代码流
- cordova.exec() 正在破坏我的应用程序代码
- Webpack:拆分供应商和应用程序代码
- 如何从现有的web应用程序代码中制作桌面应用程序
- Chrome 扩展程序:页面加载速度比扩展程序代码快
- 禁用 JS 后事件处理程序代码是否“持久化”
- Cordova/Phonegap锁定源应用程序代码,使其不被编辑/黑客攻击
- 在应用程序代码上运行Google Closure编译器后,更新AngularJS模板HTML
- 如何在react组件中编写内联js事件处理程序代码;这个“;
- JS中数据验证程序代码中的小错误
- 当我更改应用程序代码时,我必须记住更改测试中的模拟函数
- 一次回车键按下会运行两次JavaScript键按下事件处理程序代码
- 如何在web应用程序代码中找到一个GET HTTP请求正在发出
- 剑道UI - Java脚本事件处理程序(代码分离+参数)
- 为什么我得到“不正确的注入令牌”!在这个angular应用程序代码中
- 谷歌chrome应用程序代码注入不工作的某些元素
- 维护PhoneGap混合/Web应用程序代码库
- SelectedIndexChange事件处理程序代码
- 如何从自定义验证程序代码中调用modalPopup