javascript - js異步加載與DOM的執行順序，打包js。（不用gulp和webpack）
問題描述
目的：想要把，項目中所有頁面通用的資源，例如：reset.css，jq-ui.css，jq.js等，全部打包在一個js里面，可以叫初始化js，以后新頁面就可以只引用這個js即可。
現狀：index.html
<head> <link href = 'http://www.aoyou183.cn/wenda/css/reset.css'> //所有頁面通用 <link href = 'http://www.aoyou183.cn/wenda/css/jq-ui.css'> //所有頁面通用 <link href = 'http://www.aoyou183.cn/wenda/css/index.css'> //單獨這個頁面的css<head><body> //頁面代碼…… //頁面代碼……</body><srcipt src='http://www.aoyou183.cn/wenda/js/jq.js'></script> //所有頁面通用<srcipt src='http://www.aoyou183.cn/wenda/js/index.js'></script> //單獨這個頁面的js想要改成：index.html
<head><link href = 'http://www.aoyou183.cn/wenda/css/index.css'> //只保留單獨這個頁面的css<head><body> //頁面代碼…… //頁面代碼……</body><srcipt src='http://www.aoyou183.cn/wenda/js/init.js'></script> //想要封裝好通用init的js，以后可以通用<srcipt src='http://www.aoyou183.cn/wenda/js/index.js'></script> //只保留單獨這個頁面的jsinit.js
（function(){ var reset_css = document.createElement(’link’), jq_js = document.createElement(’script’); //加載通用的css reset_css.href = 'http://www.aoyou183.cn/wenda/css/reset.css'; //加載通用的js jq_js.src = 'http://www.aoyou183.cn/wenda/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ㄒ)/~~ }
問題解答
回答1：不知道你打包是采用gulp還是webpack， 可以試著引入gulp-order類似的插件
回答2：我大概記得就是按照順序打包。就好了。
網公網安備