執行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