前言

偶然发现的一个问题,全局的aplayer插件在站内跳转的时候会重新加载,让人感觉非常难受。

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也应该是放在最后导入的。

参考资料

jquery导入方法及注意问题

Q.E.D.


The best thing you can do at work hard.