2011-12-19 65 views
7

我现在正在向使用Coffeescript编写所有JavaScript代码的过渡,但是我很沮丧,因为最简单的示例导致了我的问题。截至目前,我已经做了比研究一个多小时,而能够找到这个问题的答案...为什么这个函数调用不能使用Coffeescript?

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"></script> 
    <link href="sheet.css" rel="stylesheet" type="text/css" media="screen" /> 
    <script type="text/coffeescript"> 
    $ -> 
     sayHi() 

    sayHi = -> 
     alert 'Hi there!' 
    </script> 
</head>  
<body> 
    <div id="all"> 
    </div> 
</body> 
</html> 

如从上面的代码清楚,我只是试图使调用sayHi()函数在jQuery的ready处理程序中工作。但我得到的错误是:

遗漏的类型错误:未定义是不是一个函数

请帮助我,根据编译器和教程我读过这个“应该”工作,但我不知道我在做什么可怕的错误,因为它不运行:(

+0

我最后一次检查,浏览器不具备的CoffeeScript翻译...或者是,“咖啡sript.js”的剧本翻译的CoffeeScript代码为JavaScript? – 2011-12-19 17:58:43

+0

您是否尝试翻转这两条语句?我从来没有使用过CoffeeScript,但我假设这是由于你在调用方法/函数之前已经调用过了(比如回到C) – 2011-12-19 17:59:44

+0

@ŠimeVidas这意味着我在做什么错了....? – jlstr 2011-12-19 18:00:15

回答

11

text/coffeescript标签有一个关键区别text/javascript标签,他们不运行,直到文档加载,这是因为咖啡脚本库必须找到所有咖啡脚本标签并编译它们,并且必须等到DOM r所以它可以肯定地找到他们。

另一个问题是,如果事件已经发生,jQuery将立即触发DOM就绪回调。在这种情况下,它已经。

所以,当这个被编译成JS你得到这个:

var sayHi; 
$(function() { 
    return sayHi(); 
}); 
sayHi = function() { 
    return alert('Hi there!'); 
}; 

那么什么情况是:

  • 声明sayHi变量没有价值,使它undefined
  • 为使用此变量的jQuery创建DOM就绪回调。
  • jQuery立即运行回调函数,因为DOM准​​备已经发生。
  • 执行回调函数,并尝试运行sayHi(),该函数尚未定义。
  • 回调运行后,sayHi被设置为您想要运行的功能。

现在,如果这是一个正常的JS代码,它可能加载文档之前运行,然后因为时间回调居然跑,然后sayHi会被正确分配它会工作得很好。

要修复它,您应该在回调中分配函数BEFORE您运行通过。或者你可以完全跳过$(->),因为你知道DOM已经准备好了。但是,真的,这是你真的不应该使用coffeescript标签的一个主要原因。这跟使用JS标签不一样。其中一个原因很多,这不是在真实网站上使用CoffeeScript的推荐方法。

您的浏览器中看到它像一个负责任的开发商:)

+0

但是浏览器立即执行所有'

4

翻转的语句之前那么编译你的咖啡脚本。看起来像CoffeeScript和老C有着相同的限制,在这种情况下,只有在按照代码的顺序定义之前,您才能调用函数/方法。

所以使用

<script type="text/coffeescript"> 
    sayHi = -> 
    alert 'Hi there!' 

    $ -> 
    sayHi() 
</script> 
+0

你可以,呃。它会起作用,除非在这种情况下,回调立即运行。如果它后来运行,它会工作得很好。 – 2011-12-19 18:14:33

相关问题