javascript - js異步加載與DOM的執(zhí)行順序，打包js。（不用gulp和webpack）
問(wèn)題描述
目的：想要把，項(xiàng)目中所有頁(yè)面通用的資源，例如：reset.css，jq-ui.css，jq.js等，全部打包在一個(gè)js里面，可以叫初始化js，以后新頁(yè)面就可以只引用這個(gè)js即可。
現(xiàn)狀：index.html
<head> <link href = 'http://www.piao2010.com/wenda/css/reset.css'> //所有頁(yè)面通用 <link href = 'http://www.piao2010.com/wenda/css/jq-ui.css'> //所有頁(yè)面通用 <link href = 'http://www.piao2010.com/wenda/css/index.css'> //單獨(dú)這個(gè)頁(yè)面的css<head><body> //頁(yè)面代碼…… //頁(yè)面代碼……</body><srcipt src='http://www.piao2010.com/wenda/js/jq.js'></script> //所有頁(yè)面通用<srcipt src='http://www.piao2010.com/wenda/js/index.js'></script> //單獨(dú)這個(gè)頁(yè)面的js想要改成：index.html
<head><link href = 'http://www.piao2010.com/wenda/css/index.css'> //只保留單獨(dú)這個(gè)頁(yè)面的css<head><body> //頁(yè)面代碼…… //頁(yè)面代碼……</body><srcipt src='http://www.piao2010.com/wenda/js/init.js'></script> //想要封裝好通用init的js，以后可以通用<srcipt src='http://www.piao2010.com/wenda/js/index.js'></script> //只保留單獨(dú)這個(gè)頁(yè)面的jsinit.js
（function(){ var reset_css = document.createElement(’link’), jq_js = document.createElement(’script’); //加載通用的css reset_css.href = 'http://www.piao2010.com/wenda/css/reset.css'; //加載通用的js jq_js.src = 'http://www.piao2010.com/wenda/js/jq.js';}()）問(wèn)題：
頁(yè)面資源加載順序問(wèn)題
其中reset.css必須在最開(kāi)始加載。----實(shí)際情況，DOM渲染完了才加載的，沒(méi)用了
jq.js，因?yàn)樗许?yè)面的js依賴(lài)jq，必須jq先加載完后，再加載頁(yè)面的js。----實(shí)際情況，頁(yè)面js先加載了，報(bào)錯(cuò)了。
求教：如果想實(shí)現(xiàn)上述想要的結(jié)果，應(yīng)該怎么寫(xiě)，能保證請(qǐng)求外部src，href資源按照想要的順序加載呢？就是依賴(lài)的必須css，js必須在頁(yè)面的js執(zhí)行之前，加載完后再執(zhí)行。
有查過(guò)文件監(jiān)聽(tīng)事件、onload，但是我頁(yè)面中通用的東西有點(diǎn)多，怎么樣寫(xiě)保證全部初始化資源加載完后再去加載呢？
common_file1.onload = function(){ common_file2.onload = function(){common_file3.onload = function(){return}return }//再去加載每個(gè)頁(yè)面中的單獨(dú)需要資源嗎？ 這樣寫(xiě)感覺(jué)好傻 /(ㄒoㄒ)/~~ }
問(wèn)題解答
回答1：不知道你打包是采用gulp還是webpack， 可以試著引入gulp-order類(lèi)似的插件
回答2：我大概記得就是按照順序打包。就好了。
網(wǎng)公網(wǎng)安備