动态导入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);
    }
};

原文地址:https://www.cnblogs.com/sky-net/p/10030350.html

时间: 2024-07-29 22:04:39

动态导入Js文件的相关文章

自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 当你用$.load("dir/my-page.jsp"); 或xhr.request("server/to-my-page");等异步请求加载html页面的时候,在页面中导入js文件用本插件进行引入的话, 那么其他请求的页面中也导入了和前面页面相当的js文件的情况下,那这些js文件就不需要重新引入.插件会自动忽略之前已

iOS 项目导入js文件

一.iOS项目中导入js文件 一般情况下把js文件添加到项目中通常会直接copy到项目中(拖拽),这里的js文件可能只有一个层级(一个文件夹包含所有的js文件),也有可能分很多文件夹,将js文件导入项目的时候可以直接拖拽到项目中文件夹,项目会提示文件copy,如下图1-1所示.这里需要选择Create folder references 这样文件夹显示蓝色,如图1-2所示.如果选择Create groups创建,在项目运行的时候编译js文件,如果js文件只在同一个文件夹内运行是成功的,但是如果是

动态引入Js文件

var src = "/Scripts/Test.js"; $("<script type = 'text/javascript' src='" + src + "'><\/script>").appendTo("head"); //动态加载 TestAlert123123(); //调用Test.js中的函数 二.顺序添加(QQ) <img src="1.jpg" width

vue中如何在本地导入js文件

import {setStore,setUser,getStore,removeStore} from "../../../public/localstory" 在导入js文件时,推荐大家可以先看下ES6的有关内容 http://es6.ruanyifeng.com/#docs/module import {setStore,setUser,getStore,removeStore} from "../../../public/localstory"//其中 set

myeclipse_导入js文件报错

myeclipse导入外部的js文件时.myeclipse自动报错.外部导入的官方js包应该是没有错的. 可以选中报错的js文件-->右键-->myeclipse-->exclude from  validation. 还报错的话就继续操作不过最后一步选择Run Validation eclipse下面Project Properties > JavaScript > Include Path > Source > 选中Exclude > 点击edit按钮

动态引进js文件

在项目中遇到一个这样的问题.即:进行登录以后才引进并执行一个外部的js文件.代码如下: //动态引进js,登录成功后引入holdSession.js function loadScript(url, callback) { var script = document.createElement("script"); script.type = "text/javascript"; if(typeof(callback) != "undefined"

向MyEclipse的项目中导入js文件时,出现小红叉

这个问题困扰我很久.刚开始时,也没有解决,因此也在网上寻找解决方法,还是没能解决.最近做项目时再一次出现了这样的问题,于是决定还是再找找办法.在此,分享一下自己的解决方法,给正处于痛苦中的童鞋们带来解药.具体方法如下: 首先右击js文件->MyEclipse->Exclude from Validation.(其实此时小红叉就已经消失了) 然后再右击js文件->MyEclipse->run Validation. Ok.希望给小伙伴们能带来一些帮助.

动态添加js文件.

方法一: $.getScript(url,callback); 这个方法是对$.ajax({ })的封装.默认是异步的而且是带有缓存的. 缓存对于用户来说,是个好东西,但是对于开发者来说可就是日了狗的东西了. 如果需要加载一个js文件或者多个没有相互依赖关系的js文件是没有问题的, 但是如果添加添加多个具有相互依赖关系的js文件,异步就会出现问题了. 可以从$.ajax()入手. function getScript(url){ $.ajax({ url: url, dataType: "scr

动态添加JS文件到页面

/*** ** 功能: 加载外部JS文件,加载完成后执行回调函数callback ***/ var utools = { config: { id: "", url: "", charset: "gb2312", callback: function () { } }, merge: function (a, c) { for (var b in c) a[b] = c[b]; return a }, getScript: function (a