fineui/packages/fineui/src/core/platform/web/load.js

import $ from "jquery";

const _LOADED = {}; // alex:保存加载过的

function loadReady(src, must) {
    const $scripts = $("head script, body script");
    $.each($scripts, (i, item) => {
        if (item.src.indexOf(src) !== -1) {
            _LOADED[src] = true;
        }
    });
    const $links = $("head link");
    $.each($links, (i, item) => {
        if (item.href.indexOf(src) !== -1 && must) {
            _LOADED[src] = false;
            $(item).remove();
        }
    });
}

/**
 *
 * @param src
 * @param ext
 * @param must  强行加载
 */
export function $import(src, ext, must) {
    loadReady(src, must);
    // alex:如果已经加载过了的,直接return
    if (_LOADED[src] === true) {
        return;
    }
    if (ext === "css") {
        const link = document.createElement("link");
        link.rel = "stylesheet";
        link.type = "text/css";
        link.href = src;
        const head = document.getElementsByTagName("head")[0];
        head.appendChild(link);
        _LOADED[src] = true;
    } else {
        // alex:这里用同步调用的方式,必须等待ajax完成
        $.ajax({
            url: src,
            dataType: "script", // alex:指定dataType为script,jquery会帮忙做globalEval的事情
            async: false,
            cache: true,
            complete(res, status) {
                /*
                 * alex:发现jquery会很智能地判断一下返回的数据类型是不是script,然后做一个globalEval
                 * 所以当status为success时就不需要再把其中的内容加到script里面去了
                 */
                if (status === "success") {
                    _LOADED[src] = true;
                }
            },
        });
    }
}

/**
 * 同步加载javascript
 * @param uri
 * @returns {boolean}
 */
export function syncLoadScript(uri) {
    if (_LOADED[uri]) {
        return true;
    }
    const xhr = new XMLHttpRequest();
    xhr.open("GET", uri, false);
    xhr.send(null);
    if (xhr.status === 200) {
        const script = document.createElement("script");
        script.type = "text/javascript";
        script.text = xhr.responseText;
        document.head.appendChild(script);
        _LOADED[uri] = true;
        return true;
    }
    return false;
}

/**
 * 默认的异步加载javascript方法
 * @param uri
 * @returns {Promise<boolean>|Promise<unknown>}
 */
export function loadScript(uri) {
    if (_LOADED[uri]) {
        return Promise.resolve(true);
    }
    return new Promise(resolve => {
        const script = document.createElement("script");
        script.type = "application/javascript";
        script.src = uri;
        script.onload = function() {
            resolve(true);
        };
        document.head.appendChild(script);
        _LOADED[uri] = true;
    });
}

/**
 * 加载css方法,这没同步异步之分,都是同步的
 * @param uri
 * @returns {boolean}
 */
export function loadStyleSheet(uri) {
    if (_LOADED[uri]) {
        return true;
    }
    const link = document.createElement("link");
    link.type = "text/css";
    link.ref = "stylesheet";
    link.href = uri;
    document.head.appendChild(link);
    _LOADED[uri] = true;

    return true;
}


export function loadResource(opt) {
    const { src, async = false } = opt;
    let extension = opt.extension;
    if (!extension) {
        const match = src.match(/\.[^.]+$/g);
        if (match && match.length > 0) {
            extension = match[0];
        }
    }
    if (extension === ".css") {
        return loadStyleSheet(src);
    }
    if (async) {
        return loadScript(src);
    }

    return syncLoadScript(src);
}


export function loadResources(resources) {
    const asyncLoad = resources.some(resource => resource.async);

    if (asyncLoad) {
        return Promise.all(resources.map(resource => loadResource(resource)));
    }

    return resources.forEach(resource => {
        loadResource(resource);
    });
}