引入外部CDN库文件引用失效时自动载入本地库文件解决方法

前言

使用CDN可以减少带宽和http请求，也可以减少一些服务器的压力，
从而提升页面加载速度，也有利于提高用户体验。
但有一个问题：假如你使用的是百度静态资源库，某天，突然百度静态资源库崩了，那你网站引用的相应资源文件也会失效。

经常会使用外部CDN库文件来提高页面加载速度。但是，有时候CDN库文件可能出现问题无法加载，导致页面出错或无法正常使用。这时候，我们可以通过自动载入本地库文件的方式来解决这个问题。

实现方法很简单，只需要在引入外部CDN库文件时，添加一些判断逻辑，如果无法加载CDN文件，就自动引入本地库文件。

当然这种情况几率比较小，但为了防范于未然，我们还是需要尽可能的做到万无一失。

实现方法

方法一

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
 if (typeof jQuery == 'undefined') {
 　　document.write(unescape("%3Cscript src='/skin/mobile/js/jquery.min.js'%3E%3C/script%3E"));
 }
</script>

方法二

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>window.jQuery || document.write(unescape("%3Cscript src='/js/jquery.min.js'%3E%3C/script%3E"))</script>

其中代码中%3C和%3E分别代表<和>，并通过unescape()函数解码还原。

附带列举下常用的cdn公共库：
jsdelivr： jsdelivr.com
bootcdn： bootcdn.cn
staticfile： staticfile cdn
bytedance： cdn.bytedance.com