1

我有 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'] ？

4

4 回答 4

1

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

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

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

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

访问该属性后，您只需添加()即可调用它。

所以：

evtsheet['it3L']();

或者

evtsheet.it3L();

对于其中任何一个，在通话中，this将是evtsheet.

你说

我可以访问这个值并存储在一个变量中。

你可以这样做，像这样：

var f = evtsheet['it3L'];

或者

var f = evtsheet.it3L;

然后调用它：

f();

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

更多的：

重新从 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
}
于 2013-02-22T08:12:05.480 回答
0

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

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

    }
    evtsheet['it3L']();        
    // evtsheet.it3L();
</script>
于 2013-02-22T08:11:59.580 回答
0

尝试将函数的名称改为：

//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);
于 2013-02-22T08:12:15.727 回答
0

您正在寻找事件。事件是发生某事时调用函数的一种方式。现在，您没有指定何时要调用这些函数，让我们以最常见的一个为例：onClick。

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

还有剧本

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

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

于 2013-02-22T08:19:01.117 回答