html中公用css、js提取、使用

前言

开发中,页面会有引用相同的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()) / 1000const 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.效果

在这里插入图片描述

二、提取公用的js

1.新建一个commonJsTemplate.js文件,用于存放提取js的代码
2.提取js
document.addEventListener('DOMContentLoaded', () => {// 获取时间戳用作版本号const version = '?v=' + Date.parse(new Date()) / 1000const 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// 通过递归进行创建scriptfunction 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.效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/165715.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分布式Trace:横跨几十个分布式组件的慢请求要如何排查?

目录 前言 一、问题的出现&#xff1f; 二、一体化架构中的慢请求排查如何做 三、分布式 Trace原理 四、如何来做分布式 Trace 前言 在分布式服务架构下&#xff0c;一个 Web 请求从网关流入&#xff0c;有可能会调用多个服务对请求进行处理&#xff0c;拿到最终结果。这个…

Redis-Sentinel高可用架构学习

Redis-Sentinel高可用架构 Redis主从复制过程&#xff1a; 主从同步原理 Redis Sentinel&#xff08;哨兵&#xff09;高可用集群方案&#xff1a;Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案。 当用Redis做Master-slave的高可用方案时&#xff0c;假如master宕机了…

Rust-后端服务调试入坑记

这篇文章收录于Rust 实战专栏。这个专栏中的相关代码来自于我开发的笔记系统。它启动于是2023年的9月14日。相关技术栈目前包括&#xff1a;Rust&#xff0c;Javascript。关注我&#xff0c;我会通过这个项目的开发给大家带来相关实战技术的分享。 如果你关注过我的Rust 实战里…

Unity⭐️Win和Mac安卓打包环境配置

文章目录 🟥 配置Android SDK1️⃣ 配置 SDK Platforms2️⃣ 配置 SDK Tools🎁 Android SDK Build-Tools🎁 Android SDK Command-line Tools(latest)🎁 Android SDK Tools(Obsolete)🟧 配置NDK🟩 配置JDK前情提示: 此方法适用于Windows/Mac 在配置时注意开启 🪜 …

解决osg绘制场景时因Z冲突导致重影或闪烁等不正常情况

目录 1. 问题的提出 2. Z冲突&#xff08;z-fighting&#xff09;简介 2.1. Z冲突&#xff08;z-fighting&#xff09;产生的原因 2.2. 如何消除Z冲突&#xff08;z-fighting&#xff09; 3. 代码实现 1. 问题的提出 今天绘制了一个棋盘格&#xff0c;鼠标在棋盘格上单击…

CVE-2019-0708漏洞实战

使用命令&#xff1a;search 0708搜索exp脚本 搜索网段中主机漏洞 use auxiliary/scanner/rdp/cve_2019_0708_bluekeep 照例&#xff0c;show options 看一下配置 设置网段set RHOSTS x.x.x.x run运行就行了 使用攻击模块 use exploit/windows/rdp/cve_2019_0708_bluekee…

论文阅读-多目标强化学习-envelope MOQ-learning

introduction 一种多目标强化学习算法&#xff0c;来自2019 Nips《A Generalized Algorithm for Multi-Objective Reinforcement Learning and Policy Adaptation》本文引用代码全部来源于论文中的链接。主要参考run_e3c_double.py文件 1 总体思想 1.将输入中加入多目标的偏…

Leetcode 202 快乐数(HashSet,环形链表思想)

Leetcode 202 快乐数&#xff08;HashSet&#xff09; 解法1 &#xff1a; 用HashSet来检测循环:star:为什么说数字n的位数由log n给定呢&#xff1f;解法2 &#xff1a; 链表的思想[出现循环表示链表出现环]&#xff0c;使用快慢指针法 题目链接>>>>>>>&…

用 Java 在 PDF 中创建和管理图层,实现交互式文档

PDF 图层&#xff08;也称为可见图层或附加图层等&#xff09;是组织和管理 PDF 文档中内容可见性的一种方法。PDF 图层可用于创建交互式文档、隐藏或显示特定信息、创建多语言版本文档等。通过添加和删除图层&#xff0c;用户可以根据需要定制 PDF 文档指定内容的可见性与显示…

PO模式在selenium自动化测试框架的优势

大家都知道po模式可以提高代码的可读性和减少了代码的重复&#xff0c;但是相对的缺点还有&#xff0c;今天通过本文一起学习下PO模式在selenium自动化测试框架的优势&#xff0c;需要的朋友可以参考下 PO模式简介 1.什么是PO模式 PO模型是:Page Object Model的简写 页面对象…

国内有哪些做得好的企业协同办公软件

在当今信息化时代&#xff0c;企业协同办公软件成为了提升企业效率和推动协作的重要工具。国内市场涌现出许多优秀的企业协同办公软件&#xff0c;为企业提供了高效、便捷的协同办公解决方案。在本文中&#xff0c;我们将向大家介绍3款在国内好评如潮的企业协同办公软件&#x…

项目知识点总结-过滤器-MD5注册-邮箱登录

&#xff08;1&#xff09;过滤器 使用过滤器验证用户是否登录 /** * Title: NoLoginFilter.java * Package com.qfedu.web.filter * Description: TODO(用一句话描述该文件做什么) * author Feri * date 2018年5月28日 * version V1.0 */ package com.gdsdx…

Mingw快捷安装教程 并完美解决出现的下载错误:The file has been downloaded incorrectly

安装c语言编译器的时候&#xff0c;老是出现The file has been downloaded incorrectly&#xff0c;真的让人 直接去官网拿压缩包&#xff1a;https://sourceforge.net/projects/mingw-w64/files/ &#xff08;往下拉找到那个x86_64-win32-seh的链接&#xff0c;点击后会自动…

【Java题】实现继承和多态的例子

一&#xff1a;题目 1.员工类Employee&#xff1a; &#xff08;1&#xff09;私有成员变量&#xff1a;姓名&#xff0c;年龄&#xff0c;工资 &#xff08;2&#xff09;提供无参&#xff0c;有参构造 &#xff08;3&#xff09;成员方法&#xff1a;work()方法——员工工作 …

AUTOSAR AP 硬核知识点梳理(2)— 架构详解

一 AUTOSAR 平台逻辑体系结构 图示逻辑体系结构描述了平台是如何组成的,有哪些模块,模块之间的接口是如何工作的。 经典平台具有分层的软件体系结构。定义明确的抽象层,每个抽象层都有精确定义的角色和接口。 对于应用程序,我们需要考虑使用的软件组件,希望它们是可重用的…

洗地机哪个好用?2023年洗地机推荐指南

说到提高家庭幸福生活的家电&#xff0c;洗地机肯定是少不了的&#xff0c;特别对于现在快节奏的生活来说&#xff0c;高效率的解决家务活&#xff0c;而且能够大幅度的提高生活质量。在市场上&#xff0c;消费者面临着选择合适洗地机的难题&#xff0c;因为有各种型号、功能和…

vue3 + fastapi 实现选择目录所有文件自定义上传到服务器

文章目录 ⭐前言&#x1f496; 技术栈选择 ⭐前端页面搭建&#x1f496; 调整请求content-type传递formData ⭐后端接口实现&#x1f496; swagger文档测试接口 ⭐前后端实现效果&#x1f496; 上传单个文件&#x1f496; 上传目录文件 ⭐总结⭐结束 ⭐前言 大家好&#xff0c…

嵌入式养成计划-45----QT--事件机制--定时器事件--键盘事件和鼠标事件--绘制事件

一百一十五、事件机制 当这件事情发生时&#xff0c;会自动走对应的函数处理&#xff08;重写的事件函数&#xff09; 115.1 事件处理简介 什么是事件&#xff1f; (重点) 件是由窗口系统或者自身产生的&#xff0c;用以响应所发生的各类事情&#xff0c;比如用户按下并释放…

进程与线程

进程 进程锁 进程之间数据不共享,但是共享同一套文件系统,所以访问同一个文件,或同一个打印终端,是没有问题的&#xff0c;而共享带来的是竞争&#xff0c;竞争带来的结果就是错乱&#xff0c;如何控制&#xff0c;就是加锁处理 part1&#xff1a;多个进程共享同一打印终端 …

【框架源码篇 03】Spring源码手写篇-手写AOP

Spring源码手写篇-手写AOP 手写IoC和DI后已经实现的类图结构。 一、AOP分析 1.AOP是什么? AOP[Aspect Oriented Programming] 面向切面编程&#xff0c;在不改变类的代码的情况下&#xff0c;对类方法进行功能的增强。 2.我们要做什么&#xff1f; 我们需要在前面手写IoC&…