zoukankan      html  css  js  c++  java
  • 动态 加载js,css文件

    interface File {
      type: 'js'|'css';
      url: string;
    }
    
    type libKey = 'mtstatSdk'|'elementUI'|'weChatJSSDK';
    
    const libMap: Record<libKey, {
      files: File[];
      loaded: boolean;
    }> = {
      jsName: {
        files: [{
          type: 'js',
          url: 'xxx.js',
        }],
        loaded: false,
      },
      elementUI: {
        files: [{
          type: 'js',
          url: '//cdn.staticfile.org/element-ui/2.15.1/index.min.js',
        }, {
          type: 'css',
          url: '//cdn.staticfile.org/element-ui/2.15.1/theme-chalk/index.min.css',
        }],
        loaded: false,
      },
      weChatJSSDK: {
        files: [{
          type: 'js',
          url: 'https://res.wx.qq.com/open/js/jweixin-1.6.0.js',
        }],
        loaded: false,
      },
    };
    
    function loadJsFile(file: File): Promise<void> {
      return new Promise((resolve, reject) => {
        try {
          const script = document.createElement('script');
          script.src = file.url;
          script.onload = () => {
            resolve();
          };
          setTimeout(() => {
            reject(new Error(`Failed to load file: ${file.url}`));
          }, 3000);
          document.body.appendChild(script);
        } catch (e) {
          reject();
        }
      });
    }
    
    function loadCssFile(file: File): Promise<void> {
      return new Promise((resolve, reject) => {
        try {
          const link = document.createElement('link');
          link.setAttribute('rel', 'stylesheet');
          link.href = file.url;
          link.onload = () => {
            resolve();
          };
          document.body.appendChild(link);
        } catch (e) {
          reject();
        }
      });
    }
    
    // eslint-disable-next-line import/prefer-default-export
    export async function ensure(libKey: libKey): Promise<void> {
      const lib = libMap[libKey];
      if (!lib) {
        throw new Error(`Invalid libKey: ${libKey}`);
      }
      if (lib.loaded === true) return;
      await Promise.all(
        lib.files.map(file => {
          if (file.type === 'js') {
            return loadJsFile(file);
          }
          if (file.type === 'css') {
            return loadCssFile(file);
          }
          return Promise.resolve();
        }),
      ).then(() => {
        lib.loaded = true;
      });
    }
  • 相关阅读:
    oc基础-oc之集合NSDictionary,NSMutableDictionary
    Pythonic是什么?
    Python 单例模式
    开通博客第一天
    webstrorm快捷键整理
    Javascript设计模式(一)
    遍历json创建树状表(首先的前提条件是要引入jquery的jquery treeTable插件)
    关于高性能javascript 笔记
    css animation 动画的制作
    canvas画扇形图(本文来自于http://jo2.org/html5-canvas-sector/)
  • 原文地址:https://www.cnblogs.com/wangxirui/p/14929984.html
Copyright © 2011-2022 走看看