javascript - jQuery - 使用全局函数

Question

在具有两个按钮(编辑、删除)的 HTML 页面中，我执行 AJAX 调用，然后解析返回的 JSON，然后根据返回的 ID 执行编辑或删除。所有这一切都在一个

$( 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) 函数放在哪里？在 ready 函数内部还是外部？如何返回此全局函数的响应？如果解析响应的结果产生一个值列表怎么办？

Answer 1

Where should I put that GLOBAL_FUNCTION(p_key, p_pattern) function? Inside or outside of the ready function?

你可以把它放在你想要调用它的所有地方范围内的任何地方。全局是一种可能性，但应尽可能避免。相反，我建议将您的常用函数命名为它们自己的对象。这样您就可以将它们提取到一个单独的 JS 文件中，以便于重复使用。

How do I return the response from this global function?

如果函数正在发出 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...
    });
});

将删除和编辑逻辑提取到公共(public)库中也是有意义的，但我会根据您自己的逻辑将其留给您。

最后，请注意此处使用了 data()，因为创建您自己的非标准属性会使您的 HTML 无效。请改用 data-key。