弦奏的博客

一个混迹多年的前端开发人员，正在努力的学习中。。。

| react相关

• 十个案例学会 React Hooks
• React Hooks实现异步请求实例—useReducer、useContext和useEffect代替Redux方案
• React组件化开发方式中6种类型组件
• 表单使用rc-form，校验并滚动到错误位置
• 30行代码实现一个进度条组件
• React Hooks详解
• useCallback使用场景
• React移动端添加路由转场动画
• React路由权限控制，附带错误边界，移动端路由转场动画，加载中动画
• React超出指定行数显示全文
• 移动端监听软键盘弹出和收起，区分Android和IOS
• 获取Ant Design Mobile ListView 长列表滚动位置、设置滚动位置
• React实现绑定长按和点击事件
• Ant Design Mobile ListView 长列表 逻辑封装
• 使用useSelector useDispatch 替代connect
• 关于React Hook代码逻辑分层思考
• 基于react-multi-clamp实现的多行文本收起展开

| javascript相关

• 多维数组实现扁平化
• 创建长度为 100 的数组,并且每个元素的值等于它的下标
• indexedDB插件库indb.js分页查询方法
• 30行代码实现深拷贝
• 判断是不是IOS和微信访问
• 移动端问题记录
• 两个位置经纬度之间直线距离计算
• JS检测是否是heic(heif)格式

| css相关

• 移动端底部有菜单强烈建议使用Flex竖向布局，不要使用position: fixed将菜单定位到底部
• CSS 常见布局方案
• 伪元素before和after的content常见用法
• 列表内不同宽高图片保持长宽比例一致
• CSS3动画学习
• 图片加载失败后CSS样式处理最佳实践
• 微信朋友圈图片九宫格排版自适应

| HTML相关

• 网页分享到QQ,QQ空间，微博，微信
• SVG基础学习

| 前端工程化

• webpack 配置babel,转化ES6 新的api
• 检查webpack编译之后的代码是否存在ES5+代码
• 处理IE9不支持webpack打包后体积依然过大的css文件
• webpack混用css modules
• 使用webpack-chain新增scss配置
• Webpack打包“JavaScript heap out of memory”错误
• yarn安装依赖、构建依赖速度慢解决方案
• 前端异常监控Sentry安装和使用问题汇总
• sentry配置和错误主动上报实例
• Sentry结合rrweb实现用户操作录屏和错误场景录屏播放重现
• rrweb前端web页面录制与回放插件的使用和原理

| ES6相关

• finally垫片用于支持Promise.finally

| 兼容性

• IE10以下报错：SCRIPT438: 对象不支持“forEach”属性或方法
• 解决IE9下报错：无法获取未定义或 null 引用的属性“remove”
• 微信H5下IOS返回不刷新页面解决方案

| 其他

• 如何将Github打造成免费的图床
• 搭建自己的unpkg服务来读取我们的私有库的包
• Chrome将变量下载并保存成JSON文件
• spy-debugger远程一键调试手机页面