JS资源容灾

JS资源容灾

为了项目的首次加载速度快,有时候我们会使用一些在线的插件引入(例如cdn引入插件),但是在线的插件难免会出现一些不可避免的问题,例如插件服务器崩溃了、时间久远导致插件不再更新的问题等等,这些都会导致项目引入的在线插件无法正常使用,可能会导致项目无法正常使用。因此,js资源的容灾还是很有必要的。

思路

在script标签那里添加一个onerror方法,当在线资源加载失败时候,在onerror方法里面手动添加静态js资源

具体实现

下面以引入clipboard插件进行测试


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  
  <script>
    function jsLoadErr (e, s) {
      console.log(e, s)
      alert('js加载失败了')
      var new_s = document.createElement('script');
      new_s.setAttribute('type', 'text/javascript');
      new_s.setAttribute('src', s);
      var head = document.getElementsByTagName('head')[0];
      head.appendChild(new_s);
      // 移除在线加载失败的script
      e.remove();
    }
  script>
  
  
  
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2/clipboard.min.js"
    onerror="jsLoadErr(this, 'static/pulugins/clipboard/clipboard.min.js')">
  script>
head>
<body>
  <h1 class="test">js容灾h1>
  <script>
    window.onload = function () {
      var clipboard = new ClipboardJS('.test')
      console.log('剪贴板', clipboard)
    }
  script>
body>
html>


你可能感兴趣的:(JS,js,前端)