为什么属性初始化中的 jQuery 个对象是空的？

Question

'use strict';
var Controller = function Controller() {};

Controller.init = function() {
  if (!Controller.PROPERTIE.element || !Controller.PROPERTIE.indicator) {
    return 'Expected to find [data-controller] and [data-controller-to]';
  }

  Controller._start();
};

Controller.PROPERTIE = {
  element: $('[data-controller]'),
  indicator: $('[data-controller-to]'),
  state: false
};

Controller._start = function() {
  Controller.PROPERTIE.indicator.bind('click', Controller._toggle);
};

Controller._toggle = function() {
  Controller.PROPERTIE.element
    .animate({
      bottom: (Controller.PROPERTIE.state = !Controller.PROPERTIE.state) ? '-110' : '0'
    });
};

显然对象属性中的元素不存在，但它们确实存在！有人可以告诉我我是否不能那样使用 javascript？

也许有一些提升破坏了脚本？

我已经尝试将对象放在 init 之前，结果是一样的。

我知道我可以扩展原型，但我有理由这样使用。

谢谢。

Answer 1

我能想到三个可能的原因：

在解析 DOM 之前正在初始化代码。
您的 HTML 实际上不包含与这些选择器匹配的元素。
初始化此代码后，正在动态创建所需的元素。

在此声明中：

Controller.PROPERTIE = {
  element: $('[data-controller]'),
  indicator: $('[data-controller-to]'),
  state: false
};

这两个 jQuery 表达式将在解析此代码时立即计算。如果这段代码没有放在正文的最后，那么这些元素可能还不存在。

通常的解决方案是不在静态声明中初始化这些元素，而是在页面加载后通过调用函数来初始化它们。

如果你真的想让它们成为全局变量，那么你可以这样做：

$(document).ready(function() {
    Controller.PROPERTIE = {
      element: $('[data-controller]'),
      indicator: $('[data-controller-to]'),
      state: false
    };
});

但是，您还必须确保在此代码运行之前不要尝试使用它们。

我能想到的唯一其他可能原因是您的 DOM 不包含与您的两个选择器相匹配的元素。看起来这可能是这两个问题之一。由于您还没有向我们展示您打算匹配的 HTML 的整体页面结构，我们只能告诉您它可能是什么原因。

Answer 2

我感觉您认为 jQuery 对象未定义是因为：

if (!Controller.PROPERTIE.element || !Controller.PROPERTIE.indicator) {
    return 'Expected to find [data-controller] and [data-controller-to]';
  }

您必须记住 jQuery 构造函数 $() 将始终 return 一个对象。如果你真的想测试是否有一个选定的项目，你必须使用 jQuery 对象的长度属性。

if (!Controller.PROPERTIE.element.length || !Controller.PROPERTIE.indicator.length) {
    //element or indicator not there.
    return 'Expected to find [data-controller] and [data-controller-to]';
  }

为什么属性初始化中的 jQuery 个对象是空的？

Why are jQuery objects in property initialization empty?

javascript

hoisting

为什么 属性 初始化中的 jQuery 个对象是空的？

Why are jQuery objects in property initialization empty?

javascript

hoisting

为什么属性初始化中的 jQuery 个对象是空的？