javascript - 在 jQuery 例程中使用外部 JS 对象

Question

我使用 CoffeScript 创建了一些 Javascript 对象。这些对象之一是实验对象:

class Experiment
  @clock
  @events

  constructor: (@params) -> 
    @events = new EventsTable
    @clock = 0        

  run: ->
    setInterval ->
      perform_routine
    , 1000

  perform_routine: ->
    events = @events.get(@clock)    

    for event in events
      if event['action'] == 'start'
        console.log('an event starts.')
      else
        console.log('an event has been finished.')

    console.log(@clock)
    @clock++

每次用户单击某个按钮时，都必须创建一个实验。考虑到这一点，我实现了一个 jQuery 触发器:

  $ ->
    $('#start-simulation').click (event) ->
      event.preventDefault();

      params = {}

      $('#simulation-parameters').find('input').each ->
        params[$(this).attr('name')] = $(this).val();

      simulation = new Experiment params
      simulation.run();

问题是我总是收到 Uncaught ReferenceError :实验未定义

由于一些研究，我还尝试使用 @ 定义类名，但这样做时，我在使用类内部的方法时遇到了很多错误。

这种行为对我来说似乎完全不自然，因为我正在以正确的顺序导入所有必要的文件(第一个实验，它们是带有 jQ​​uery 函数的文件)，但这可能是由于我缺乏 javascript 经验.

你知道在 jQuery 中使用 JS 外部对象的正确方法是什么吗？

Answer 1

您有几个问题:

1. CoffeeScript 将您的代码包装在 SIF 中以防止范围蔓延。这:

   class C
   

   变成这样:

   (function() {
       var C = // the JavaScript definition of C ...
   }).call(this);
   

   SIF 包装器是为了防止 CoffeeScript 中的任何内容意外污染全局命名空间。在您的例子中，Experiment JavaScript 变量隐藏在函数内部，因此它在任何其他 CoffeeScript 文件中都不可见。

   通常的浏览器解决方案是说 class @Experiment 使您的类成为全局对象的属性。更好的解决方案是手动命名事物；在其他事情发生之前你想说的某个地方:

   window.app = { } # where "app" is some namespace unique to your application
   

   然后你可以说class app.Experiment和new app.Experiment。

2. 在class级别，@是类本身。这意味着:

   class Experiment
     @clock
     @events
   

   声明了两个类属性(Experiment.clock 和 Experiment.events)，但忽略给它们赋值。这些属性不在原型(prototype)中，它们位于类函数本身中。您可能想说:

   class Experiment
     clock: undefined
     events: undefined
   

   如果您的目的是告诉外界 Experiment 实例具有 clock 和 events 属性。

3. 在 CoffeeScript 中，说 f 不会调用函数 f，它只是为您提供对 f 的引用，而无需费心将其存储在任何地方。要调用不带参数的函数，您可以说f()。另外，如果你想调用一个方法，你需要提供接收者。在您的情况下，您的构造函数应该更像这样:

   constructor: (@params) -> 
     @events = new EventsTable
     @clock = 0
     @create_cells()
     @create_calls()
   

4. 您的 run 方法与您的 构造函数 存在相同的“缺少接收者和缺少函数调用括号”问题。此外，当 setInterval 调用其回调时，它不提供任何特定的 @ (又名 this)，因此您需要一个绑定(bind)函数:

   run: -> setInterval (=> @perform_routine()), 1000
   # or
   run: -> setInterval @perform_routine.bind(@), 1000
   # or:
   perform_routine: => ...
   run: -> setInterval @perform_routine, 1000
   

   您可能想要存储 setInterval也在某个地方返回值，这样你就可以调用 clearInterval停止它:

   run: ->
     @interval = setInterval ...
   stop: ->
     clearInterval(@interval) if(@interval)
     @interval = undefined
   

您在其余的实验中可能会遇到类似的问题。