- 博客(188)
- 收藏
- 关注
RSS订阅
原创 前端防抖与节流超详细讲解
前端防抖与节流超详细讲解前言防抖什么是防抖实现防抖函数节流什么是节流实现节流函数防抖与节流注意事项前言防抖与节流通常作为项目优化的手段，一般都是为了防止用户在短时间内快而频地多次操作，触发动作执行。比如防止用户点击多次提交按钮，触发表单多次提交；防止用户拉动滚动条，多次触发加载更多等情况防抖什么是防抖防抖，顾名思义，就是防止抖动，简而言之就是多次快速频繁地触发事件，也只会执行一次事件函数，但是要记住，需要加上一个时间限制（总不能上一次触发和下一次触发前后相隔半个钟，也才执行一次吧？这样就不是防抖了
2022-04-15 19:02:25
12112
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
1407
原创 记录一下前端H5的复制功能在ios端的兼容性问题
记录一下前端的复制功能在ios端的兼容性问题问题1问题2问题1通过document.execCommand('copy');方法调用复制功能，在ios端无效。解决办法：利用copy-to-clipboard库实现复制问题2ios端复制，不支持点击复制功能，先异步请求后台数据，再复制后台返回的异步数据。简而言之就是，ios的复制方法，不能复制异步数据，只能复制同步数据。如下示例：点击“复制链接”按钮，先调用后端接口获取数据、再复制数据，这样ios是不能复制异步数据的 <div cla
2021-12-08 10:03:22
3556
原创 微信小程序分包
微信小程序分包背景常规分包独立分包分包预下载背景我们知道，微信小程序打包是有大小限制的，主包大小不能超过 2M，即当项目太大的时候，我们就需要在构建时打包成不同的分包，用户在使用时按需进行加载。在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包的小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对
2021-11-16 20:09:02
2036
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
6121
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
4398
6
原创 react实现路由跳转拦截功能（导航守卫）
react实现路由跳转拦截功能背景Prompt组件Prompt组件介绍背景最近接到一个需求，当用户将要离开指定页面的时候，需要拦截页面的跳转，并弹出提示框，提醒用户去做某一项操作（比如数据的保存和提交），只有当用户完成操作之后，或者关闭提示窗，才能离开此页面进行下一页面的跳转。这样的需求，通常做法是：监听路由的跳转操作，阻塞跳转，实现拦截，并在用户处理完需要的操作之后（如数据保存、提交、关闭弹窗），才放开跳转权限，允许用户跳转下一页面。Prompt组件如果前端项目是使用vue来编写，我们可以很快处
2021-06-26 01:22:47
11366
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
10754
原创 移动端自适应解决方案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
1280
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
3685
原创 详细说说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
347
原创 CSS弹性盒总结
CSS弹性盒总结弹性盒简介弹性盒的使用创建html文件定义一个弹性盒弹性盒的对齐方式justify-contentalign-items排列方向 flex-directionflex 设置弹性盒子的子元素如何分配空间order 设置弹性盒子的子元素排列顺序flex-wrap 设置弹性盒子的子元素超出父容器时是否换行排列方向 flex-direction与换行（列） flex-flow 缩写形式弹性盒多属性之间的相互配合弹性盒简介弹性盒（Flex Box）是 CSS3 的一种新的布局模式，是一种当页面需
2020-06-23 16:07:18
719
3
原创 前端使用fingerprintjs2获取浏览器指纹
使用fingerprintjs2获取浏览器指纹什么是浏览器指纹什么是fingerprintjs2如何使用fingerprintjs2以VUE中使用为例自定义选择浏览器的部分配置信息生成浏览器指纹什么是浏览器指纹浏览器指纹我们可以理解成是一个用户设备的浏览器的唯一id（有点类似手机设备的IMEI），通过浏览器指纹，我们可以做一些埋点操作或者是鉴权，辨别是否是同一用户，其是否有更换设备（更换浏览器）等什么是fingerprintjs2fingerprintjs2是通过设备浏览器信息获取浏览器指纹的插件（
2020-05-29 14:51:31
10152
1
原创 H5利用face++和腾讯云慧眼实现活体检测（人脸识别）的流程总结
H5利用face++和腾讯云慧眼paas模式实现活体检测（人脸识别）的流程总结背景paas模式活体检测流程（以数字模式的活体检测为例）saas模式活体检测流程背景随着当前业务安全以及风控的要求，在做一些业务特别是涉及金融领域的业务，需要对用户进行OCR身份证上传识别，活体检测辨别真人，以规避风险和风控评估。再说说为何不使用face++或者腾讯云慧眼的saas模式，因为saas模式集合了身份证OCR，银行卡OCR，活体检测于一体，不可拆分，自定义空间不多，因此我们公司使用的多是paas模式，借用face
2020-05-26 16:17:30
3442
原创 H5实现隐形水印的一些思路
背景 最近公司有这样一个需求，H5在用户截图的时候是否能在截取的图片上携带用户信息和公司信息，以实现产品产权的追踪和定位
2020-05-26 09:44:59
2819
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
820
原创 git报错warning: refname ‘分支名‘ is ambiguous.
当merge分支如20230926Remote进入到另一个分支的时候，报错warning: refname ‘20230926Remote’ is ambiguous.这个警告通常由于引用名称（如branch名称、commit名称）不明确引起。当Git无法确定应该指向哪个branch或commit时，就会引发这个警告。
2023-09-26 14:38:47
2831
原创 git报错 Unable to create ‘D:/project/xxx/.git/index.lock‘: File exists.
Git 执行操作时会自动生成 index.lock 文件，操作结束后会自动删除。这样做的目的是避免同时操作同一个文件夹。而出现上述报错的原因，就是由于某些缘故（比如操作过快，上一步进程没结束，下一步操作就开始）导致index.lock 文件没有自动删除。实际上解决这个问题很简单，删掉.git目录下的index.lock文件即可。然后即可正常执行git命令，如提交、切换分支等。
2023-06-13 18:22:03
3134
原创 移动端H5不能自由选中文本进行复制的问题
在写微信公众号H5的时候，发现在移动端上，H5没办法自由选中文本进行文字复制。这实际上是由于微信浏览器和其他的移动端浏览器默认给元素添加了属性造成的。既然知道是这个原因造成的，那么我们通过修改属性即可解决问题user-select有none、auto、text、contain、all、inherit、initial、unset8个属性//不可选中 user-select : auto;//自动 user-select : text;//文本可选中 user-select : contain;
2023-03-15 16:58:11
2001
2
原创 前端vw自适应解决方案，适用pc端以及移动端，适用webpack以及vite，适用vue以及react
前端vw自适应解决方案，适用pc端以及移动端，适用webpack以及vite，适用vue以及react
2022-10-28 18:20:24
3295
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人