时间戳

首页 > 解决方案 > jQuery - 使用全局函数

javascript - jQuery - 使用全局函数

问题描述

在具有两个按钮（编辑、删除）的 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)函数放在哪里了？在准备功能内部还是外部？如何从这个全局函数返回响应？如果解析响应的结果产生一个值列表怎么办？

标签： javascriptjqueryajax

解决方案

我应该把那个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。

推荐阅读