javascript - js异步加载与DOM的执行顺序，打包js。（不用gulp和webpack）
问题描述
目的：
想要把，项目中所有页面通用的资源，例如：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";
}()）
问题：
页面资源加载顺序问题
其中reset.css必须在最开始加载。----实际情况，DOM渲染完了才加载的，没用了
jq.js，因为所有页面的js依赖jq，必须jq先加载完后，再加载页面的js。----实际情况，页面js先加载了，报错了。
求教：
如果想实现上述想要的结果，应该怎么写，能保证请求外部src，href资源按照想要的顺序加载呢？就是依赖的必须css，js必须在页面的js执行之前，加载完后再执行。
有查过文件监听事件、onload，但是我页面中通用的东西有点多，怎么样写保证全部初始化资源加载完后再去加载呢？
common_file1.onload = function(){
common_file2.onload = function(){
common_file3.onload = function(){
return
}
return
}
//再去加载每个页面中的单独需要资源吗？ 这样写感觉好傻 /(ㄒoㄒ)/~~
}谢邀!
接触前端很迟, 没有手动打包的经验, bundler工具只用过gulp和webpack, 所以只能对你提的两个问题说下看法和可能的解决方案(我自己都没实践过- -).
css文件是在
init.js中动态加载的,init.js又在body后面, 这时肯定页面已经下载完了, 可以试试把init.js放在header标签里面, 不过动态添加的css和js是异步加载的, 应该还是不能保证css就能在DOM渲染完之前加载完.-
js之间有依赖关系的话(比如
a.js依赖b.js), 像你这样b.js动态加载,a.js用标签加载肯定是不行的,a.js应该要等待(监听事件)b.js加载完再动态加载. 这个的解决方案应该比较多
说点题外话, 你这个需求应该不是"打包js(module bundler)", 而是"module loader(js加载)". 像webpack, gulp(browserify)这样的属于打包工具, 就是把一堆有依赖关系的js打包成一个合体.js. 你的需求属于js加载, 就是在浏览器端根据依赖顺序加载js文件, 可以看看我上面提到的AMD/CMD/Systemjs.
说了这么多, 还是建议直接用webpack, 十几行代码, 5分钟, 就能简单解决这个需求了.
这篇关于javascript - js异步加载与DOM的执行顺序，打包js。（不用gulp和webpack）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
