Boale_H-CSDN博客

前端防抖与节流超详细讲解前言防抖什么是防抖实现防抖函数节流什么是节流实现节流函数防抖与节流注意事项前言防抖与节流通常作为项目优化的手段，一般都是为了防止用户在短时间内快而频地多次操作，触发动作执行。比如防止用户点击多次提交按钮，触发表单多次提交；防止用户拉动滚动条，多次触发加载更多等情况防抖什么是防抖防抖，顾名思义，就是防止抖动，简而言之就是多次快速频繁地触发事件，也只会执行一次事件函数，但是要记住，需要加上一个时间限制（总不能上一次触发和下一次触发前后相隔半个钟，也才执行一次吧？这样就不是防抖了

2022-04-15 19:02:25 12599 5

原创解决鼠标经过覆盖于低层级div的高层级div，依旧会触发低层级的hover属性的问题

解决鼠标经过覆盖于低层级div的高层级div，依旧会触发低层级的hover属性的问题背景解决办法pointer-events属性pointer-events定义和用法：pointer-events属性值背景在写css的时候，发现高层级的div（用A表示，z-index为99）覆盖着低层级的div（用B表示，z-index为0）时，鼠标经过A与B重合的位置，依旧会触发被覆盖的B的hover事件如下图所示：解决办法如果我们想在鼠标经过A与B重合的位置，不会触发被覆盖的B的hover事件，那么可以在A

2022-01-21 18:04:58 1521

原创记录一下前端H5的复制功能在ios端的兼容性问题

记录一下前端的复制功能在ios端的兼容性问题问题1问题2问题1通过document.execCommand('copy');方法调用复制功能，在ios端无效。解决办法：利用copy-to-clipboard库实现复制问题2ios端复制，不支持点击复制功能，先异步请求后台数据，再复制后台返回的异步数据。简而言之就是，ios的复制方法，不能复制异步数据，只能复制同步数据。如下示例：点击“复制链接”按钮，先调用后端接口获取数据、再复制数据，这样ios是不能复制异步数据的 <div cla

2021-12-08 10:03:22 3687

原创微信小程序分包

微信小程序分包背景常规分包独立分包分包预下载背景我们知道，微信小程序打包是有大小限制的，主包大小不能超过 2M，即当项目太大的时候，我们就需要在构建时打包成不同的分包，用户在使用时按需进行加载。在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包的小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对

2021-11-16 20:09:02 2093 1

原创 vue3.x如何注册全局组件/方法（替代vue2.x的Vue.prototype）

vue3.x如何注册全局组件/方法（替代vue2.x的Vue.prototype）上一章我们讲过vue2.x利用Vue.prototype注册全局组件/方法，然而vue3.x是无法通过Vue.prototype来注册全局组件/方法的，因此需要另辟蹊径。vue3.x注册全局组件/方法主要有以下两个方式：provide / inject （推荐）main.js中：通过provide将组件或者方法、变量挂载在全局import { createApp } from 'vue';import App

2021-07-17 17:06:51 6752 1

原创 Vue.use的使用和基本原理

@[TOC](Vue.use() 的使用和基本原理)介绍与使用Vue.use() （vue2.x是Vue.use,vue3.x是app.use）在 vue 中使用很多，比如 ElementUI, vantUI, VueI18n, Router, Vuex 等部分第三方库、组件、自定义方法等，在引用后会使用 Vue.use 将他们传入作为参数使用如下：vue2.x使用Vue.use()import Vue from 'vue';import App from './App';import r

2021-07-16 19:18:40 4654 6

原创 react实现路由跳转拦截功能（导航守卫）

react实现路由跳转拦截功能背景Prompt组件Prompt组件介绍背景最近接到一个需求，当用户将要离开指定页面的时候，需要拦截页面的跳转，并弹出提示框，提醒用户去做某一项操作（比如数据的保存和提交），只有当用户完成操作之后，或者关闭提示窗，才能离开此页面进行下一页面的跳转。这样的需求，通常做法是：监听路由的跳转操作，阻塞跳转，实现拦截，并在用户处理完需要的操作之后（如数据保存、提交、关闭弹窗），才放开跳转权限，允许用户跳转下一页面。Prompt组件如果前端项目是使用vue来编写，我们可以很快处

