在 document.ready 上运行 CoffeeScript 类

Question

我有

class Main
   test:->
      alert "yay!"

coffeescript，我想在我的index.html 中运行它，

<script>
    $(function(){
        //and obv Main.test(); doesn't work
    });
</script>

网站上有一个注释，它说它不起作用。但我找不到如何让它发挥作用。有什么想法吗？我需要找出 Coffeescript 闭包包装器是什么。

或者 Coffeescript 是否在 document.ready 之后执行？

谢谢！

Answer 1

要在 document.ready 之后执行 Coffeescript，您可以像这样使用 jQuery：

$ ->
  # Put your function code here
  init()

所做的就是运行 jQuery(function () {callback... })，就像此链接的第三部分一样：
http://api.jquery.com/jQuery/

基本上是这样说的：

jQuery(callback) 返回：jQuery
描述：绑定一个在 DOM 加载完成时执行的函数。

我在文档之外声明所有类等，然后调用 init 函数以使其在适当的时间运行。

我希望这有帮助！

Answer 2

主类

尝试使用 class @Main 代替。

obv Main.test();不起作用

对吧。应为 new Main().test() 或 Main::test()。

coffeescript 是否在 document.ready 之后执行？

假设您通过 extras/coffee-script.js 执行它 并使用 jQuery，是的。

Answer 3

Coffeescript 将您的代码包装在函数调用中，这样您就不会意外覆盖全局变量。

如果您希望任何变量、函数或类成为全局变量（以便其他文件可以访问它们），则需要通过将它们附加到 this 或 window。

# Stays within the function scope, so you can't access it outside the file
myNotGlobalFunction -> return

# Attaches it to `this` aka `window`, so can be accessed globally
this.myGlobalFunction -> return

# A shortcut using @ which is an alias to `this.`
@myOtherGlobalFunction -> return

这编译为：

(function() {
  myNotGlobalFunction(function() {
    return;
  });
  this.myGlobalFunction(function() {
    return;
  });
  this.myOtherGlobalFunction(function() {
    return;
  });
}).call(this);

Answer 4

我以前也遇到过这个问题。首先，由于您正在定义一个类，因此您需要实例化它。然后您可以在实例上调用 test 函数：

<script>
    $(function(){
        var an_instance_of_main = new Main();
        an_instance_of_main.test();
    });
</script>

但是，您可能已经注意到浏览器找不到您的 Main 类。这是因为，当编译 CoffeeScript 时，它会在类定义周围包装一个自执行函数，以防止 Main 被全局访问。如果你想让它全局可访问，你可以在它前面加上 window: 前缀

class window.Main
   test:->
      alert "yay!"

，或者在定义它之后赋值：

class Main
   test:->
      alert "yay!"

window.Main = Main