Question

我正在使用jQuery Class插件：

jQuery(document).ready(function($) {
    window.SSK.calendar = new(Class.extend({
    filter_by_filtered_names: function() {
      console.log('foobar!');
    },
      init: function() {
        if ( window.location.href.match(/name_filters/) ) {
          SSK.calendar.filter_by_filtered_names();
        };
      }
    }))
});

出于某种原因，这会在负载时返回：

SSK.calendar is undefined

这告诉我插件类在自己的调用之前没有加载。确实非常奇怪。好奇，如果有人知道补救措施吗？

Answer 1

即使我不知道Class如何运作，这种行为对我来说似乎也很有意义：

Class.extend(...)创建一个新的构造函数（我假设）。 new执行构造函数，而构造函数又调用init。结果已分配给window.SSK.calendar。您看，init在实例化时被调用，这在实例分配给window.SSK.calendar之前发生。

这是一个简化的例子：

function MyClass() {
    this.bar = 'baz';
    console.log(foo.bar);
}

var foo = new MyClass();

这将失败，因为在调用构造函数时foo仍为undefined。该实例是函数调用的返回值，因此foo在调用之前不能包含对实例的引用。

您可以通过简单地使用this来引用实例来解决您的问题：

init: function() { if ( window.location.href.match(/name_filters/) ) { // better in this case: if(/name_filters/.test(window.location.href)) this.filter_by_filtered_names(); }; }

插件的文档应该提到如何从方法中引用实例。

Answer 2

似乎您使用两个onReady侦听器：jQuery(document).ready(fn)和$(fn)完全等效。实际上，当外部函数执行时，您将内部函数附加到函数队列的末尾。尝试访问之后未注册的任何onDOMready函数中的SSK.calendar时，它将无法使用。

示例：

$(function(){
    console.log("A");
    $(function(){
       console.log("B");
    });
    console.log("C");
});
$(function(){
    console.log("D");
});

将记录：

A
C
D
B

jQuery没有准备好，但仍在实例化

2 个答案: