多PHP文件架构下如何正确加载jQuery？

嘿，这个问题我太熟了！你碰到的Uncaught ReferenceError: $ is not defined，核心原因就是你给jQuery脚本加的async属性在搞鬼，咱们一步步理清楚解决办法：

当你给<script>标签加上async，浏览器会开启异步加载模式——它不会等jQuery脚本下载并解析完成，就直接往下执行你的document.ready代码了。这时候$（jQuery的别名）还没被定义，自然就抛出错误啦。

1. 直接删掉async属性（最简单省心） #

把jQuery脚本的async去掉，让浏览器按顺序加载资源：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

这样浏览器会先加载完jQuery，再执行后面依赖它的代码，$就能正常调用了。

2. 用defer替代async（兼顾性能与顺序） #

如果不想放弃异步加载的性能优势，可以把async换成defer：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" defer></script>

defer的特性是：异步加载脚本，但会等到DOM解析完成后按脚本的引入顺序执行。这样既不会阻塞页面渲染，又能保证jQuery在你的document.ready代码之前加载完成。

3. 把依赖代码放到jQuery加载完成的回调里（保留async的情况下） #

如果一定要用async，那可以把你的业务代码绑定到jQuery脚本的加载完成事件上，确保jQuery准备好再执行：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" async onload="runMyJQueryCode()"></script>
<script type="text/javascript">
function runMyJQueryCode() {
    $(document).ready(function() {
        // 这里写你的jQuery代码
    });
}
</script>

或者用原生JS动态创建脚本并监听加载事件，更灵活：

var jqueryScript = document.createElement('script');
jqueryScript.src = 'http://code.jquery.com/jquery-latest.min.js';
jqueryScript.onload = function() {
    $(document).ready(function() {
        // 你的业务代码
    });
};
document.head.appendChild(jqueryScript);

4. 改用原生JS的DOM加载事件（完全绕开jQuery顺序问题） #

如果你的代码逻辑不需要太多jQuery特性，也可以直接用原生JS的DOMContentLoaded事件替代jQuery的ready：

document.addEventListener('DOMContentLoaded', function() {
    // 这里写你的代码，不用依赖$
});

内容的提问来源于stack exchange，提问作者Koga