按需加载js文件功能实现

2019独角兽企业重金招聘Python工程师标准>>>

随着前端页面功能的日益壮大，要实现整个应用就要引入很多插件库，为了优化加载速度，有模块化机制，按需加载机制，所以一直想自己写一个按需加载功能，实现在不引入第三方库的前提下实现单页面应用，简单写了一个，能实现按需加载js文件功能。

总的思路：通过监听location.hash值的变化，加载与hash值相同的js文件，如果已经加载过模块就不重复加载。

以下只是实现的思路，不能作为一个功能去用。

    //检测是否已经加载过js文件
        function resourceExist(path){
            var flag = false;
            var scripts = document.getElementsByTagName('script');
            for(var i=0;i<scripts.length;i++){
                var src = scripts[i].getAttribute("src");
                console.log(src);

                var paths = src.split('/');
                var path1 = paths[paths.length-1].split('.')[0];
                if(path1 == path){
                    flag = true;
                    break;
                }
            }
            return flag;
        }
        //通过新增script标签,加载文件
        function router(url){
            var script=document.createElement("script");  
            script.setAttribute("type", "text/javascript"); 
            script.setAttribute("charset", "utf-8");          
            script.setAttribute("src", url+".js");
            
            document.body.appendChild(script);
        }
        //监听hash变化
         window.addEventListener("hashchange", function(e) {
            if (location.hash !=""){
                if(!resourceExist(location.hash.split("#")[1])){
                    router(location.hash.split("#")[1]) ;
                }
                 
            }
         })

转载于:https://my.oschina.net/niejianbo/blog/820552