CDN后备问题

Question

我对于是否使用CDN感到困惑，所以我通过了这些链接link1和link2

他们告诉使用本地脚本作为CDN的后备

所以我保留了这段代码

    <script src="https://secure.skypeassets.com/i/scom/js/skype-uri.js" async></script>
    <script>
    window.Skype || document.write('<script src="javascripts/skype-uri.js" async>\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
    <script>
    window.angular || document.write('<script src="javascripts/angular.min.js">\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
    <script>
    window['angular-animate'] || document.write('<script src="javascripts/angular-animate.min.js">\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-aria.min.js"></script>
    <script>
    window['angular-aria'] || document.write('<script src="javascripts/angular-aria.min.js">\x3C/script>')
    </script>
    <!--  -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.4/angular-material.min.js"></script>
    <script>
    window['angular-material'] || document.write('<script src="javascripts/angular-material.min.js">\x3C/script>')
    </script>

问题是它获取本地文件，并且也从CDN获取相同的文件。

当我点击页面并通过Charles代理（或任何其他网络监视工具）进行监视时

Kinda很奇怪，但无法在这里找出问题。

Answer 1

使用window.angular || /* fallback code*/脚本的后备 window.angular || /* fallback code*/看起来不错，并且可以正常工作（对我而言有效）。

请记住，测试不是引用脚本名称，而是检查是否存在一个已知的全局变量（如果实际上已经加载了脚本）应该设置该变量。 因此，对于其他脚本，您需要知道它们设置了哪些全局变量（如果有的话）或它们向现有对象添加了哪些方法/属性并进行了检查。

顺便说一句，您的Skype脚本上的async标志将破坏这种测试，因为有一个很好的方法可以在浏览器获取并解析外部脚本之前执行对Skype的检查。

至于样式表后备，这可以正常工作（即使本地副本也失败-浏览器以某种方式处理此问题;））：

<link rel="stylesheet" href="//cdnurl/style.css" onerror="this.href='localcopy.css'" />

编辑：要检查角度模块，可以在try-catch块中使用angular.module('moduleName') （受此答案启发）：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-animate.min.js"></script>
<script>
try {
  angular.module('ngAnimate')
} catch(e){
  document.write('<script src="javascripts/angular-animate.min.js">\x3C/script>')
}
</script>