我可以在带有把手的模板 JS 之后加载页面级 JS 吗？答案

【问题标题】：Can I load page level JS after template JS with handlebars?我可以在带有把手的模板 JS 之后加载页面级 JS 吗？
【发布时间】：2016-07-07 14:35:48
【问题描述】：

我同时使用车把和传单。我的库（传单）与我的主要内容下方的一个缩小的 js 文件一起加载到模板中。

主模板

  <main class="app-content">
    {{{body}}}
  </main>
  {{> footer }}
  <!-- jQuery first, then Bootstrap JS. -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.1/semantic.min.js"></script>
  <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
  <script src='/js/main.min.js'></script>

我相信这是最佳做法。我有一些页面，其中传递了要在传单中呈现的映射数据。我如何让这些数据在页面级 JS 在传单库之前加载时很好地流动，当然，这不起作用。

单一视图

<script>
$(function() {
  var map = L.map('map').setView([{{data.lat}}, {{data.lng}}], 9);
  var os = new L.BingLayer("XXXXXXXX", { type: 'OrdnanceSurvey' });
  os.addTo(map)
});
</script>

欢迎任何指点。

【问题讨论】：

标签： javascript handlebars.js leaflet

【解决方案1】：

您确定因为传单被放置在您的脚本之后，这不起作用吗？

由于您将代码包装在jQuery's document ready shorthand function $(function () {}) 中，因此它应该仅在您页面的 DOM 准备好后执行，包括所有已加载和执行的同步脚本。因此，您的代码将在 Leaflet 脚本被加载并执行后执行，即使它的标签位于页面正文的底部。

然而在您的架构中还有另一个问题……它是 jQuery 本身在您的代码之后加载。因此，当您的代码被解析时，jQuery 的 $ 对象尚未分配！

一个简单的解决方法是在页面脚本之前至少加载 jQuery。

演示：http://plnkr.co/edit/LujU9IfGJ9AvJGjr5jIK?p=preview

另一种解决方案是将页面脚本与内容分开，并将其显示到特定的占位符中，至少在 jQuery 脚本之后。

【讨论】：

谢谢，这是一个很好的建议，和我得出的结论一样。