Javascript 包括不在页面中稍后加载

Question

我们有一个 Rails 应用程序，我们在 application.js 的 html head 中包含我们的应用程序依赖项:

//= require jquery
//= require analytics
// other stuff...

然后在各个页面上，我们在页面底部有一个用于分析的脚本标记:

<script>
  analytics.track('on that awesome page');
</script>

这通常工作正常，但偶尔我们会看到错误 analytics is not defined，最近一次是在 Chrome 43 上。因为所有内容都应该同步加载，所以这似乎应该在框，但我将脚本更改为:

<script>
  $(document).ready(function () {
    analytics.track('on that awesome page');
  });
</script>

现在，我们每隔一段时间就会看到 $ is not defined。我们没有看到来自同一 IP 的任何其他错误，否则我会怀疑 application.js 出现问题。还有其他想法为什么它可能会破裂吗？您可以查看示例页面 here .

完整的application.js:

// Polyfills
//= require es5-shim/es5-shim
//= require es5-shim/es5-sham
//= require polyfills
//
// Third party plugins
//= require isMobile/isMobile
//= require jquery
//
//= require jquery.ui.autocomplete
//= require jquery.ui.dialog
//= require jquery.ui.draggable
//= require jquery.ui.droppable
//= require jquery.ui.effect-fade
//= require jquery.ui.effect-slide
//= require jquery.ui.resizable
//= require jquery.ui.tooltip
//
//= require jquery_ujs
//= require underscore
//= require backbone
//= require backbone-sortable-collection
//= require bootstrap
//= require load-image
//= require react
//= require react_ujs
//= require classnames
//= require routie
//= require mathjs
//= require moment
//= require stink-bomb
//= require analytics
//
// Our code
//= require_self
//= require extensions
//= require extend
//= require models
//= require collections
//= require constants
//= require templates
//= require mixins
//= require helpers
//= require singletons
//= require actions
//
//= require object
//= require components
//= require form_filler
//= require campaigns
//= require form_requests
//= require group_wizard
//= require step_adder

Chalk = {};
underscore = _;

_.templateSettings = {
  evaluate:    /\{\{(.+?)\}\}/g,
  interpolate: /\{\{=(.+?)\}\}/g,
  escape:      /\{\{-(.+?)\}\}/g
};

moment.locale('en', {
  calendar: {
    lastDay: '[Yesterday at] LT',
    sameDay: '[Today at] LT',
    nextDay: '[Tomorrow at] LT',
    lastWeek: 'dddd [at] LT',
    nextWeek: '[Next] dddd [at] LT',
    sameElse: 'L LT'
  }
});

更新:

我们仍然偶尔会在生产中看到这一点。我们还在 application.js 之前加载脚本然后在其中引用它的情况下看到了它:

javascript_include_tag 'mathjs'
javascript_include_tag 'application'

我们经常看到 math is not defined 错误。我想知道在加载 mathjs 或其他阻止它加载的脚本期间是否发生错误，但事实上它发生在这么多不同的库上，而且很少发生，这似乎不太可能.我们确实进行了一些调试检查，以查看我们的 application.js 是否已完全加载，而且通常情况下似乎并未完全加载，即使稍后在页面中访问 Jquery 之类的内容也是如此。

这样做的一个动机是避免有关脚本运行时间过长的旧浏览器通知，但我们可能会放弃并将其全部拉入 application.js 以避免错误。

Answer 1

如果您不等待定义 analytics 的脚本加载，或者您没有定义加载 javascript 文件的顺序，就会发生这种情况。在尝试调用其方法 track 之前，请确保始终加载定义 analytics 的脚本。根据您的设置，脚本可能会以随机顺序加载，从而导致这种不可预测的行为。

你试图确保一切都已加载，但监听器 $(document).ready(function () {}); 只是确保 DOM 已准备就绪，而不是分析可用.在这里你有同样的问题。 $ 只是 jQuery，所以 $ is not defined 意味着 jQuery 还没有被加载。因此，您的脚本可能在加载 jQuery 之前出现并试图调用尚未定义的内容。