jQuery - использование глобальной функции

Question

На странице HTML, имеющей две кнопки (EDIT, DELETE), я выполняю вызов AJAX, затем анализирую возвращенный JSON и выполняю EDIT или DELETE на основе возвращенного идентификатора. Все это внутри

$( document ).ready(function() {
    ...
    $('button.icons8.icons8-edit-file').on("click", function(){
        var key = $(this).attr('key');
        $.ajax({
            url: '/ede/' + key + '/json',
            method: 'POST',
            success: function (response) {
                // PARSING THE JSON, EXTRACTING THE ID FROM IT
                // AND PERFOMING THE EDIT
            }
        });
    })
    ...
    $('button.icons8.icons8-delete-file').on("click", function(){
        var key = $(this).attr('key');
        $.ajax({
            url: '/ede/' + key + '/json',
            method: 'POST',
            success: function (response) {
                // PARSING THE JSON, EXTRACTING THE ID FROM IT
                // AND PERFOMING THE DELETE
            }
        });
    })
    ...
});

Я хотел бы иметь глобальную функцию, которая получает значение ключа, вызывает AJAX и возвращает значение в соответствии с шаблоном.

$( document ).ready(function() {
    ...
    $('button.icons8.icons8-edit-file').on("click", function(){
        var key = $(this).attr('key');
        var value = GLOBAL_FUNCTION(key, pattern_edit);
        // PERFOMING THE EDIT
    })
    ...
    $('button.icons8.icons8-delete-file').on("click", function(){
        var key = $(this).attr('key');
        var value = GLOBAL_FUNCTION(key, pattern_delete);
        // PERFOMING THE DELETE
    })
    ...
});

Где я могу поместить это GLOBAL_FUNCTION (p_key, p_pattern) fuction? Внутри или снаружи функции ready ? Как я могу вернуть ответ от этой глобальной функции? Что если в результате анализа ответа будет получен список значений?

Answer 1

Вы можете перевести функцию просто в состояние готовности jQuery и использовать их в обоих обратных вызовах.На самом деле это не global , но он подходит для обеих целей.

Но функция GLOBAL_FUNCTION не может вернуть значение, потому что $.ajax является асинхронным.Но вы можете передать обратный вызов функции, выполненной после завершения.

И вы можете сказать jQuery, что ответ имеет формат JSON, поэтому он автоматически проанализирует его для вас.

$( document ).ready(function() {
    function GLOBAL_FUNCTION(key, type, callback) {
        $.ajax({
            url: '/ede/' + key + '/json',
            method: 'POST',
            dataType: 'json,
            success: function (response) {
                // EXTRACTING THE ID FROM RESPONSE 
                var id = response.id;
                
                if (type === 'edit') {
                  // PERFOMING THE EDIT
                }
                
                if (type === 'delte') {
                  // PERFOMING THE DELETE
                }
                
                // EXECUTE CALLBACK ON FINISH
                callback(id, type);
            }
        });
    };
    
    $('button.icons8.icons8-edit-file').on("click", function(){
        var key = $(this).attr('key');
        GLOBAL_FUNCTION(key, 'edit', (id, type) => {
            console.log(type + ' of id #' + id + ' finished');
        });
    })

    $('button.icons8.icons8-delete-file').on("click", function(){
        var key = $(this).attr('key');
        GLOBAL_FUNCTION(key, 'delete', (id, type) => {
            console.log(type + ' of id #' + id + ' finished');
        });
    })
    
});

Answer 2

Где я должен поставить эту функцию GLOBAL_FUNCTION(p_key, p_pattern)? Внутри или снаружи функции готовности?

Вы можете поместить это в любое место в пределах всех мест, которые вы хотите назвать. Глобальный является одной из возможностей, но следует избегать, где это возможно. Вместо этого я бы предложил использовать пространство имен для ваших общих функций в их собственном объекте. Таким образом, вы можете извлечь их в отдельный файл JS для повторного использования.

Как мне вернуть ответ от этой глобальной функции?

Если функция делает запрос AJAX, вы ничего не можете вернуть, поскольку вызов должен быть асинхронным. Вы можете обойти это, предоставив функцию обратного вызова для выполнения после завершения запроса.

Учитывая эти моменты, код будет выглядеть примерно так:

// common.js
var common = (function() { 
  return {
    global_function: function(key, callback) {
      $.get('/ede/' + key + '/json', function(response) {
        // perform common actions here, if needed..
        callback && callback(response);
      }
    }
  };  
})();

// in your page:
$('button.icons8.icons8-edit-file').on("click", function() {
    var key = $(this).data('key');
    common.global_function(key, function(response) {
      // Edit response.id...
    });
});

$('button.icons8.icons8-delete-file').on("click", function() {
    var key = $(this).data('key');
    common.global_function(key, function(response) {
      // Delete response.id...
    });
});

Также имеет смысл извлечь логику удаления и редактирования в общую библиотеку, но я оставлю это вам на основе вашей собственной логики.

Наконец, обратите внимание на использование data() здесь, так как создание ваших собственных нестандартных атрибутов сделает ваш HTML недействительным. Вместо этого используйте data-key.