javascript - 如何使用 defer 进行内联 Javascript

Question

我正在使用 Laravel 用 PHP 开发一个网页。我想对我的 javascript 文件使用属性“defer”或“async”，但我有一些问题。 在每个文档中，我加载一个标题，其中包含:

{{ Html::script('js/jquery.js', array('defer' => 'defer')) }}
{{ Html::script('js/bootstrap.min.js', array('defer' => 'defer')) }}

{{ Html::script('js/pjax.js', array('defer' => 'defer')) }}
{{ Html::script('js/jquery.cookie.js', array('defer' => 'defer')) }}
{{ Html::script('js/blur.js', array('defer' => 'defer')) }}
{{ Html::script('js/scrollbar.js', array('defer' => 'defer')) }}

<!--Form-->
{{ Html::script('js/parsley/parsley.remote.js', array('defer' => 'defer')) }}
{{ Html::script('js/parsley/parsley.js', array('defer' => 'defer')) }}
{{ Html::script('js/parsley/es.js', array('defer' => 'defer')) }}
{{ Html::script('js/icheck.js', array('defer' => 'defer')) }}

<!--Funciones-->
{{ Html::script('js/funciones.js', array('defer' => 'defer')) }}

如果我给它们属性 async，它们就无法正常工作，因为其中一些是模块化的。 所以我尝试过使用 defer 属性，但没有这个问题，但是现在我在内联 javascript 上遇到了问题，因为它调用了 header 的函数。 (这是在页面底部)。

<script type="text/javascript">

window.addEventListener('popstate', function(e) { 
    eval(document.getElementById("script_biblioteca").innerHTML);
});


//Scripts on back/forward
section = 'biblioteca';
url_section = "{{Request::root()}}/"+section+"/";

activar_menu('#menu_biblioteca');
buscador('#dinamic_search', '#main', section);

</script>

错误:

ReferenceError: $ is not defined
ReferenceError: activar_menu is not defined

我该如何解决这个问题？ 而且，我是否正确使用了“defer”属性？

Answer 1

一种选择是使用 Gulp 将所有脚本连接到一个脚本中。

这样你就不会遇到这个问题，也不必打开多个浏览器连接来下载多个 js 文件。

gulp concat scripts in order?

当您尝试使用 Jquery 但尚未加载时，您还会收到以下消息:

ReferenceError: $ is not defined