前言
开发中，页面会有引用相同的css、js的情况，如需更改则每个页面都需要调整，重复性工作较多，另外在更改内容之后上传至服务器中会有缓存问题，特针对该情况对公用css、js进行了提取并对引用时增加了版本号
一、提取公用的css (这种方式页面初始加载会有短暂错乱问题，可使用@import url()形式在一个css文件中引用其他css文件)
1.新建一个commonCssTemplate.js文件，用于存放提取css的代码
2.提取css
document.addEventListener('DOMContentLoaded', ()=> {
// 获取时间戳用做版本号
const version = '?v=' + Date.parse(new Date()) / 1000
const headElement = document.querySelector('head');
// 需引用的css文件路径列表
const filesToLoad = [
'css/ub.css',
'css/video.css',
'css/swiper.min.css',
];
filesToLoad.forEach((filePath) =>{
element = document.createElement('link');
element.rel = 'stylesheet';
element.href = filePath + version;
headElement.appendChild(element);
});
});
3.在body或head中引用commonCssTemplate.js
4.效果
文章来源：https://www.toymoban.com/news/detail-721452.html
二、提取公用的js
1.新建一个commonJsTemplate.js文件，用于存放提取js的代码
2.提取js
document.addEventListener('DOMContentLoaded', () => {
// 获取时间戳用作版本号
const version = '?v=' + Date.parse(new Date()) / 1000
const bodyElement = document.querySelector('body');
// 需引用的css文件路径列表
const scriptFiles = [
"js/jquery.min.js",
"js/axios.min.js",
"js/vue.min.js"
];
//页面如有单独的js需要引用，则和公用的进行合并
scriptFiles.push(...thisPageScriptFiles)
let index = 0
// 通过递归进行创建script
function loadScript() {
var element = document.createElement('script');
element.src = scriptFiles[index] + version;
bodyElement.appendChild(element);
element.onload = () => {
index++
if (index < scriptFiles.length) {
loadScript()
}
}
}
loadScript()
})
3.在body中引用commonJsTemplate.js
4.页面中如有单独的js需要引用
var thisPageScriptFiles = [
"js/addressBook.js",
"js/public.js",
]
5.效果
文章来源地址https://www.toymoban.com/news/detail-721452.html
到了这里，关于html中公用css、js提取、使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
