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

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

你可以叫你的函数以下列方式

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

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

Answer 2

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

1. 使用点符号和文字属性名称：obj.foo

2. 使用括号内的注释和字符串属性名称：obj["foo"]

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

一旦你访问该属性，你只需添加()来调用它。

所以：

evtsheet['it3L'](); 

或

evtsheet.it3L(); 

和这两个的，通话中，this将evtsheet。

你说

I could able to access this value and store in a variable.

你能做到这一点，就像这样：

var f = evtsheet['it3L']; 

或

var f = evtsheet.it3L; 

然后调用它：

f(); 

但请注意，如果你这样做，this将而不是是evtsheet内的通话。 （这将是全局对象或undefined，取决于您是否处于严格模式。）

更多：

• Mythical methods
• You must remember this

---

重新获得从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> 

，那么你可以使用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> 

他们是，这是一个相当简单的正则表达式来代替：

var parts = /^([^[]+)['([^']+)']$/.exec(e[0]); 
if (parts) { 
    stuff[parts[1]][parts[2]](); // Note the indexes changed 
} 

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