2021-06-26 01:22:47 11815 2

原创 vite配置多环境打包

背景在项目打包的时候，我们通常需要根据环境变量来区分不同的环境，以请求不同的后台接口vite配置多环境打包首先看vite官网介绍的方法那么我们在项目的根目录下创建如下的环境配置文件，以uat为例，在项目根目录下创建.env.uat,并新增环境变量VITE_PROJECT_ENV = ‘uat’,需要注意的是，环境变量必须以VITE开头,package.json中配置uat环境的打包命令，在vite build后加上- -mode uat来区分打包环境之后在项目中即可通过以下方式获取到配置的

2021-04-02 18:10:24 11066

原创移动端自适应解决方案vw(以react为例)

移动端自适应解决方案vw---以react为例前言安装依赖配置config下的webpack.config.js兼容低版本安卓项目中有遇到的坑todos文章参考前言在之前，我们曾使用过淘宝的lib-flexible实现移动端的自适应解决方案，但是lib-flexible更推荐使用vw作为移动端自适应的解决方案接下来我们将配置vw作为移动端的自适应解决方案（以react为例）安装依赖npm i postcss-aspect-ratio-mini postcss-px-to-viewport-opt

2020-10-15 10:23:12 1341 1

原创 css实现1px的几种办法

css实现1px的几种办法背景物理像素和逻辑像素为什么css设置1px，但是在移动端上显示却感觉有些粗呢？css如何实现1px的物理像素法一：利用box-shadow法二：设置 border-image 方案法三：使用background-image实现法四：多背景渐变实现法五：用小数来写px值法六：viewport + rem 实现法七：伪类 + transform 实现背景物理像素和逻辑像素物理像素(physical pixel)物理像素也叫硬件像素或者设备像素，一个物理像素是显示器（手机屏

2020-06-29 19:00:26 3897

原创详细说说CSS中的BFC概念

css中的BFC什么是BFCBFC布局规则如何触发 BFCBFC的应用什么是BFC在了解BFC之前，先了解两个概念：box就是盒模型。box是css布局的对象和基本单位，说白了就是咱们网页布局的基石，简单来说一个页面是由很多box（盒模型）组成的。元素的类型也就是display属性。元素的类型和display属性决定了这个 box的类型。不同类型的box，会参与不同的Formatting Context（一个决定如何渲染文档的容器-人话就是网页布局的一个范围），因此box内的元素会以不同的方

2020-06-24 15:02:58 381 1

原创 CSS弹性盒总结

CSS弹性盒总结弹性盒简介弹性盒的使用创建html文件定义一个弹性盒弹性盒的对齐方式justify-contentalign-items排列方向 flex-directionflex 设置弹性盒子的子元素如何分配空间order 设置弹性盒子的子元素排列顺序flex-wrap 设置弹性盒子的子元素超出父容器时是否换行排列方向 flex-direction与换行（列） flex-flow 缩写形式弹性盒多属性之间的相互配合弹性盒简介弹性盒（Flex Box）是 CSS3 的一种新的布局模式，是一种当页面需

2020-06-23 16:07:18 901 3

原创前端使用fingerprintjs2获取浏览器指纹

使用fingerprintjs2获取浏览器指纹什么是浏览器指纹什么是fingerprintjs2如何使用fingerprintjs2以VUE中使用为例自定义选择浏览器的部分配置信息生成浏览器指纹什么是浏览器指纹浏览器指纹我们可以理解成是一个用户设备的浏览器的唯一id（有点类似手机设备的IMEI），通过浏览器指纹，我们可以做一些埋点操作或者是鉴权，辨别是否是同一用户，其是否有更换设备（更换浏览器）等什么是fingerprintjs2fingerprintjs2是通过设备浏览器信息获取浏览器指纹的插件（

2020-05-29 14:51:31 10909 1

原创 H5利用face++和腾讯云慧眼实现活体检测（人脸识别）的流程总结

