使用appendChild引导

Question

我用的是引导带使用香草javascript。

index.html

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
</head>
<body>
  <script src="router.js"></script>
  <div id="my-app"></div>
</body>

</html>

router.js

window.addEventListener('load', () => {
  if (window.location.pathname === '/register') {
    const myApp = document.getElementsByTagName('head')[0]
    const layoutScript = document.createElement('script')
    const jQuery = document.createElement('script')
    const bootStrapJs = document.createElement('script')
    const jQueryCookie = document.createElement('script')

    const bootStrapMinCss = document.createElement('link')
    const bootStrapThemeCss = document.createElement('link')

    jQuery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'

    bootStrapMinCss.type = 'text/css'
    bootStrapMinCss.rel = 'stylesheet'
    bootStrapMinCss.href = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'

    bootStrapThemeCss.type = 'text/css'
    bootStrapThemeCss.rel = 'stylesheet'
    bootStrapThemeCss.href = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css'

    bootStrapJs.src = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'

    jQueryCookie.type = 'text/javascript'
    jQueryCookie.src = 'https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js'

    layoutScript.type = 'text/javascript'
    layoutScript.src = 'javascripts/views/layout.js'

    myApp.appendChild(jQuery)
    myApp.appendChild(jQueryCookie)
    myApp.appendChild(bootStrapJs)
    myApp.appendChild(bootStrapMinCss)
    myApp.appendChild(bootStrapThemeCss)
    myApp.appendChild(layoutScript)
  }
})

页面加载得很好，样式设计与我所期望的一样。然而，我一直有两个错误：

Uncaught ReferenceError: jQuery is not defined

和

Uncaught Error: Bootstrap's JavaScript requires jQuery`

当将这些脚本文件直接加载到index.html时，我不会收到任何错误。但是，我想使用JS来完成这个任务。

引导需要jQuery，所以我先加载jQuery，然后加载所有其他资产，，那么为什么浏览器认为jQuery没有定义呢？

截图如下：

​

​

更新：

通过将jQuery导入移动到我的index.html，两个错误都消失了。所以，index.html应该是这样的：

<!DOCTYPE html>
<html>
<head>
  <title>My App</title>
  <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous">
  </script>
</head>
<body>
  <script src="router.js"></script>
  <div id="my-app"></div>
</body>

</html>

这是更好的，但仍然不能解释为什么我不能在我的路由器做同样的事情，使用普通的JS。

Answer 1

将常量名称jQuery更改为任何其他名称，因为jQuery是保留关键字。

const load_jquery = document.createElement('script')
load_jquery.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'
myApp.appendChild(load_jquery)

Answer 2

问题是，由于您是动态加载脚本--它们不是以同步方式加载的，也就是说，在加载jquery之前，可能会加载引导脚本。

您可以尝试在jquery脚本的加载回调中加载rest或脚本。

  jQuery.addEventListener('load', () => {
    myApp.appendChild(jQueryCookie)
    myApp.appendChild(bootStrapJs)
    myApp.appendChild(bootStrapMinCss)
    myApp.appendChild(bootStrapThemeCss)
    myApp.appendChild(layoutScript)
  });
  myApp.appendChild(jQuery)