前端

前端获取IP地址方法总结

通过配置vite获取IP地址实现效果 实现方法1、需要下载os插件npm i os2、获取内网IP地址的方法import os from 'os'; export function getNetworkIp() { let needHost = ''; try { const network = os.networkInter

Web 架构之缓存策略实战:从本地缓存到分布式缓存

文章目录 一、思维导图 二、正文内容 (一)本地缓存 1. 简介 2. 常见实现 3. 使用场景 4. 优缺点 (二)分布式缓存 1. 简介 2. 常见实现 3. 使用场景 4. 优缺点 5. 缓存问题及解决方案 三、总结 一、思维导图 #mermaid-

webpack 打包多页面应用

和传统的单页面应用打包不同,多页面应用其实就是配置多个入口,生成多个bundle。 下面就来看看具体应该怎么操作吧 image.png 这是官方提供的示例,可以看到,entry变成了一个对象,而里面每一个键值对则就对应了我们每一个最终生成的bundle。文档地址:#separate-ap

彻底搞懂盒子模型

一、简述 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:Margin外边距,Border边框,Padding内边距,和Content实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model): 盒

109:SE SPEC编写以及程序要点注意

最近在做一个肿瘤项目,从SDTM SPEC编写到编程都亲手写了一遍,几乎接触了80%的domain,所以,接下来一段时间会一个domain一个domain分享给大家。说实话,真的学到很多,也认识到自己的不足,还是需要学习(真的要吐槽一句,太累了!学无止境,有完没完) 同时你们看到我没有经常更新文章,一部分原因是确实太忙了,另一部分就是精神有点崩溃,工作是一部分原因,YQ被困在家快2个月了也是一部分

webpack常用loader和plugin

Loader 简介 webpack中提供了一种处理多种文件格式的机制,这便是Loader,我们可以把Loader当成一个转换器,它可以将某种格式的文件转换成Wwebpack支持打包的模块。 在Webpack中,一切皆模块,我们常见的Javascript、CSS、Less、Typescript、Jsx、图片等文件都是模块,不同模块的加载是通过模块加载器来统一管理的,当我们需要使用不同的 Loader

最简单的webpack入门教程

1 前言 这是一个简单的webpack入门教程 Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。 2 基本使用 使用webpack的前提是已经有了node环境,安装node就不赘述了 2.1 初始化 在空文件夹中使用命令行执行: npm init -y 就会在当前目录下创建一个package.json文件 2.

为什么 JavaScript 的 parseInt(0.0000005) 打印“5”?

为什么 JavaScript 中的 parseInt(0.0000005) 打印 5?一个惊人的问题! 前言 最近,我在开发项目时遇到了一个奇怪的问题,parseInt (0.0000005) === 5😱。通常,输出 0 才是正确的,但为什么是 5?让我们一起探讨这个问题。 1.什么时候使用parseInt? 首先,您通常什么时候使用parseInt?大多数时候,我们使用它来解

CSS中的BFC,是什么?

CSS中的BFC详解 点击打开视频讲解 一、常见定位方案 普通流 默认,从上而下,行内元素水平排列,行满换行,块级元素渲染成一个新行。 浮动 先按普通流位置出现,然后根据浮动方向偏移。 绝对定位 元素具体位置由绝对定位坐标组成。 二、什么是BFC BFC(Block Formatting Context)格式化上下文,是Web页面中盒模型布局的CSS渲染模式,指一个独立的

彻底理解粘性定位 - position: sticky

粘性定位可以被认为是相对定位(position: relative)和固定定位(position: fixed)的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。例如: .sticky-header { position: sticky; top: 10px; } 在 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到