H5利用face++和腾讯云慧眼paas模式实现活体检测（人脸识别）的流程总结背景paas模式活体检测流程（以数字模式的活体检测为例）saas模式活体检测流程背景随着当前业务安全以及风控的要求，在做一些业务特别是涉及金融领域的业务，需要对用户进行OCR身份证上传识别，活体检测辨别真人，以规避风险和风控评估。再说说为何不使用face++或者腾讯云慧眼的saas模式，因为saas模式集合了身份证OCR，银行卡OCR，活体检测于一体，不可拆分，自定义空间不多，因此我们公司使用的多是paas模式，借用face

2020-05-26 16:17:30 3565

原创 H5实现隐形水印的一些思路

背景最近公司有这样一个需求，H5在用户截图的时候是否能在截取的图片上携带用户信息和公司信息，以实现产品产权的追踪和定位

2020-05-26 09:44:59 3024 15

原创 vue项目的国际化实现方案

vue项目的国际化实现方案安装依赖vue-i18n配置main.js配置语言包创建locales文件夹，文件夹中创建zh.js和en.js组件中使用App.vue监听语言环境并切换国际化安装依赖vue-i18nnpm i vue-i18n -S配置main.js// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.c

2020-05-25 18:25:35 842

原创 js的浅拷贝与深拷贝

简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝，拿人手短，如果B没变，那就是深拷贝，自食其力。而当我们a[0]=1时进行数组修改时，由于a与b指向的是同一个地址，所以自然b也受了影响，这就是所谓的浅拷贝了。如果是引用数据类型，名字存在栈内存中，值存在堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值。那，要是在堆内存中也开辟一个新的内存专门为b存放值，就像基本类型那样，岂不就达到深拷贝的效果了。如果是基本数据类型，名字和值都会储存在栈内存中。

2024-07-16 01:05:13 270

原创手写new

思考一下，如果构造函数返回了一个新对象或者返回其它基本类型的数据，结果还一样吗？new 操作符是可以创建一个用户定义的对象的实例或具有构造函数的内置对象的实例。从上图中可以看出和没有写return是一样的，返回的都是新创新的Car实例。继续修改上面的例子，使其构造函数返回一个基本类型的数据。知道了new的执行过程，手写一个new,就变得很容易了。

2024-07-15 17:49:42 349

原创前端html面试常见问题

他们都是基于TCP的传输协议， WebSocket 可以双向发送和接受数据，而 HTTP 是单向的(HTTP通信只能由客户端发起，不具备服务器主动推送的能力)， WebSocket 的使用，需要先进行一次客户端和服务器的握手，两者建立连接后才可以正常双向通信，而HTTP是一个主动的请求对应一个被动的响应。每次1像素移动一个动画，但是如果此动画使用了100%的CPU，动画就会看上去是跳动的，因为浏览器正在与更新回流做斗争，每次移动3像素可能看起来平滑度低了，但它不会导致CPU在较慢的机器中抖动。

2024-07-07 19:42:08 758

原创 css继承属性有哪些

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。7、轮廓样式属性:outline-style、outline-width、outline-color、outline。font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母 “x” 的高度与。8、页面样式属性:size、page-break-before、page-break-after。所有主流浏览器都不支持。

2024-07-03 15:13:10 537

原创文档流与脱离文档流

上一节讲到了z-index，而众所周知，z-index仅适用与定位的元素，定位极易造成脱离文档流的情况。而什么是文档流呢？

2024-07-03 15:09:41 384

原创 z-index的工作原理

z-index适用范围：它必须在被设定了 position 属性元素上时才会生效，这意味着， z-index 只有在 position 设置为除 static 属性上的元素上时，它才能更改层叠顺序，在元素没有设置任何 position 的情况下，z-index 将不会起任何作用。文档的默认层叠上下文(或"根层叠上下文")将 HTML 元素标记为其"根层叠"，并且默认情况下，所有元素都属于此根层叠上下文，但是，任何元素节点也可以是其"局部层叠上下文"中的根层叠。新的堆叠上下文适用于该元素的任何子元素。

2024-07-03 15:07:05 854

空空如也

空空如也