- 博客(62)
- 收藏
- 关注
RSS订阅原创 基于AST实现一键自动提取&替换国际化文案
core-i18n-cli 是一个基于 react-intl 的 CLI 工具，用于自动扫描和替换指定文件夹下的中文文案，以便更轻松地进行国际化开发。
2024-02-07 10:04:30
1649
原创 webpack设置自定义环境变量
cross envcross-env - npmEnvironmentPluginEnvironmentPlugin | webpack 中文网DefinePluginDefinePlugin | webpack 中文网三者区别EnvironmentPlugin 基于 DefinePlugin，提供更便捷的写法，其设置的环境变量可以在编译环境和运行环境同时取到cross-env设置的值只能在编译环境读取，运行环境无法读取*运行环境：webpack入口引入的文件（如./sr
2022-02-22 14:51:04
1868
原创 实现数字千分位分隔
Number.prototype.toLocaleString()详见mdn：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleStringlet num = 123456789;parseFloat(num).toLocaleString()// "123,456,789"Intl.NumberFormatTheIntl.Number..
2022-02-21 16:03:36
535
原创 正则表达式\ p {L}和\ p {N}
背景：看同事代码用到了一个没接触过的正则：/[_\p{L}\p{Nd}\.]/u\p{L}：匹配属于“字母”类别的单个字符\p{Nd}：匹配除表意文字外的任何文字中的数字零到九/u ：表示按unicode(utf-8)匹配（主要针对多字节比如汉字）/i ：表示不区分大小写（如果表达式里面有 a， 那么 A 也是匹配对象）/s ：表示将字符串视为单行来匹配参考：regular-expressions...
2021-12-27 21:15:35
7159
原创 Charles抓包入门（Mac/iOS，HTTP/HTTPS）
https://www.jianshu.com/p/e8dd1091d6d7TODO: 实践文档
2021-09-06 16:59:52
141
原创 转换图片url为文件与Promise并发执行
背景：有一份内容为图片url的csv文件，需要将该csv中的图片url下载为图片文件，再上传到另一区域的cdn。读取csv文件const handleFile = async (file: File) => { const reader = new FileReader() reader.readAsText(file) reader.onload = async () => { const allUrls = ((reader.result ..
2021-07-14 20:59:37
303
原创 React 的数据获取(data-fetching)库
React query：https://cangsdarm.github.io/react-query-web-i18n/RTK Query：https://redux-toolkit.js.org/rtk-query/comparisonReact-Query 让你的状态管理更优雅
2021-06-24 20:52:20
425
2
原创 谷歌浏览器新开页面进程问题
场景：在A页面，点击按钮，新开窗口跳转到该项目的B页面，如果B页面的请求尚未结束，直接关闭B页面，此时A页面会卡死。原因： 谷歌浏览器在给新开窗口分配进程时，看是否同源，非同源页面会单独分配一个新进程，而同源页面只会分配一个相同的新进程。在上述场景中，A，B页面同源，所以谷歌浏览器只会分配一个进程，这就导致B页面在请求未结束时就关闭，A页面会卡死。谷歌浏览器新开页面进程问题...
2021-05-27 18:04:44
435
原创 【react】使用高阶组件遇到的问题
背景：微前端框架下，在使用高阶组件为子页面统一添加面包屑时，由于把高阶组件使用在了render里，导致页面死循环。一开始代码像是这样：// App.jsrenderRoute(route)=>{// ...return HOC(Component)}render(){ const ele = renderRoute(route) return ele}// 子页面const Component = () =>{ useEffect(()=>{ // 将.
2021-05-12 16:24:23
505
原创 [WIP]拖拽列表的原生实现
背景： 需求需要实现一个勾选列表，支持拖拽排序。由于组件库不支持，加上想顺便学习下drag API，于是用原生方法实现了一下。HTML 拖放 APIHTML 拖放（Drag andDrop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。拖拽操作期间，会有一个可拖拽元素的半透明快照跟随着鼠标指针。详见MDN文档：HTML 拖放 API生命周期流程如图：实现思..
2021-04-15 21:07:10
144
原创 请求http图片报错：net::ERR_SSL_PROTOCOL_ERROR
背景：Chrome浏览器下，https网站请求http图片失败报错：net::ERR_SSL_PROTOCOL_ERROR原因：Chrome 升级 80 对混合内容资源加载策略进行了改变，http请求http资源时会自动升级。解决方法：需要服务器端配置SSL协议证书。参考：混合内容 & https 升级攻略...
2021-02-28 20:19:18
4424
原创 【react】spa应用中获取上一页路径
场景： spa应用需要添加埋点，参数需要获取当前页面的上一页url。相关技术栈：react + react-router常规场景可以通过document.referrer拿到，但spa应用中切换路由document.referrer不会改变。查看了react-router和history的API，都没有提供监听路由变化的函数。因此采取的方案是，添加一个生命周期钩子，在location.pathname改变时，将旧的url保存在全局变量中。// util.jsexport const setR.
2020-11-23 16:33:07
5024
原创 【React hooks】获取上一轮的state或props
场景： 在用hooks重构我的组件FetchTable时，我需要在引用对象query改变时重新获取数据，大概如此：/** query:{a:1,b:2} */useEffect(() => { // if (preQuery !== query ) DO STH... }, [query])但由于引用对象每次比较都会返回false ，因此会造成重复的渲染，甚至陷入死循环因此面对这种情况，需要获取上一轮的props，使用loadsh提供的isEqual或其他工具库函数进行深.
2020-11-07 20:44:10
2907
原创 【css】前端换肤功能方案调研 & css变量换肤实践
场景：应用要做深浅两套主题，内嵌h5页面要根据用户当前选择的主题渲染对应的主题样式。技术栈：vue-cli3 + less + Vant接到需求后，上网调研了几种方案：切换className、切换css文件、使用预处理器（less/sass）变量、css变量等，最终选择的是css变量方案。利用class 命名空间根据主题设置不同的类名，在类名下设置不同样式。优点实现简单，易理解兼容性好缺点易产生css优先级问题，造成代码混乱代码冗余不适用于用户自定义主题的场景de.
2020-10-22 21:38:48
1361
原创 用后续兄弟选择器(~)设置元素间隔
场景：设置item间的间隔<div id="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div></div&
2020-10-10 11:06:12
737
原创 【canvas实现放大镜功能】
效果：代码：<html> <style> .container { padding: 48px; } #canvas1 { position: relative; cursor: pointer; } .modal { position: absolute; border: 1px solid red; display: none; } .acti
2020-05-26 20:45:49
235
原创 【git commit】VSCode中使用Husky & commitlint规范commit messages
用于规范git commit信息，提高团队协作效率。Conventional Commits（约定式提交规范）它的 message 格式如下:<type>(<scope>): <subject>// 空一行<body>// 空一行<footer>分别对应 Commit message 的三个部分：Header，Body 和 Footer。HeaderHeader 部分只有一行，包括三个字段：type（必需）、scope（可.
2020-05-19 15:40:36
3467
转载 前端|加载的图片太多五种优化方法
摘要web性能的终极目标是减少资源到客户端的延迟,但是我们在HTTP1.0/HTTP1.1协议中经常会遇到加载的图片太多或者太大导致页面加载完成慢的问题:图片太多导致向服务器请求的次数太多,图片太大导致每次请求的时间过长.本篇将针对图片太多或者太大总结几种优化方案.一.当图片太多时方案一:将图片服务和应用服务分离(从架构师的角度思考)对于这个方案对于经验尚浅的我来说是考虑不多的,通过跟leader沟通,了解...
2020-05-18 11:18:14
9653
1
原创 【css】用两个伪类选择器实现带阴影的对话框
效果：<!DOCTYPE html><html><head><meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> div{ position:relative; width:300px; height:100px; background-color:yellow; box-shadow: 0px 10px 8px #88888
2020-05-14 10:31:41
318
原创 html+css实现一个带遮罩层的滑动抽屉
效果类似antd的Drawer，点击灰色遮罩层可以平滑关闭。import React, { useState } from 'react';import { Button } from 'antd';import styles from './test.less';export default function() { const [v, setV] = useState(false); const [mask, setMask] = useState(false); return
2020-05-11 17:04:16
1698
原创 Chrome控制台network底部的Finish，DOMContentLoaded和Load
打开chrome控制台network部分刷新页面，可以看到浏览器记录的网络资源加载时间，可以用于评估网页性能。DOMContentLoaded 和 Load 和 Finish的含义和区别DOMContentLoaded 和 LoadDOMContentLoaded：DOM树构建完成。 即HTML页面由上向下解析HTML结构到末尾封闭标签Load：页面加载完毕。 DOM树构建完成后，继...
2020-05-08 16:16:12
7287
原创 axios上传二进制文件流
场景： 将file对象转换为blob类型并作为请求参数传给后端。// 导入 const handleImport = type => { const api = "/testimpot" setLoading(true); // TODO: 传输文件 const reader = new FileReader(); reader.readAs...
2020-04-27 16:50:31
10323
原创 【React hooks】用hook写一个倒计时按钮
场景：获取验证码按钮，点击获取后倒计时60s不能操作。import React, { useState, useEffect } from 'react';import { Button } from 'antd';let timeChange;const Btn = () => { const [time, setTime] = useState(60); co...
2020-04-23 15:49:13
6676
3
原创 【git】本地开发分支覆盖dev分支修改问题
场景：存在远程开发分支dev和本地开发分支feature-xxx，复现流程：切换到feature-xxx进行开发，并进行本地提交；切换回dev分支，git pull拉取远程代码；切换到feature-xxx分支，git merge dev，如有冲突，合并冲突后提交；切换回dev分支，git merge feature-xxx，再push到远程分支。存在问题： 在第1，2步时dev分...
2020-04-20 11:22:13
809
原创 【react】为项目添加报错边界
场景：当前端项目报错时返回统一当错误页面，防止页面崩溃。涉及到的生命周期：getDerivedStateFromError，componentDidCatchgetDerivedStateFromErrorReact 16引入了Error Boundaries来处理React渲染中抛出的错误。我们已经有了componentDidCatch生命周期方法，在发生错误后会被触发。它非常适合将错...
2020-04-01 11:31:58
190
原创 img图片显示样式优化
object-fit有的时候图片的尺寸很不符合展示的尺寸会把图片拉的很难看，object-fit这个css属性可以展示比较好的效果。.example{ width:160px; height:90px; object-fit:cover;}object-fit关键属性object-fit：fill被替换的内容大小可以填充元素的内容框。 整个对象将完全填充此框。 如果对象的高...
2020-03-23 10:49:41
1379
原创 【前端微服务化】使用飞冰搭建前端微服务化框架
框架简介icestark 是一个面向大型系统的微前端解决方案，适用于以下业务场景：后台比较分散，体验差别大，因为要频繁跳转导致操作效率低，希望能统一收口的一个系统内;单页面应用非常庞大，多人协作成本高，开发/构建时间长，依赖升级回归成本高；系统有二方/三方接入的需求；icestark 在保证一个系统的操作体验基础上，实现各个子应用的独立开发和发版，框架应用通过 icestark 管理...
2020-02-04 20:59:55
2663
原创 Mac系统查看端口占用和杀死进程
查看进程占用lsof -i tcp:8080该命令会显示占用8080端口的进程，有其 pid ,可以通过pid关掉该进程杀死进程kill pid
2019-12-19 15:04:55
100
原创 【react】单页面锚点
场景： 选择时页面滚动到对应到div。 scrollToAnchor = anchorName => { if (anchorName) { const anchorElement = document.getElementById(anchorName); if (anchorElement) { try { /...
2019-12-12 15:31:41
587
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人