Javascript 使用RaphaelJS矢量图形库-帮助解释示例

我正在查看这个示例的源代码，并试图解释已经完成的工作，以便使用RaphaelJS图形库创建一个类似的项目

然而，我对部分代码感到困惑。具体地说，作者在for循环内的函数中使用了一个参数“st”，这个参数以前没有定义过，而第二个参数“state”则没有定义。我不确定我遗漏了什么，但有人能解释一下这里发生了什么吗？这是一个通用参数还是对某个特定对象的调用

for (var state in aus) {
            aus[state].color = Raphael.getColor();
            (function (st, state) {
                st[0].style.cursor = "pointer";
                st[0].onmouseover = function () {
                    current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
                    st.animate({fill: st.color, stroke: "#ccc"}, 500);
                    st.toFront();
                    R.safari();
                    document.getElementById(state).style.display = "block";
                    current = state;
                };
                st[0].onmouseout = function () {
                    st.animate({fill: "#333", stroke: "#666"}, 500);
                    st.toFront();
                    R.safari();
                };
                if (state == "nsw") {
                    st[0].onmouseover();
                }
            })(aus[state], state);
        }

---

使用值

aus[state]

和

state

调用该函数（查看最后第二行）。因此，它相当于：

for (var state in aus) {
        aus[state].color = Raphael.getColor();

        var st = aus[state]; // This line replaces the function

        st[0].style.cursor = "pointer";
        st[0].onmouseover = function () {
            current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
            st.animate({fill: st.color, stroke: "#ccc"}, 500);
            st.toFront();
            R.safari();
            document.getElementById(state).style.display = "block";
            current = state;
        };

        st[0].onmouseout = function () {
            st.animate({fill: "#333", stroke: "#666"}, 500);
            st.toFront();
            R.safari();
        };

        if (state == "nsw") {
            st[0].onmouseover();
        }
    }

---

使用值

aus[state]

和

state

调用该函数（查看最后第二行）。因此，它相当于：

for (var state in aus) {
        aus[state].color = Raphael.getColor();

        var st = aus[state]; // This line replaces the function

        st[0].style.cursor = "pointer";
        st[0].onmouseover = function () {
            current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
            st.animate({fill: st.color, stroke: "#ccc"}, 500);
            st.toFront();
            R.safari();
            document.getElementById(state).style.display = "block";
            current = state;
        };

        st[0].onmouseout = function () {
            st.animate({fill: "#333", stroke: "#666"}, 500);
            st.toFront();
            R.safari();
        };

        if (state == "nsw") {
            st[0].onmouseover();
        }
    }

---

st

是周围闭包的命名参数：

（功能（st，状态）{
// ...
})（澳大利亚[州]、州）；

这称为立即调用的函数表达式（通常称为自执行块或临时作用域），用于通过从周围上下文提取代码来“保存”状态

为了从闭包外部引入变量，可以将它们作为参数传递到后面的括号中（此处

aus[state]，state

），并在函数签名中命名它们（此处

st，state

）

工具书类

• 以及John Resig的学习高级JavaScript交互式教程
• 关于Mozilla开发者网络

进一步阅读

• 本·阿尔曼在他的博客上

---

st

是周围闭合的命名参数：

（功能（st，状态）{
// ...
})（澳大利亚[州]、州）；

这称为立即调用的函数表达式（通常称为自执行块或临时作用域），用于通过从周围上下文提取代码来“保存”状态

为了从闭包外部引入变量，可以将它们作为参数传递到后面的括号中（此处

aus[state]，state

），并在函数签名中命名它们（此处

st，state

）

工具书类

• 以及John Resig的学习高级JavaScript交互式教程
• 关于Mozilla开发者网络

进一步阅读

• 本·阿尔曼在他的博客上

---

+1原始代码中图案的名称为“IIFE”：+1原始代码中图案的名称为“IIFE”：