移除script标签text/javascript属性后出现jQuery is not defined错误原因问询

核心原因 #

该报错的本质是依赖jQuery的后续业务脚本，执行时机早于APP_FRAMEWORK.JS的执行时机，jQuery还没挂载到全局window对象就被调用，因此抛出$ is not defined。type="text/javascript"属性的有无会触发浏览器对defer属性的执行逻辑差异，是问题的直接诱因。

规则说明

1. defer属性仅对普通JavaScript外部脚本生效：浏览器默认缺省type的script标签就是text/javascript类型，带defer的这类脚本会异步加载，等到DOM全部解析完成、DOMContentLoaded事件触发前，按标签出现顺序执行。
2. 你页面中后续循环加载的业务脚本都没有加defer/async，属于同步阻塞脚本：会在标签被解析到时立刻加载并执行，执行完成后才会继续解析后续DOM。
3. 部分浏览器版本存在兼容性差异：显式声明type="text/javascript"时，浏览器会严格按规范保证defer脚本的执行顺序，而缺省type时可能错误降低defer脚本的执行优先级，导致其晚于后续同步业务脚本执行，触发依赖缺失报错。

修复方案 #

你可以根据业务场景任选一种：

1. 给所有业务脚本也加上defer属性：所有带defer的脚本会严格按标签出现顺序执行，保证主脚本先执行完成挂载jQuery，再执行业务脚本，不会出现依赖问题。
   参考代码：

<script src="{{ asset('js/app_framework.js') }}" defer></script>

@if(!empty($assets['js']))
    @foreach ($assets['js'] as $js)
        <script src="{{ asset($js) }}" defer></script>
    @endforeach
@endif

2. 去掉主脚本的defer属性，改为同步加载：主脚本会在后续业务脚本之前加载执行完成，保证jQuery提前挂载，适合主脚本体积不大的场景。
3. 保留type="text/javascript"属性：显式声明该属性完全符合HTML规范，没有任何副作用，既然当前声明后逻辑完全正常，直接保留即可。

内容的提问来源于stack exchange，提问作者José Victor