![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
sakoooo
这个作者很懒,什么都没留下…
展开
-
基于AST实现一键自动提取&替换国际化文案
core-i18n-cli 是一个基于 react-intl 的 CLI 工具,用于自动扫描和替换指定文件夹下的中文文案,以便更轻松地进行国际化开发。原创 2024-02-07 10:04:30 · 1253 阅读 · 0 评论 -
webpack设置自定义环境变量
cross envcross-env - npmEnvironmentPluginEnvironmentPlugin | webpack 中文网DefinePluginDefinePlugin | webpack 中文网三者区别EnvironmentPlugin 基于 DefinePlugin,提供更便捷的写法,其设置的环境变量可以在编译环境和运行环境同时取到cross-env设置的值只能在编译环境读取,运行环境无法读取*运行环境:webpack入口引入的文件(如./sr原创 2022-02-22 14:51:04 · 1754 阅读 · 0 评论 -
实现数字千分位分隔
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 · 408 阅读 · 0 评论 -
正则表达式\ 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 · 5663 阅读 · 0 评论 -
生成项目文档框架
docusaurusvuepress原创 2021-11-29 14:18:55 · 192 阅读 · 0 评论 -
Charles抓包入门(Mac/iOS,HTTP/HTTPS)
https://www.jianshu.com/p/e8dd1091d6d7TODO: 实践文档原创 2021-09-06 16:59:52 · 101 阅读 · 0 评论 -
转换图片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 · 246 阅读 · 0 评论 -
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 · 355 阅读 · 2 评论 -
浏览器层合成与页面渲染优化
浏览器层合成与页面渲染优化原创 2021-06-23 11:13:45 · 110 阅读 · 0 评论 -
2021年你可能不知道的 CSS 特性
2021年你可能不知道的 CSS 特性原创 2021-06-21 17:22:45 · 99 阅读 · 0 评论 -
剪贴板操作 Clipboard API 教程
剪贴板操作 Clipboard API 教程最近好忙 没有时间自己沉淀文档了哎原创 2021-06-03 18:04:46 · 402 阅读 · 0 评论 -
谷歌浏览器新开页面进程问题
场景:在A页面,点击按钮,新开窗口跳转到该项目的B页面,如果B页面的请求尚未结束,直接关闭B页面,此时A页面会卡死。原因: 谷歌浏览器在给新开窗口分配进程时,看是否同源,非同源页面会单独分配一个新进程,而同源页面只会分配一个相同的新进程。在上述场景中,A,B页面同源,所以谷歌浏览器只会分配一个进程,这就导致B页面在请求未结束时就关闭,A页面会卡死。谷歌浏览器新开页面进程问题...原创 2021-05-27 18:04:44 · 366 阅读 · 0 评论 -
【react】使用高阶组件遇到的问题
背景:微前端框架下,在使用高阶组件为子页面统一添加面包屑时,由于把高阶组件使用在了render里,导致页面死循环。一开始代码像是这样:// App.jsrenderRoute(route)=>{// ...return HOC(Component)}render(){ const ele = renderRoute(route) return ele}// 子页面const Component = () =>{ useEffect(()=>{ // 将.原创 2021-05-12 16:24:23 · 421 阅读 · 0 评论 -
[WIP]拖拽列表的原生实现
背景: 需求需要实现一个勾选列表,支持拖拽排序。由于组件库不支持,加上想顺便学习下drag API,于是用原生方法实现了一下。HTML 拖放 APIHTML 拖放(Drag andDrop)接口使应用程序能够在浏览器中使用拖放功能。例如,用户可使用鼠标选择可拖拽(draggable)元素,将元素拖拽到可放置(droppable)元素,并释放鼠标按钮以放置这些元素。拖拽操作期间,会有一个可拖拽元素的半透明快照跟随着鼠标指针。详见MDN文档:HTML 拖放 API生命周期流程如图:实现思..原创 2021-04-15 21:07:10 · 107 阅读 · 0 评论 -
OAuth 2.0 的一个简单解释
OAuth 2.0 的一个简单解释原创 2021-03-25 20:50:30 · 81 阅读 · 0 评论 -
请求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 · 4121 阅读 · 0 评论 -
【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 · 2802 阅读 · 0 评论 -
【css】前端换肤功能方案调研 & css变量换肤实践
场景:应用要做深浅两套主题,内嵌h5页面要根据用户当前选择的主题渲染对应的主题样式。技术栈:vue-cli3 + less + Vant接到需求后,上网调研了几种方案:切换className、切换css文件、使用预处理器(less/sass)变量、css变量等,最终选择的是css变量方案。利用class 命名空间根据主题设置不同的类名,在类名下设置不同样式。优点实现简单,易理解兼容性好缺点易产生css优先级问题,造成代码混乱代码冗余不适用于用户自定义主题的场景de.原创 2020-10-22 21:38:48 · 1250 阅读 · 0 评论 -
用后续兄弟选择器(~)设置元素间隔
场景:设置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 · 664 阅读 · 0 评论 -
前端|加载的图片太多五种优化方法
摘要web性能的终极目标是减少资源到客户端的延迟,但是我们在HTTP1.0/HTTP1.1协议中经常会遇到加载的图片太多或者太大导致页面加载完成慢的问题:图片太多导致向服务器请求的次数太多,图片太大导致每次请求的时间过长.本篇将针对图片太多或者太大总结几种优化方案.一.当图片太多时方案一:将图片服务和应用服务分离(从架构师的角度思考)对于这个方案对于经验尚浅的我来说是考虑不多的,通过跟leader沟通,了解...转载 2020-05-18 11:18:14 · 7291 阅读 · 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 · 257 阅读 · 0 评论 -
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 · 1604 阅读 · 0 评论 -
Chrome控制台network底部的Finish,DOMContentLoaded和Load
打开chrome控制台network部分刷新页面,可以看到浏览器记录的网络资源加载时间,可以用于评估网页性能。DOMContentLoaded 和 Load 和 Finish的含义和区别DOMContentLoaded 和 LoadDOMContentLoaded:DOM树构建完成。 即HTML页面由上向下解析HTML结构到末尾封闭标签Load:页面加载完毕。 DOM树构建完成后,继...原创 2020-05-08 16:16:12 · 6596 阅读 · 0 评论 -
axios上传二进制文件流
场景: 将file对象转换为blob类型并作为请求参数传给后端。// 导入 const handleImport = type => { const api = "/testimpot" setLoading(true); // TODO: 传输文件 const reader = new FileReader(); reader.readAs...原创 2020-04-27 16:50:31 · 9727 阅读 · 0 评论 -
【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 · 6244 阅读 · 3 评论 -
【react】为项目添加报错边界
场景:当前端项目报错时返回统一当错误页面,防止页面崩溃。涉及到的生命周期:getDerivedStateFromError,componentDidCatchgetDerivedStateFromErrorReact 16引入了Error Boundaries来处理React渲染中抛出的错误。我们已经有了componentDidCatch生命周期方法,在发生错误后会被触发。它非常适合将错...原创 2020-04-01 11:31:58 · 139 阅读 · 0 评论 -
前端 crypto-js aes 加解密
前端 crypto-js aes 加解密原创 2020-03-16 10:01:10 · 58 阅读 · 0 评论 -
【前端微服务化】使用飞冰搭建前端微服务化框架
框架简介icestark 是一个面向大型系统的微前端解决方案,适用于以下业务场景:后台比较分散,体验差别大,因为要频繁跳转导致操作效率低,希望能统一收口的一个系统内;单页面应用非常庞大,多人协作成本高,开发/构建时间长,依赖升级回归成本高;系统有二方/三方接入的需求;icestark 在保证一个系统的操作体验基础上,实现各个子应用的独立开发和发版,框架应用通过 icestark 管理...原创 2020-02-04 20:59:55 · 2524 阅读 · 0 评论 -
【react】单页面锚点
场景: 选择时页面滚动到对应到div。 scrollToAnchor = anchorName => { if (anchorName) { const anchorElement = document.getElementById(anchorName); if (anchorElement) { try { /...原创 2019-12-12 15:31:41 · 533 阅读 · 0 评论 -
【React优化】React.Fragment、React.PureComponent和React.lazy()
这三个东西没有必要的相关性,只是今天查资料一起学习了。React.Fragment场景: 用于为一个组件返回多个元素。官方文档:React 中一个常见模式是为一个组件返回多个元素。以前我都是在外层加一个div包裹,Fragments 可以让你聚合一个子元素列表,并且不在DOM中增加额外节点。Fragments 看起来像空的 JSX 标签:render() { return ...原创 2019-12-02 14:17:13 · 380 阅读 · 0 评论 -
npm包-classname
场景: 用于更灵活的控制className。使用参考:每日质量NPM包-classnamesnpm:npm-classname原创 2019-11-20 14:26:02 · 588 阅读 · 0 评论 -
react项目引入本地iconfont图标
场景: ant design 的iconfont字体是调用的阿里的CDN地址,对于一些内网的应用,或者被屏蔽的站点,下载的字体或图标就不生效时,或需要使用本地的icon文件。解决方法: 下载图标库,本地引入。1.首先在iconfont上下载图标库到本地2.解压下载的压缩包,将js文件放在项目文件夹下3.引入(尽量使用import方式来引入url,避免相对路径由于打包造成路径丢失的...原创 2019-11-12 17:19:00 · 2440 阅读 · 0 评论 -
【正则表达式】用户名、密码等15个常用的js正则表达式
场景: 验证表单中用户输入用户名/密码,etc.一个验证正则表达式的网站https://regexr.com/验证用户名和密码// 密码 8-16位,至少1个大写字母,1个小写字母,1个数字和1个特殊字符export const checkPassword = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?.&_-])[\w$@$!...转载 2019-10-29 14:33:42 · 1903 阅读 · 0 评论 -
【react】实现点击复制功能
场景: 点击复制图标,拷贝指定文字。复制按钮组件: <Icon type="copy" onClick={() => this.handleCopy(val)} />方法一: 使用document.execCommand(‘copy’)參考:https://blog.csdn.net/qq_35536883/article/details/92840735copy...原创 2019-09-11 15:16:49 · 5921 阅读 · 0 评论 -
【心得笔记】编写组件直播笔记
组件心得直播-笔记组件特点:1.组件受控2.组件透传(组件可以获得所有原组件的属性和方法)把传递到組件的函數提到render外func=()=>{ ...}<div onClick={this.func}/>可以減少render裡的代碼量,且不會每次都生成新的實例。import copy from "copy-to-clipboard";handleC...原创 2019-10-23 16:16:51 · 110 阅读 · 0 评论 -
【react-intl组件】系统国际化——react-intl用法
场景: 頂部banner配置語言切換菜單,默认为中文,用户選擇其他語種後,界面的固定展示信息切換到其他語種,且各個界面佈局展示正常。参考:在 React 项目中使用 React-intl 实现多语言支持经过多方面的考察,决定选择较为成熟的库react-intl来实现系统多语言配置。使用步骤1.安装react-intlnpm install react-intl --save注意:...原创 2019-09-24 18:02:36 · 8946 阅读 · 2 评论 -
【系统兼容性】判断用户的浏览器版本和操作系统并设置不再提醒
场景: 用户登入系统时,判断用户的浏览器是否在系统兼容范围內(IE11及以上、safri、Chrom60及以上版本的瀏覽器),若不符合则提示弹窗,点击弹窗的下载,下载适配用户操作系统的浏览器;点击忽略,则用户登录期间不再提示。思路: 通过navigator.userAgent判断用户的浏览器版本和操作系统;通过设置cookie判断是否显示弹窗。1.判断浏览器版本这里我只判断了用户是否用的...原创 2019-09-25 17:55:07 · 1631 阅读 · 0 评论 -
【HTML5】媒体标签
video标签作用: 播放视频格式1:<video src=""></video>video标签的属性src: 告诉video标签需要播放的视频地址a...转载 2019-09-11 10:31:09 · 215 阅读 · 0 评论