Ich möchte die allen Seiten im Projekt gemeinsamen Ressourcen wie reset.css, jq-ui.css, jq.js usw. in ein js packen. Es kann in Zukunft als Initialisierungs-js bezeichnet werden. Neue Seiten können nur darauf verweisen.
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
<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
(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";
}())
Problem mit der Ladereihenfolge der Seitenressourcen
Die reset.css muss zu Beginn geladen werden. ----Die tatsächliche Situation ist, dass es nach dem Rendern des DOM geladen wird, was nutzlos ist
jq.js, da das js aller Seiten von jq abhängt, muss jq zuerst geladen werden, und dann wird das js der Seite geladen. ----Die tatsächliche Situation ist, dass die Seite js zuerst geladen wird und ein Fehler gemeldet wird.
Wenn Sie die oben gewünschten Ergebnisse erzielen möchten, wie sollten Sie es schreiben, um sicherzustellen, dass externe src- und href-Ressourcen in der gewünschten Reihenfolge angefordert werden? Dies bedeutet, dass das abhängige CSS und JS ausgeführt werden muss, bevor das JS der Seite ausgeführt wird, und dann nach dem Laden ausgeführt werden muss.
Ich habe Dateiüberwachungsereignisse und Onload überprüft, aber es gibt viele gemeinsame Dinge auf meiner Seite. Wie kann ich sicherstellen, dass alle initialisierten Ressourcen geladen werden, bevor sie geladen werden?
common_file1.onload = function(){
common_file2.onload = function(){
common_file3.onload = function(){
return
}
return
}
//再去加载每个页面中的单独需要资源吗? 这样写感觉好傻 /(ㄒoㄒ)/~~
}
不知道你打包是采用gulp还是webpack, 可以试着引入gulp-order类似的插件
我大概记得就是按照顺序打包。就好了。