I want to package the resources common to all pages in the project, such as reset.css, jq-ui.css, jq.js, etc., into one js, which can be called initialization js, for new pages in the future. You can just quote this 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<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";
}()）Page resource loading order issue
The reset.css must be loaded at the beginning. ----The actual situation is that it is loaded after the DOM is rendered, so it is useless
jq.js, because the js of all pages depends on jq, jq must be loaded first, and then the js of the page is loaded. ----The actual situation is that the page js is loaded first and an error is reported.
If you want to achieve the above desired results, how should you write it to ensure that external src and href resources are requested in the desired order? It means that the dependent css and js must be executed before the js of the page is executed and then executed after loading.
I have checked file listening events and onload, but there are a lot of common things in my page. How can I ensure that all initialized resources are loaded before loading?
common_file1.onload = function(){
common_file2.onload = function(){
common_file3.onload = function(){
return
}
return
}
//再去加载每个页面中的单独需要资源吗？ 这样写感觉好傻 /(ㄒoㄒ)/~~
}
扔个三星炸死你2017-06-30 10:00:30
I don’t know whether you use gulp or webpack for packaging. You can try to introduce a plug-in like gulp-order