javascript - Jade bug 脚本加载顺序困惑

标签 javascript jquery-ui pug metronic

我正在尝试在我的网页上使用 Metronic 管理主题,并希望将我的模板转换为 jade/pug。不幸的是,我遇到了一个无法很好解决的错误。每当 Metronic 加载页面时,它都会首先加载核心脚本,然后根据页面上的其他内容加载页面特定的插件和脚本。为了模仿此功能,我创建了一个 footer.pug 文件,其中包含核心插件以及页面特定插件和脚本的 block :

    // BEGIN CORE PLUGINS
script(src='../assets/global/plugins/jquery.min.js', type='text/javascript')
script(src='../assets/global/plugins/bootstrap/js/bootstrap.min.js', type='text/javascript')
script(src='../assets/global/plugins/js.cookie.min.js', type='text/javascript')
script(src='../assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js', type='text/javascript')
script(src='../assets/global/plugins/jquery.blockui.min.js', type='text/javascript')
script(src='../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js', type='text/javascript')
// END CORE PLUGINS

// BEGIN PAGE LEVEL PLUGINS
block page_level_plugins
// END PAGE LEVEL PLUGINS

// BEGIN THEME GLOBAL SCRIPTS
script(src='../assets/global/scripts/app.min.js', type='text/javascript')
// END THEME GLOBAL SCRIPTS

// BEGIN PAGE LEVEL SCRIPTS
block page_level_scripts
// END PAGE LEVEL SCRIPTS

// BEGIN THEME LAYOUT SCRIPTS
script(src='../assets/layouts/layout/scripts/layout.min.js', type='text/javascript')
script(src='../assets/layouts/global/scripts/quick-sidebar.min.js', type='text/javascript')
script(src='../assets/layouts/global/scripts/quick-nav.min.js', type='text/javascript')
// END THEME LAYOUT SCRIPTS

这个 footer.pug 文件包含在我的简单的 layout.pug 中:

doctype html
html
  head
    if title
      title= title
    else
      title Template page
    include head
  body.page-header-fixed.page-sidebar-closed-hide-logo.page-content-white.page-md
    .page-wrapper
      include header
      .page-container
        .page-content-wrapper
          .page-content
            block content
  include footer

当我编写实际网页时,我扩展了layout.pug并在末尾添加了一个名为page_level_plugins的 block

extends partials/layout
block content
  if title
    h1= title
  ...

  block page_level_plugins
    script(src='../assets/global/plugins/jquery-ui/jquery-ui.min.js', type='text/javascript')

当我查看浏览器检查器时,已创建正确的 html,脚本的顺序正确 javascript files are in correct order

但是,当我查看网络选项卡时,我可以看到 JQueryUI 已在 JQuery 之前下载:

Scripts are loaded in the wrong order

我在控制台中收到错误,我试图在 JQuery 之前加载 JQueryUI。由于某种原因,我收到两次错误:

Console error

有没有人找到解决这个问题的方法?

最佳答案

这是一个解决方法。这并不是真正的 bug 解决方案:我对 JQueryUI 脚本库使用了 defer 属性,如下所示:

 block page_level_plugins
    script(defer src='../assets/global/plugins/jquery-ui/jquery-ui.min.js', type='text/javascript')

关于javascript - Jade bug 脚本加载顺序困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46979947/

相关文章:

jquery-ui - jquery datepicker 动画选项不起作用

arrays - 如何提取 Pug 数组中每个第一项的值

javascript - 将重叠标记 Spiderfier 与 Google map v3 集成后不显示任何标记

javascript - 将文本框的值发送到jquery函数

javascript - 为什么 'string' + undefined => 'stringundefined'?

javascript - 按索引数组过滤数组

javascript - 将字符串分成 n 个字符的 block 并应用替换

javascript - 使用 jQuery UI Draggable 拖放纯 HTML?

jquery - 将项目拖到父级之外并进入 UI 对话框

javascript - 使用 includes、extends 和 blocks 时,jade 脚本加载顺序似乎很奇怪