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

时间: 11-28

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

myeclipse_导入js文件报错

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

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

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

js动态引入JS文件

<script type="text/javascript"> function loadJS(path){ var oHead = document.getElementsByTagName('HEAD').item(0); var oScript= document.createElement("script"); oScript.type = "text/javascript"; oScript.src=path; oHead.

后台如何动态添加JS文件和css文件的引用

www.qdmm.com/BookReader/24290,68379406.aspxwww.qdmm.com/BookReader/24290,68379409.aspxwww.qdmm.com/BookReader/24290,68379413.aspxwww.qdmm.com/BookReader/24290,68379416.aspxwww.qdmm.com/BookReader/24290,68379418.aspxwww.qdmm.com/BookReader/24290,68379

html 导入css 文件和js文件

切记!!!!!!!导入css文件正确格式 ,这是写给自己的.代码规范,一个标点可能影响大局,步步为营...细节决定成败...j 今天由由于在css文件导入的时候<link >写成了<link/> 但css样式有效,但是js完全无效.然后可以说一天碌碌无为,现在瞌睡的要死,还是得继续工作,记住!!细节决定成败!!!! 不要再一定正确的方法上修改,也永远不要在编程上使用试错法,不要失去对程序的信仰,问题一定在自己...

js 动态修改css文件

_.find(document.styleSheets[4].cssRules,function(cssRule){ if(cssRule.selectorText && cssRule.selectorText.indexOf(".navbar-fixed-top2")>-1){ cssRule.style.position=""; cssRule.style.top = "0px"; } if(cssRule.selec

Jquery Easy UI要导入的js文件

使用Jquery Easy UI要导入的js顺序 <1>.引用Jquery的Js文件<script src="jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="text/javascript"></script> <2>.引用Easy UI的Js文件<script src="jquery-easyui-1.3.4/jquery.easyui.min.js&qu

JavaScript 之 动态加载JS代码或JS文件

2.动态加载JS文件 <script type="text/javascript"> function loadScript(url, callback) { var script = document.createElement("script"); script.type = "text/javascript"; if(typeof(callback) != "undefined"){     if (scri

JQuery 之 动态加载JS或JS文件

如果用jquery的append直接加载script标签的话,会报错的. 1.可以用 document.write() 实现加载动态JS代码. 2.可以用 getScript() 函数实现加载JS文件. $.getScript("./test.js");  //加载js文件 $.getScript("./test.js",function(){  //加载test.js,成功后,并执行回调函数   console.log("加载js文件"); }

为了提高性能,如何动态加载JS文件

超级表格是一款多人协作的在线表格,程序相当复杂,用到十几个JS文件.但是有些文件是在打开某些类型的表格时才需要加载. 例如,只有当打开甘特图表格时,才需要加载gantetu.js文件. 那么问题来了,为了减少js文件数量和请求,如何在需要时自动加载js文件呢? 办法如下. //动态加载js文件function mcss_importJS(js){ var oHead = document.getElementsByTagName('HEAD').item(0); var oScript= doc