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

您可以使用匿名功能。另外，请注意，您在使用$('#"' + 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);
            }
        });
    }
});

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

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 2

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

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 3

尝试使用窗口命令调用该函数

window(function_name,parameters);

使用数组索引创建函数

3 个答案: