- 博客(140)
- 收藏
- 关注
RSS订阅原创 CSS动画 transition和animation
屏幕刷新率卡顿跳帧浏览器分别在16ms，32ms，48ms，分别切帧。如果到了32ms准备切帧的时候，浏览器其他任务还未完成，没有执行动画切帧。等恢复动画切帧时，浏览器到了48ms的动画切帧，显示器直接从16ms跳转48ms处画面，则发生跳帧。
2023-10-26 19:09:19
292
1
原创 react-quill富文本 中文输入法触发change问题
quill组件把带颜色的字体创建个dom, 临近的文字都会整合进一个dom中，导致输入的文字和插入的带颜色 都统一成一个颜色了。绑定compositionstart，compositionend 事件，可监听到非直接输入的输入法输入状态，结束时机准确。中文输入拼音阶段就开始触发change事件，在转换文本时会把拼音和汉字混杂出现，结果不正确。设置个状态，通过判断状态区分 中/英文输入法区别，正确处理逻辑。点击按钮插入自定义颜色文字，然后手动输入为正常颜色。
2023-09-06 22:00:19
927
1
原创 webpack和项目 配置环境变量
package.json中 --mode 配置的值只能在node环境 中读到package.json中 --env 配置的值只能在浏览器环境 中读到平时开发要区分环境，js中和webpack中都需要读到环境变量配置，下面大概介绍下如何配置。
2022-12-28 14:10:29
2936
原创 关闭/刷新浏览器，刷新页面发送请求解决方案
目录需求背景：踩坑记录：最终方案：记录登录时长，退出/异常退出的时候进行退出接口请求，完成退出标记，后端统计时长。navigator.sendBeacon(url, data)。使用blob方法传对象格式参数给后端。 参数表明 将要被发送到的网络地址。 可选 参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据..................
2022-06-21 12:18:27
1119
原创 sourcetree 每次拉取和推送都要输入密码
1. 点击终端2.在终端输入下代码，回车。git config credential.helper store3.拉取一次代码，在弹框中输入一次密码。4.之后的拉取和推送都不再需要输入密码了。
2022-04-22 18:36:05
1964
原创 xcode打开ios 的xcworkspace工程闪退问题
解决步骤： 找到ios下的的xxx.xcworkspace文件夹 右键显示包内容 删除xcuserdata 重启xcode
2022-02-14 15:40:59
1266
原创 为什么v-if和v-for不建议用在同一标签
如下列代码：<div v-for="item in [1, 2, 3]" v-if="item == 1"> {{item}}</div>在vue2中，v-for的优先级比v-if高，所以会先循环出来，然后再进行item每个 v-if判断。这样就无用的多渲染好多次dom。解决办法:用computed写法代替<div v-for="item in list"> {{item}}</div>computed() .
2021-12-03 11:20:14
738
原创 JavaScript预编译
预编译分为两种：函数预编译 (函数执行的前一刻执行) 全局预编译 (页面加载完成时执行)函数执行编译步骤:创建Activation Object 找形参和变量声明, 将变量声明和形参作为AO的属性名, 值为undefined 将实参和形参值统一 在函数体内找函数声明，将函数名作为AO对象的属性名,值赋予函数体代码Demo:function fn(a) { var a = 123 function a() {} var b = function () {}
2021-11-15 16:26:43
1073
原创 setTimeout第三个参数
平时都是用setTimeout做一个延时，都是使用两个参数，第一个是个函数，第二个是延时的时间。但是他第三个参数也是很好用的。场景：有循环中需要用setTimeout处理的，但是for循环是同步，setTimeout是异步，这样的结果就是输出5次5for (let i=0;i<4;i++) { setTimeout(() => { console.log(i) }, 1000)}闭包解决：常规的解决办法就是写个闭包来解决这个问题。输出0，1
2021-11-08 13:56:47
1959
原创 css 文字高度上下有留白问题
问题描述平时布局字体设置font-size之后，发现高度会比正常ui设计的要高，字体的上下有些留白区域占位置，如图：原因和解决办法：因为字体有默认行高。我们给它的line-height设置为1，就可以解决了。...
2021-11-02 10:35:56
1509
原创 let const 暂时性死区问题
都知道let 和 const不会变量提升，但是下面这段代码 是很有意思的一个小问题var a = 1;if(1){ a = 10; //在当前块作用域中存在a使用let/const声明的情况下，给a赋值10时，只会在当前作用域找变量a， // 而这时，还未到声明时候，所以控制台Error:a is not defined let a = 1;}...
2021-11-01 09:14:43
165
原创 Vue 路由钩子
路由钩子分为三种：全局钩子：beforeEach、 afterEach、beforeResolve 单个路由里面的钩子： beforeEnter 组件路由：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave 全局钩子：beforeEach：全局前置守卫 进入路由之前 beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用 afterEach 全局后置钩子 进入路由之后路由...
2021-09-14 10:18:36
8230
原创 Vue 自定义指令 directive
指令的钩子函数bind：只调用一次，指令在第一次绑定到元素时调用。这里可以进行一次性的初始化设置 inserted：被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中) update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 componentUpdated: 组件在组件的VNode和子组件的VNode全部更新后调用 unbind:只调用一次,指令与元素
2021-08-25 10:52:11
387
原创 自定义实现webpack插件原理解析
webpack插件构成部分一个具名javascript函数 在他的原型上定义apply方法 指定一个触及到 webpack本身的事件钩子 操作webpack内部的特定实例数据 实现功能后调用 webpack提供的callback函数webpack基本架构插件有一个构造函数实例化出来, 构造函数定义apply方法，在安装插件时,apply方法会被webpack的compiler调用一次。apply方法可以接受一个webpack的compiler对象的引用, 从而可以在回调函数中访问到com.
2021-08-13 13:20:55
675
原创 nginx浅析5-镜像服务器
proxy_store作用是 把静态文件直接在本地硬盘创建并读取, 首次访问会自动获取源站的静态图片等文件，之后访问就是直接在CDN服务器读取，加快了速度。代码：http { server { listen 80; // 服务默认端口值 server_name localhost; // 访问server名称 location /test.html { expires 3d; proxy_se
2021-08-04 08:55:46
133
原创 版本回退 git reset/revert 选择区别
1.git reset原理：git reset的作用是修改HEAD的位置，即将HEAD指向的位置改变为之前存在的某个版本。版本之后的记录都会被删除。适用场景：如果想恢复到之前某个提交的版本，且那个版本之后提交的版本我们都不要了，就可以用这种方法。查看版本号：可以使用命令“git log”查看： 使用“git reset --hard 目标版本号”命令将版本回退 使用“git push -f ”强推提交更改 (简单的git push报错)2.git revert原理：撤销某一...
2021-08-02 09:40:38
275
原创 vue子组件修改父组件的传值
1 .sync 修饰符// 父组件<home :title.sync="title" />//编译时会被扩展为<home :title="title" @update:title="val => title = val"/>// 子组件// 所以子组件可以通过$emit 触发 update 方法改变mounted(){ this.$emit("update:title", '这是新的title')}2.传入引用类型数据，进行修改// 父.
2021-07-29 08:40:36
379
原创 nginx浅析4-限流（秒杀，高并发）
限流：控制单位时间内用户访问服务器的次数 （秒杀，高并发场景下使用）限流算法：令牌桶算法 漏桶算法1.令牌桶算法算法思路：令牌以固定速率产生, 放到令牌桶中 令牌桶放满时，多余令牌丢弃 请求要在桶中拿到令牌才能被处理 令牌不够时，请求被缓存2.漏桶算法算法思路：请求在上方倒入水桶，在水桶下方流出被处理 来不及流出的请求 就缓存在桶中, 以固定速率流出 水桶满后丢弃两个算法区别：漏桶：只有一个桶，缓存请求，匀速处理，多余请求直接丢弃。强制限制数据的实...
2021-07-28 17:01:02
669
2
原创 前端json数据 转换成zip压缩包下载
思路：分两步，第一步将数据转成excel, 第二部将excel压缩 通过a标签完成下载。代码import * as React from 'react';import styles from './index.module.scss';import JSZip from 'jszip';import XLSX from 'xlsx';const Guide = () => { // 将workbook装化成blob对象 const workbook2blob = (work
2021-07-23 13:46:44
1067
原创 nginx浅析3-负载均衡
负载均衡：在服务集群中，需要有一台服务器作为调度者, 客户端所有请求都由调度者接受，调度者再根据每台服务的负载情况，分配给指定服务器进行处理。负载均衡几种配置weight权重 iphash1.权重方法配置 weight权重比例，访问次数比例是3:1http { upstream halou2 { server 127.0.0.1:7003 weight=3; server 127.0.0.1:7004 weight=1; } ..
2021-07-22 10:01:14
666
2
原创 nginx浅析2 - 反向代理配置
模块的中文解释可以看上一个文章：模块名称含义简介代理配置http { // 代理服务器组群, 访问时会随机匹配到一个没有被占用的地址，减小服务器压力效果 upstream halou{ server 127.0.0.1:7001; server 127.0.0.1:7002; } upstream halou2 { server 127.0.0.1:7003; server 127.0.0.1:700.
2021-07-20 17:25:49
125
1
原创 nginx浅析1-模块配置简介
nginx常用功能api接口转发 反向代理 静态资源部署1. events模块 (工作模式)events { worker_connections 1024; // 工作连接数 一般1024就好}2. http模块 (http配置)2.1 upstream (负载均衡服务器设置)2.2 server (主机设置)localtion (匹配url) include （再读取生效哪些子文件）http { // 设定文件mime类型, 类型在配置文件..
2021-07-20 16:56:34
147
1
原创 前端 xlsx 读取excel文件转成json数据给接口
1.安装依赖yarn add xlsx2.项目引入import * as XLSX from 'xlsx';3.在上传文件函数内执行 ( 根据场景自定义处理时机 )const uploadChange = (uploadFile) => { // 通过FileReader对象读取文件 const fileReader = new FileReader(); // readAsArrayBuffer之后才会启动onload事件 fileRea
2021-07-15 12:22:56
2165
2
原创 移动端适配 px换算rem插件 postcss-plugin-px2rem
1.postcss-plugin-px2rem 引入使用(vue例子)cnpm install postcss-plugin-px2rem --save
2021-06-07 17:20:02
1638
原创 前端axios请求, 后端接口返回文件流，完成下载
（设置相应数据的类型，设置后后台返回的数据会被强制转为blob类型）2.声明a标签, 完成下载功能函数。得到接口的 文件流返回值res.data, 调用此函数 downloadFn(res.data) 完成下载
2021-05-31 10:23:12
4561
4
原创 javascript设计模式---发布订阅模式
发布订阅模式订阅方对这个对象发起一个订阅的需求，当这个对象变化时，第三方会告诉订阅方，触发函数逻辑 -----主动权在第三方。（这也就是和观察者的区别）
2021-05-21 17:05:51
136
原创 Vue路由懒加载与组件懒加载
为了提升首屏加载速度，我们在项目中可以使用路由的懒加载来优化，解决加载过程中 白屏时间长问题路由懒加载代码：异步组件懒加载方式（ component：resolve=>(require(['需要加载的路由的地址'])，resolve) ）import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [ { pat.
2021-05-21 10:13:32
339
原创 h5页面实现浏览器全屏显示
目录开启全屏显示退出全屏显示获取当前是否全屏状态开启全屏显示let el = document.documentElement;// 不同浏览器兼容方法调用if(el.requestFullScreen){ el.requestFullScreen();}else if(el.webkitRequestFullScreen){ el.webkitRequestFullScreen();}else if(el.mozRequestFullScreen){ el.moz
2021-05-20 14:38:33
2672
原创 javascript设计模式---观察者模式
观察者模式观察对象状态，一旦对象发生变化，观察者定义的动作行为被触发（需要一个观察者角色，需要一个被观察者角色。 --------------主动权在被观察者手中）大体思路：观察者进行定义方法 被观察者改变状态，触发观察者的方法观察者：class Observer { constructor(name, fn=() => {}) { this.name=name this.fn = fn }}const bzr = ne.
2021-05-18 10:43:35
109
原创 javascript设计模式---单例模式
单例模式单：单一，一个 例：实例核心思路：用一个变量保存第一个实例，然后把该实利直接返回 给外部的调用function person() { this.name='test'}// 正常实例let p1 = new person()let p2 = new person()console.log(p1==p2) // false, 会得到两个实例// 单例模式核心代码const getSingle = (function() { let instance =
2021-05-11 16:23:16
140
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人