Я пытаюсь преобразовать скрипт перетаскивания в модуль JavaScript.
ПРИМЕЧАНИЕ. Проблема не в том, как вернуть объект json внутри функции ajax, а в том, как вернуть объект json из модуля.
Код работает вне модуля:
var article_dropzone = document.getElementById("article_dropzone");
article_dropzone.addEventListener("dragover", dragover);
article_dropzone.addEventListener("dragleave", dragleave);
article_dropzone.addEventListener("drop", dragdrop);
function dragupload(files) {
ajax("/articleThumbnail.php", false, "POST", false, files[0], function (results) {
var jsonObj = JSON.parse(results);
});
}
function dragover(e) {
e.preventDefault();
}
function dragleave(e) {
e.preventDefault();
}
function dragdrop(e) {
e.preventDefault();
dragupload(e.dataTransfer.files);
}
Но проблема в том, что мне нужно сделать модуль для повторного использования и вернуть объект JSON из вызова ajax внутри вызова модуля.
Модуль:
var drag_upload = (function () {
var elem_dropzone;
var elem_page;
var jsonObj = false;
var prepare_drag = function (dropzone, page, callback) {
elem_dropzone = document.getElementById(dropzone);
elem_page = page;
elem_dropzone.addEventListener("dragover", dragover);
elem_dropzone.addEventListener("dragleave", dragleave);
elem_dropzone.addEventListener("drop", dragdrop);
callback(jsonObj);
};
var dragupload = function (files) {
ajax(elem_page, false, "POST", false, files[0], function (results) {
jsonObj = JSON.parse(results);
});
};
var dragover = function (e) {
e.preventDefault();
};
var dragleave = function (e) {
e.preventDefault();
};
var dragdrop = function (e) {
e.preventDefault();
dragupload(e.dataTransfer.files);
};
return {
prepare_drag: prepare_drag
};
})();
Вызов модуля:
drag_upload.prepare_drag(article_dropzone, function (callback) {
alert(callback);
});
Функция AJAX
function ajax(url, parameters, method, form = false, files = false, callback = false) {
var ajax_http = new XMLHttpRequest();
var ajax_parameters;
ajax_http.open(method, url, true);
if (form === false && files === false) {
ajax_parameters = parameters;
ajax_http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
} else {
ajax_parameters = form ? new FormData(form) : new FormData();
if (files) {
if (files.length == null) {
ajax_parameters.append("file", files);
} else {
for (i = 0; i < files.length; i++) {
ajax_parameters.append("file[]", files[i]);
}
}
}
}
ajax_http.onreadystatechange = function () {
if (ajax_http.readyState === 4 && ajax_http.status === 200) {
if (callback) {
callback(ajax_http.responseText);
} else {
return ajax_http.responseText;
}
}
};
ajax_http.send(ajax_parameters ? ajax_parameters : null);
}
Я пробовал несколько разных вещей, последняя делает функцию обратного вызова, но, очевидно, она вернет false, потому что она будет работать сразу же после вызова модуля и, следовательно, не будет подключен объект JSON.
У кого-нибудь есть совет или что-нибудь, что может помочь мне решить эту проблему?
Мне удалось найти способ сделать это, я нахожу это немного грязным.
Вызов модуля:
window.addEventListener("load", function (e) {
var article_dropzone = "article_dropzone";
var pag_test = "/articleThumbnail.php";
drag_upload.prepare_drag(article_dropzone, pag_test);
document.getElementById(article_dropzone).addEventListener("drop", function (e) {
e.preventDefault();
var file = e.dataTransfer.files;
drag_upload.dragupload(file, function (callback) {
console.log(callback);
});
});
});
Модуль:
var drag_upload = (function () {
var elem_dropzone;
var drp_files;
var drp_page;
var prepare_drag = function (dropzone, page) {
elem_dropzone = document.getElementById(dropzone);
drp_page = page;
elem_dropzone.addEventListener("dragover", dragover);
elem_dropzone.addEventListener("dragleave", dragleave);
};
var dragupload = function (file, callback) {
ajax(drp_page, false, "POST", false, file[0], function (results) {
callback(JSON.parse(results));
});
};
var dragover = function (e) {
e.preventDefault();
};
var dragleave = function (e) {
e.preventDefault();
};
return {
prepare_drag: prepare_drag,
dragupload: dragupload
};
})();
Мне кажется, что выполнение описанного выше способа выглядит так, будто мне действительно не нужен модуль, за исключением случаев, когда мне нужны опции Dragover / Dragleave, и я нахожу его немного более грязным, разве нет более разумного способа сделать это?