使用数组索引创建函数

Question

我必须创建包含几乎相同模式和编码的许多函数。

创建多个函数对于为项目使用不同的目的和页面变得更有用。例如：

    function cls(){
        $.ajax({  
            url:"crud/fetch.php",  
            method:"POST",  
            data:{cat:'cls'},
            success:function(data){
                $('#cls').html(data);
            }
        });
    }

    function stdt(){
        $.ajax({  
            url:"crud/fetch.php",  
            method:"POST",  
            data:{cat:'stdt'},
            success:function(data){
                $('#stdt').html(data);
            }
        });
    }


    function sec(){
    ......
    //same pattern
    }

    function pdl(){
    ......
    //same pattern
    }

我试图在一个函数中包含这些函数，以减少看起来干净，易于调试和重新编辑的代码。

所以我尝试将所有需要的函数名称存储在一个数组中，并使用每个索引创建函数。

但我得到Uncaught TypeError: cls is not a function。我试过没有使用window[cat]。我认为这是愚蠢的方式，但尝试过，希望它能起作用。请建议如何使用每个数组索引值分配或创建函数。

var menu = ["cls", "stdt", "sec", "pdl", "sub", "xsub", "cls_sub", "cls_xsub", "xam", "mrksch", "grdsch", "sclnfo"];
$.each(menu, function(i,cat){
    var ftch = window[cat];
    function ftch(){
        $.ajax({  
            url:"crud/fetch.php",  
            method:"POST",  
            data:{menu:cat},
            success:function(data){
                $('#"' + cat+ '"';).html(data);
            }
        });
    }
})

Answer 1

您正在尝试在此代码中调用字符串

var ftch = window[cat];
function ftch(){

我猜你认为这意味着在窗口对象上创建一个名为cat的函数，然后使用ftch定义它，但是这只是将对象存储在window[cat]（将是未定义的），然后尝试创建另一个名为ftch的函数。

要解决此问题，只需将代码更改为：

window[cat] = function(){
    $.ajax({  
        url:"crud/fetch.php",  
        method:"POST",  
        data:{menu:cat},
        success:function(data){
            $('#"' + cat+ '"';).html(data);
        }
    });
}

Answer 2

您可以使用匿名函数。另外，请注意，$('#"' + cat+ '"';)语法错误：

var menu = ["cls", "stdt", "sec", "pdl", "sub", "xsub", "cls_sub", "cls_xsub", "xam", "mrksch", "grdsch", "sclnfo"];
$.each(menu, function(i,cat){
    window[cat] = function () {
        $.ajax({  
            url:"crud/fetch.php",  
            method:"POST",  
            data:{menu:cat},
            success:function(data){
                $('#' + cat).html(data);
            }
        });
    }
});

虽然，我强烈建议您创建一个自定义变量/类，以避免对全局范围造成太多污染：

window.fetch = {};

var menu = ["cls", "stdt", "sec", "pdl", "sub", "xsub", "cls_sub", "cls_xsub", "xam", "mrksch", "grdsch", "sclnfo"];
$.each(menu, function(i,cat){
    window.fetch[cat] = function () {
        $.ajax({  
            url:"crud/fetch.php",  
            method:"POST",  
            data:{menu:cat},
            success:function(data){
                $('#"' + cat+ '"';).html(data);
            }
        });
    }
});

您甚至可以使用代理使上述方法动态化（这只是一个演示，您只需创建一个带参数的函数）：

var fetchMenu = new Proxy({}, {
  get: function(obj, cat, val) {
    return () => {
      console.log('Lets load ' + cat);
    };
  }
});

var menu = ["cls", "stdt", "sec", "pdl", "sub", "xsub", "cls_sub", "cls_xsub", "xam", "mrksch", "grdsch", "sclnfo"];


fetchMenu.cls();

虽然，这似乎是一个X / Y问题。你这样做的理由是什么？为什么不创建一个函数来获取获取内容的参数？

function fetchCat(cat) {
    $.ajax({  
        url:"crud/fetch.php",  
        method:"POST",  
        data:{menu:cat},
        success:function(data){
            $('#' + cat).html(data);
        }
    });
}

稍后......你可以做一些简单的事情：

$.each(menu, (i, cat) => fetchCat(cat));

Answer 3

尝试使用window命令调用该函数

window(function_name,parameters);