前言
偶然发现的一个问题,全局的 aplayer 插件在站内跳转的时候会重新加载,让人感觉非常难受。
正文
回去跑了几天前的代码,发现是 ok 的,可这几天改动的地方很多,很难定位问题在哪里。这里先记上一笔:
版本控制太重要了!!
版本控制太重要了!!
版本控制太重要了!!
初步判断问题出在 博客根目录 \themes\Sakura\layout\_partial\footer.ejs, debug 过程对我这个前端小白来说有些残忍,直接上代码:
错误代码
<script type="text/javascript" src="/js/lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript" src="/js/InsightSearch.js"></script>
<!-- fancybox 大图查看 需 jq -->
<link rel="stylesheet" href="/css/jquery.fancybox.min.css" media="all">
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>
这里需要将第 7 行的 jquery 插件引入代码提前,防止第 1 行的 lib.min.js
文件需要用到 jquery 语法的时候加载出现错误。
修复完成的代码
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/js/lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript" src="/js/InsightSearch.js"></script>
<!-- fancybox 大图查看 需 jq -->
<link rel="stylesheet" href="/css/jquery.fancybox.min.css" media="all">
<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>
最后运行,搞定。
总结
在导入 js 和 jquery 插件的时候,一定要先导入 jquery 插件,防止浏览器无法解析 js 中需要用到的 jquery 语法。按照 html 的解析顺序,js 也应该是放在最后导入的。