在准备好的处理程序中使用字符串调用函数......不起作用答案

【问题标题】：Calling a function using a string within a ready handler... doesn't work在准备好的处理程序中使用字符串调用函数......不起作用
【发布时间】：2015-09-22 20:21:01
【问题描述】：

所以你想执行一个名字在字符串或变量中的函数：

var fn = "foobar";

function foobar() {
    console.log('say something');
}

这样的答案 - How to execute a JavaScript function when I have its name as a string - 说要这样做：

window[fn](); // outputs 'say something'

但是... 这个由于某种原因不起作用：

jQuery(document).ready(function($){
    var fn = "foobar";

    function foobar() {
        console.log('say something');
    }

    window[fn](); // undefined
});

这有效，但是：

jQuery(document).ready(function($){
    var fn = "foobar";

    window[fn](); // outputs 'say something'
});

/* I'm outside the ready handler */

function foobar() {
    console.log('say something');
}

我想将我的函数保存在准备好的处理程序中，这样我就不必编写一堆匿名函数来将jQuery 定义为$。我该怎么做？

更新

这是我想做的：

<div data-control="toggleNext">FAQ</div>
<div>Here's some text that will be hidden until toggled</div>

JS：

jQuery(document).ready(function($){

    function toggleNext() {
        // add ".js_toggled" to .next() element
    }

    $('[data-control]').each(function(){
        var fn = window[$(this).data('control')]; // <-- this don't werk
        if (typeof fn === 'function') fn(this);
    });

});

【问题讨论】：

如果您的函数在就绪处理程序中，除非您专门设置它，否则它将在窗口中不可用。但是，无论如何，这都是一个坏主意，只需将window 排除在外，然后在您的文档就绪块本地定义您自己的对象。
哦，你的意思是像window[foobar] = function() {}？

标签： jquery anonymous-function document-ready

【解决方案1】：

如果您的函数在就绪处理程序中，则它在window 上不可用，除非您专门设置它。但是，无论如何这都是个坏主意，只需将 window 排除在外，然后在 doc ready 块的本地定义您自己的对象。

jQuery(document).ready(function($){
    var fn = "foobar", methods = {};
    methods[fn] = function () {
        console.log('say something');
    }
    $('[data-control]').each(function(){
        var fn = methods[$(this).data('control')];
        if (typeof fn === 'function') fn(this);
    });
    //methods[fn](); 
});

【讨论】：

嗯，好吧，我想做类似<div data-control="toggleNext"> 的事情并循环遍历各种[data-control] 并将它们转换为函数......所以methods[fn] 似乎是一次性使用。跨度>
你能举个例子吗？似乎这不仅限于使用window
我想我也会写出我的解决方案。谢谢您的帮助。这是那些难以研究的你不知道的问题之一。

【解决方案2】：

@KevinB 引导我找到答案，我会给他接受，但我认为这值得写出来，因为我想其他人会想做这样的事情。

由于window 对象不包括在就绪处理程序中声明的函数（即，没有显式调用window['functionName'] = function() {...}），您可以定义一个本地对象并改为调用它：

HTML：

<div data-control="toggleNext">FAQ</div>
<div>Here's some text that will be hidden until toggled</div>

JS：

jQuery(document).ready(function($){

    var myFuncs = {

        toggleNext : function(me) {
            // add ".js_toggled" to $(me).next() element
        },

        doSomethingCool : function() {
            // you'd better make it good
        }
    }

    $('[data-control]').each(function(){

        var funcName = $(this).data('control'),
            fn = myFuncs[funcName];
        if (typeof fn === 'function')
            fn(this);

    });

});

我不知道，只有我觉得这很有用吗？

【讨论】：