• 动态导入Js文件


    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);
        }
    };

  • 相关阅读:
    linux通过内容找文件的位置
    Mac通过端口查进程号
    执行brew update后显示Permission denied
    Linux通过进程ID查看文件路径
    Linux通过端口查进程号
    linux 如何查找命令的路径
    lua中冒号(:)与点号(.)的区别
    HTTP返回码301与302的区别
    vue使用animate.css类库实现动画
    vue过渡动画
  • 原文地址:https://www.cnblogs.com/sky-net/p/10030350.html
Copyright © 2020-2023  润新知