动态导入Js文件

Posted 2021-01-23 壹飛臺

var ScriptLoader = {
    worker: 0,
    isWait: false,
    readyQueue: [],
    callback: [],
    timer: null,

    wait: function () {
        if (!this._isComplateTask()) {
            this.isWait = true;
            this.readyQueue.unshift(\'wait\');
        }
        //console.log(\'wait is true\');
        return this;
    },

    _isComplateTask: function () {
        return this.worker === 0;
    },

    loadJs: function (url, async, callback) {
        console.log(\'load js \' + url);
        if (this.isWait) {
            // 将js加载到队列
            this.readyQueue.unshift(url);
            this.callback.unshift(callback);

            if (!this.timer) {
            // 定时处理队列
                var that = this;
                this.timer = setInterval(function () {
                    if (that.readyQueue.length === 0) {
                    // 队列消费完, 清除定时器
                        clearInterval(that.timer);
                        that.timer = null;
                    } else if (that._isComplateTask()) {
                        that._loadReady();
                    }
                }, 50);
            }
        } else {
            this._realLoad(url, async, callback);
        }
        return this;
    },

    /**
     * 消费队列
     */
    _loadReady: function () {
        var url;
        while (this.readyQueue.length > 0) {
            url = this.readyQueue.pop();
            if (url === \'wait\') {
                if (!this._isComplateTask()) {
                    this.isWait = true;
                    break;
                }
            } else {
                this._realLoad(url, true, this.callback.pop());
            }
        }
    },

    _realLoad: function (url, async, callback) {
        this.worker++;
        var that = this;
        console.log(\'start load js \' + url);
        this._loadJsFile(url, function () {
            that.worker--;
            if (that.worker === 0) {
                //console.log(\'wait is false\');
                that.isWait = false;
            }
            if(callback){
                callback();
            }
        }, async);
    },

    _loadJsFile: function (file, callback, async) {
        var head, d = document;
        ((head = d.getElementsByTagName(\'head\')[0]) || (head = d.body.parentNode.appendChild(d.createElement("head"))));

        var script = d.createElement("script");
        script.type = "text/javascript";
        script.src = file;
        script.charset = \'UTF-8\';
        if (async) {
            script.async = true;
        }

        if (script.readyState) {//IE
            script.onreadystatechange = function () {
                if (script.readyState === "loaded" || script.readyState === "complete") {
                    script.onreadystatechange = null;
                    callback();
                }
            };
        } else {//其他浏览器
            script.onload = function () {
                callback();
            };
        }

        head.appendChild(script);
    }
};