在$(document).ready()中定义的函数如何调用？

Question

在一个外部JS文件中，我有以下代码：

$(document).ready(function() {
    var example = function(){ alert("hello") }
});

我想从我的html页面调用该函数，我该怎么做？

<img src="..." ondblclick="example()" />

n.b. 我知道jquery dblclick()，但是我想知道如何正确地完成上述操作。

注：我知道jQuery中的dblclick()方法，但是想了解如何正确地实现上述操作。

- ed209

Answer 1

$(document).ready(function() {
    window.example = function() {
        alert("hello")
    }
});

如果可能的话，可以在外部定义它。看起来它根本不必在文档就绪内定义。

- Esailija

---

@Raynos 我认为那个全局的“状态”才是邪恶的 :P - Esailija

Answer 2

最佳选择是将函数定义在document.ready()外部。在$(document).ready()事件中定义函数没有必要，因为如果你在$(document).ready()函数内部调用函数，那么文档一定已经准备好了。

不过，你也可以将函数定义在全局的window对象上，如下所示：

$(document).ready(function() {
    window.example = function(){ alert("hello") }
});

- jeff

---

我相信有些问题，使用var在doc.ready中不应该创建一个全局http://jsfiddle.net/KxGXP/。 - ajax333221

@ajax333221 - 哎呀，我复制了他的代码但忘记编辑它了。谢谢你发现了这个问题！ - jeff

Answer 3

这里提供的其他解决方案可以正常工作，但在您的项目结构中，最好的解决方案是从HTML中删除事件处理代码，并完全通过javascript连接事件（分离HTML / JS）。由于您的项目已经使用了jQuery，因此这非常容易实现。要做到这一点，您只需要在图像上放置某种标识：

<img id="example" src="..." />

那么，在你的 ready() 函数中，你只需要像这样连接事件代码：

$(document).ready(function() {
    $("#example").dblclick(function() {
        alert("Hello");
    });
});

这样做有以下优点：

1. 不会创建全局变量，减少全局命名空间污染。
2. 将HTML和JavaScript分离，使所有控制行为的代码都在一个紧凑的位置上，通常是一件好事。
3. 使用事件监听器比使用 .ondblclick 更具可扩展性，允许多个不同部分的代码在同一对象上使用不冲突的事件处理程序。

- jfriend00

Answer 4

如果您想从HTML中访问函数，则应将其设置为全局函数（实际上是window对象的属性）。但最佳实践是避免使用全局变量和函数，而是使用命名空间：

// let's publish our namespace to window object
if (!window.myNamespace){
    // creating an empty global object
    var myNamespace = {};
}

// and add our function to it
$(document).ready(function() {
    myNamespace.example = function(){ alert("hello"); }
});

我们可以在HTML中这样使用它：

我们可以像这样在HTML中使用：

<img src="..." ondblclick="myNamespace.example()" />

- Igor Zalutski

Answer 5

@Esailija已经正确回答了，但如果您想保持原样，只需删除var并使其全局化即可。

var example;
$(document).ready(function() {
  example = function() {
    alert("hello")
  }
});

如果您不使用var，则变量/函数/对象将成为全局的。使用var，您可以在document.ready函数中设置其上下文。

- codef0rmer

---

“全局”与“窗口属性”是一样的。换句话说，你的答案与Esailija的答案完全相同。 - Fyodor Soikin

@Fyodor Soikin：是的，我知道，但我只是试图解释var的用法。 - codef0rmer

如果你声明一个变量，始终使用 var。不使用它并创建一个全局变量是一种黑客技巧。你的代码将无法通过严格模式。 - Florian Margaine

正确的。我应该在调用 ready 函数之前定义变量。 - codef0rmer

Answer 6

您可以将函数声明移动到DOM就绪处理程序之外：

function example(){ alert("hello") }

$(document).ready(function() {
    // code
});

但更好的解决方案是将JavaScript保留在您的.js文件中，并避免使用内联事件处理程序。给您的元素一个ID并获取它：

<img src="..." id="imgid" />

$(document).ready(function() {
    document.getElementById("imgid").ondblclick = function(){ alert("hello") }
});

- Dennis