简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - js异步加载与DOM的执行顺序，打包js。（不用gulp和webpack）
代言
代言 2017-06-30 09:58:30
0
2
835

目的：

想要把，项目中所有页面通用的资源，例如：reset.css，jq-ui.css，jq.js等，全部打包在一个js里面，可以叫初始化js，以后新页面就可以只引用这个js即可。

现状：

index.html

<head>
    <link href = "css/reset.css">  //所有页面通用
    <link href = "css/jq-ui.css">  //所有页面通用
    <link href = "css/index.css">  //单独这个页面的css
<head>

<body>
    //页面代码……
    //页面代码……
</body>

<srcipt src="js/jq.js"></script>  //所有页面通用
<srcipt src="js/index.js"></script>  //单独这个页面的js

想要改成：

index.html

<head>
    
    <link href = "css/index.css">  //只保留单独这个页面的css
<head>

<body>
    //页面代码……
    //页面代码……
</body>

<srcipt src="js/init.js"></script>  //想要封装好通用init的js，以后可以通用
<srcipt src="js/index.js"></script>  //只保留单独这个页面的js

init.js

（function(){

  var reset_css = document.createElement('link'),
      jq_js = document.createElement('script');
      
      //加载通用的css
      reset_css.href = "css/reset.css";
      
      //加载通用的js
      jq_js.src = "js/jq.js";
}()）

问题：

页面资源加载顺序问题

  1. 其中reset.css必须在最开始加载。----实际情况，DOM渲染完了才加载的，没用了

  2. jq.js，因为所有页面的js依赖jq，必须jq先加载完后，再加载页面的js。----实际情况，页面js先加载了，报错了。

求教：

  1. 如果想实现上述想要的结果，应该怎么写，能保证请求外部src，href资源按照想要的顺序加载呢？就是依赖的必须css，js必须在页面的js执行之前，加载完后再执行。

  2. 有查过文件监听事件、onload，但是我页面中通用的东西有点多，怎么样写保证全部初始化资源加载完后再去加载呢？

common_file1.onload = function(){
    common_file2.onload = function(){
        common_file3.onload = function(){
                return
        }
        return
    }
    
    //再去加载每个页面中的单独需要资源吗？  这样写感觉好傻 /(ㄒoㄒ)/~~
    }
代言
代言

全部回复(2)
扔个三星炸死你
扔个三星炸死你2017-06-30 10:00:30 2 楼

不知道你打包是采用gulp还是webpack， 可以试着引入gulp-order类似的插件

点赞 +0
添加回复
给我你的怀抱
给我你的怀抱2017-06-30 10:00:30 1 楼

我大概记得就是按照顺序打包。就好了。

点赞 +0
添加回复
热门专题
更多>
热门文章
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！