代码之家 › 专栏 › 技术社区 › Dipak

使用数组索引创建函数

jquery javascript

Dipak · 技术社区 · 6 年前

为我的项目使用不同的目的和页面,创建多个函数会变得更有用。例如:

    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 回复 | 直到 6 年前

dangee1705 6 年前

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

ftch 但是,这只是将对象存储在 window[cat] (未定义),然后尝试创建另一个名为 .

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

Blue 6 年前

可以使用匿名函数。另外,请注意,您有一个语法错误 $('#"' + 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));

Manuraj Sebastian 6 年前

window(function_name,parameters);