Question

我有HTML标签，我将存储要在属性中调用的函数名称。

<div id="it3" evt="swipeleft|swiperight" act="evtsheet['it2L']|evtsheet['it3R']" class="focusable off" style="width: 25%; height: 26.031746031746035%; top: 60.63492063492063%; left: 44.82142857142858%; z-index: 998; "></div>
<div id="it4" evt="swipeleft|swiperight" act="evtsheet['it3L']|evtsheet['it4R']" class="focusable off" style="width: 25%; height: 25.709325396825395%; top: 60.952380952380956%; left: 60.357142857142854%; z-index: 999; ></div>

我也有这个剧本。

<script>
    var evtsheet = {
        it2L : function(){/*some code*/}
        it3L : function(){/*some code*/}
        it3R : function(){/*some code*/} 
        it4L : function(){/*some code*/}
        /*have more similar functions*/
    }
</script>

让我们考虑这个HTML / JS在index.html中。现在，我有一个wrapper.js，它访问上面的元素并获取函数名称。例如：

com.xxx.init = function(ele){       //ele = "#it3"

     var e = ($(ele).attr("act")).split("|");   
     // e is array with values e[0] = evtsheet['it2L'] and 
     //                        e[1] = evtsheet['it3R']

     //Here i need to invoke the function
     //             ?????

}

我如何调用函数evtsheet ['it3R'] ??

Answer 1

函数引用只是对象的属性。在JavaScript中，您可以使用两种方式访问对象属性：

使用虚线表示法和文字属性名称：obj.foo
使用括号表示法和字符串属性名称：obj["foo"]

在后一种情况下，字符串可以是任何表达式的结果。

访问该媒体资源后，只需添加()即可进行调用。

所以：

evtsheet['it3L']();

或

evtsheet.it3L();

在通话中，this将为evtsheet。

你说

我能够访问此值并存储在变量中。

你可以这样做：

var f = evtsheet['it3L'];

或

var f = evtsheet.it3L;

然后调用它：

f();

但请注意，如果您这样做，this 将<{1}}置于通话中。（它将是全局对象或evtsheet，具体取决于您是否处于严格模式。）

更多：

从HTML中获取名称。我会改变它们看起来像这样，所以它们更容易抓住（它们不是硬你的方式，但它们更容易这样）：

undefined

那么你可以使用<div id="it3" evt="swipeleft|swiperight" act="evtsheet.it2L|evtsheet.it3R" class="focusable off" style="width: 25%; height: 26.031746031746035%; top: 60.63492063492063%; left: 44.82142857142858%; z-index: 998; "></div> <div id="it4" evt="swipeleft|swiperight" act="evtsheet.it3L|evtsheet.it4R" class="focusable off" style="width: 25%; height: 25.709325396825395%; top: 60.952380952380956%; left: 60.357142857142854%; z-index: 999; ></div>来获取它的一部分：

split

假设com.xxx.init = function(ele) { //ele = "#it3" var e = $(ele).attr("act").split("|"); // This assumes `evtsheet` is a global variable // Here's how to call the function defined by `e[0]`: var parts = e[0].split('.'); window[parts[0]][parts[1]](); // (And you can generalize it for any of the other functions in // the `e` array) }是一个全局变量（它在你的问题中）。我不喜欢全局变量，所以我可能会将所有代码放在一个作用域函数中（以避免创建全局变量）并执行此操作：

evtsheet

如果你想让名字保持原样，那就是一个相当简单的正则表达式：

<script>
    // Start the scoping function
    (function() {
        // Make evtsheet a property of an object
        var stuff = {
            evtsheet: {
                it2L : function(){/*some code*/},
                it3L : function(){/*some code*/},
                it3R : function(){/*some code*/},
                it4L : function(){/*some code*/},
               /*have more similar functions*/
            }
        };

        // ...other stuff...

        com.xxx.init = function(ele) {       //ele = "#it3"

             var e = $(ele).attr("act").split("|");

             // We no longer assume `evtsheet` is a global, but it *is*
             // a property on `stuff`.
             // Here's how to call the function defined by `e[0]`:
             var parts = e[0].split('.');
             stuff[parts[0]][parts[1]]();

             // (And you can generalize it for any of the other functions in
             // the `e` array)
        };


        // ...other stuff...

    // End of scoping function
    })();
</script>

Answer 2

您可以通过以下方式调用您的函数

<script>
    var evtsheet = {
        it3L : function() {
            console.log("test")
        }

    }
    evtsheet['it3L']();        
    // evtsheet.it3L();
</script>

Answer 3

尝试改为使用函数的名称：

//assuming that you are going to get the "act" property and parse it
<div id="it3" act="it3L|it4R"...

//get the function name, for example, it3L
var evt = 'it3L';

//execute that function from your evtsheet object
evtsheet[evt].call(this);

Answer 4

您正在寻找活动。事件是一种在事情发生时调用函数的方法。现在，您没有指定何时调用这些函数，让我们采用最常见的函数之一：onClick。

<div id="it3" evt="swipeleft|swiperight" onclick="funcName()" ...></div>

脚本

<script>
    function funcName() {
        // Anything goes...
    }
</script>

另外，如果你想在html标签中存储元信息，我建议你使用标准的数据属性，见这里：http://www.w3.org/TR/2011/WD-html5-20110525/elements.html#custom-data-attribute

执行javascript函数，哪个名称存储在变量中？

4 个答案: