使用数组索引创建函数

时间:2018-09-15 19:54:19

标签: javascript jquery

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

创建多个功能对于为项目使用不同的目的和页面变得更加有用。例如:

    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);
            }
        });
    }
})

3 个答案:

答案 0 :(得分:3)

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

答案 1 :(得分: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);
        }
    });
}

答案 2 :(得分:0)

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

window(function_name,parameters);