异步加载JS时的加载顺序问题

通过document.createElement('script')方式加载JS文件时,文件是动态加载进来的,没法控制加载的顺序。下面是简单的解决办法,更好的解决办法是使用AMD或CMD方式来管理模块,比如require.js或sea.js


var requireFile = function (file, callback) {
    callback = callback || function () {};
    var filenode;
    var jsfile_extension = /(.js)$/i;
    var cssfile_extension = /(.css)$/i;

    if (jsfile_extension.test(file)) {
        filenode = document.createElement('script');
        filenode.src = file;
        // IE
        filenode.onreadystatechange = function () {
            if (filenode.readyState === 'loaded' || filenode.readyState === 'complete') {
                filenode.onreadystatechange = null;
                callback();
            }
        };
        // others
        filenode.onload = function () {
            callback();
        };
        document.head.appendChild(filenode);
    } else if (cssfile_extension.test(file)) {
        filenode = document.createElement('link');
        filenode.rel = 'stylesheet';
        filenode.type = 'text/css';
        filenode.href = file;
        document.head.appendChild(filenode);
        callback();
    } else {
        console.log("Unknown file type to load.")
    }
};

var loaded = [];

var requireFiles = function () {
    var index = 0;

    return function (files, callback) {
        callback = callback || function () {};
        index += 1;
        f = files[index - 1];


        //console.log(loaded);

        if(loaded.indexOf(f) != -1) {
            //console.log("pass:",f);
            callBackCounter();
        }else{
            requireFile(f, callBackCounter);
            loaded.push(f);
        }

        function callBackCounter() {
            if (index === files.length) {
                index = 0;
                callback();
            } else {
                requireFiles(files, callback);
            }
        };
    };
}();

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在es6之前,js不像其他语言自带成熟的模块化功能,页面只能靠插入一个个script标签来引入自己的或第三方的脚本...
    zenggo阅读 8,651评论 0 51
  • 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js...
    半世韶华忆阑珊阅读 3,875评论 0 0
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 10,989评论 0 106
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 13,850评论 0 21
  • 我们每一天都在生命长河中行走面对同样行走的众生子女于父母就是生命的延续我们延续了父母的生命子女延展了我们的神识就在...
    哈哈同学阅读 747评论 0 0