- 博客(202)
- 资源 (7)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 虚拟滚动列表的 React 实现 -- 简单的等高虚拟列表
参考剖析无限滚动虚拟列表的实现原理虚拟滚动列表的大致方案虚拟列表的实现，大致上的思路就是：只加载可是区域范围内的列表项，发生滚动时，动态计算哪些列表项需要渲染为实现，我们需要(以下步骤以列表项高度 itemHeight 确定的情况为例，列表项高度不定时会麻烦一些)有一个已知高度 height 的滚动容器 scrollContainer计算所有数据 data 都渲染所需要占用的高度 itemHeight * data.length , 然后用这个高度撑开滚动容器，从而获得滚动条及滚动容器
2022-04-21 18:40:45
2025
原创 使用 vite 代替 webpack 搭建 react 前端开发环境
说明在大型前端项目中，我们一般会使用 webpack、Rollup 等工具进行模块整合，但是庞大的代码量会使得我们在开发阶段花费更多的时间在（代码改动 --> 页面渲染）这个阶段，即使使用 HMR 这个问题也没有完全的解决，项目代码量达到一定规模，积少成多，HMR 带来的效率提升会逐渐不够vite 可以解决的问题快速启动本地开发服务器代码更新快速显示在浏览器页面中在开发阶段 vite 会使用 esbuild ,同时 基于 原生 ES 模块实现 高效的 HMR在生产阶段 vit
2022-01-26 18:21:56
5166
5
原创 升级到 React Router v6
说明React Router v6 正式版本与 2021-11 月发布，使用起来最大的感受是：全面拥抱 Hooks, 提供简洁的 api, 但是对类组件不是很友好，但是可以通过封装来使用。与 v5 版本相比 v6 使用 TS 重写，Api 较 v6 有了不少的改动，直接迁移不建议，工作量会很大，官方说会有一个向后兼容包 但是截止 2021-12-17 还没有看到，可以时刻关注官方的迁移文档 ，下边也会列举一些在迁移 v5 => v6 过程中的记录React Router v6 官方文档
2022-01-04 19:05:38
750
原创 Typescript 进阶使用
说明去年开始入坑 TypeScript , 在这之前公司的项目中用的时 flow, 同样都是做类型检查，明显 TypeScript 更加严格，且社区支持更好一些。上手 TypeScript 初期会有些不习惯，但是使用一段时间后会发现，TS 带来的类型检查、编辑器提示是真的方便，我也从 “只能写一些简单的类型组合” 慢慢的开始可以使用一些”进阶的技巧“原本打算梳理一下自己的学习所得，但是发现这篇文章（TypeScript 的另一面：类型编程）写的很详细，并且很有用，我就不再献丑了，下面文章仅记
2021-08-09 18:59:05
330
原创 入手前端单元测试(二) -- 匹配器、Mock、配置文件
1. expect 的用法及 ”匹配器“expect 用来检查某个值是否符合预期，匹配器则是匹配的方法。expect.not 用来检查某个值是否不匹配结果expect.resolves 用来结构 promise ,从而判断其返回值（注意：这种 expect 需要在 test 中 return expect; 或者使用 async await ）expect.rejects 同上用来判断 promise reject 后的结果expect.assertions(number) 用来验证在测试期间
2021-07-20 16:01:38
426
原创 基于 next.js + mdx 搭建组件库文档项目(二) -- mdx 控件封装实现组件的演示与 Props 列表
说明经过上阶段的配置虽然可以在项目中使用 mdx 语法 来创建页面了，但是我们的组件库有一些定制化的需求：交互式的组件演示、组件 Props 列表展示。这些功能如果可以通过封装来实现，会大大提升开发效率Props 与 Playground 的对外接口，将会仿照 docz 的 Props Playground1. Props 控件实现Props 是用来展示组件属性列表的，参考 docz 提供的 api 实现, 我们需要将组件传给 这个控件，让这个控件获得 属性列表后展示我们的组件是通
2021-06-23 10:33:16
859
2
原创 使用 Immer 代替 immutable 在 react 项目中实现不可变数据
说明immer 的主旨是通过更简单的方式使用 immutable 不可变数据，它是基于 copy-on-write 机制的（如果资源重复未被修改，则无需创建新的资源，资源会在副本与原始位置之间共享；修改则必须创建一个副本；通过这个机制 复制操作会被推迟到第一次写入时进行，显著的减少资源消耗，同时资源修改操作增加少量开销）通常来讲 react 的 state 以及 redux 存放在 store 中的 state 都是不允许直接修改的, 需要我们手动去创建一个新的 state如果我们存放的数据中有 A
2021-05-20 17:32:05
1002
2
原创 封装 mobx 6 + typescript 实现React状态管理 (3) -- mobx 封装后常见场景使用案例
1. 类组件使用示例import { disposeOnUnmount } from 'mobx-react';import { Button } from 'antd';import { TGlobalStore, inject } from 'portalBase/store';import { Link } from 'react-router-dom';import UserCreateForm from './view/UserCreateForm';import UserList f
2021-05-14 19:06:26
898
原创 封装 mobx 6 + typescript 实现React状态管理 (2) -- mobx 封装
说明相比于 redux 的集中状态管理，mobx 在概念上的确更简洁、灵活一些，我们只需要创建一个"可观察"对象，然后将组件变成了"观察者"就可以监控可观察对象的变化，从而做出响应了。但是为了团队合作更加方便，提升开发效率。适当的做一些封装还是很有必要的封装原则封装繁琐的重复的部分，让日常使用时有更少的引用，更少的配置抽象通用的部分，提供更方便的接口、方法调用借助 Typescript 提供更全面的提示及纠错能力，尽量借助类型推断，减少使用时的代码量全面考虑使用场景，减少后续改动频次
2021-05-14 19:05:21
826
4
原创 mobx 6 + typescript 实现React状态管理 (1) -- mobx 基本使用及 Api 详解
说明重要依赖版本mobx: 6.3.0 | mobx-react: 7.1.0 | react: 17.0.21. MobX 概念及结合 React 的简单使用State：数据Derivations: 派生，是一些由 state 计算而来的数据Reactions: 反应，与派生类似，但是不会生成数据，而是会执行某些任务，一般用来DOM更新或者网络请求Actions：行动，所有对 state 的改动都应在这里进行，Action 中触发的 state 改动又会自动的触发 Derivati
2021-05-14 19:04:12
964
1
原创 webpack 5 模块联邦实现微前端疑难问题解决
webpack 5 模块联邦实现微前端疑难问题解决说明webpack 5 新增 Module Federation（模块联邦）功能，他可以帮助将多个独立的构建组成一个应用程序，不同的构建可以独立的开发与部署。借助模块联邦我们可以一定程度的实现微前端微前端官网Module Federation 模块联邦官网Module Federation 案例概念1. 什么是微前端？微前端将微服务理念扩展到前端开发，一般来讲一个微服务架构中会有多个后端团队开发不同的业务服务，而前端通常只有一
2021-04-19 18:56:33
7881
16
原创 Webpack 5.x 开发 React 组件库
Webpack 5.x 开发 React 组件库说明Webpack 5.x 相比于 Webpack 4.x 有了很多重大改进，有些改进对于我们使用它开发组件库有了更好的支持。Webpack 5 发布 – 升级内容需要 node 版本 v10.13.0 以上Webpack V5.15.0实现目标 Tree-shaking 支持 Code-splitting 代码分割实现（组件级别的分割） 对外输出模块类型 esm、umd、commonjs （当前版本 Webpack v5.15
2021-01-18 19:25:17
2630
5
原创 Rollup2.x 搭建React 组件库
Rollup2.x 搭建React 组件库说明Rollup 官网 版本最新Rollup 官方中文 版本滞后，有些 Api 已经改了，因此建议还是看英文原版打包工具对比测试网站本文 Rollup 2.x 组件库 Demo 地址Rollup 0.67.x 版本组件库重要依赖版本“rollup”: “^2.36.0”“rollup-plugin-styles”: “^3.12.1”,“@rollup/plugin-eslint”: “^8.0.1”,“@rollup/plugin-
2021-01-13 17:08:09
1857
原创 Lerna 多 package 源代码管理方案
Lerna 多 package 项目管理工具说明Lerna是一个用于管理包含多个软件包（package） 的 JavaScript 源代码管理方案参考Lerna 中文官网Yarn wrokspacelerna+yarn workspace+monorepo项目的最佳实践Lerna 配置详解1. 为什么要将项目拆分成多个 package ?当项目越来越大，拆分成多个 package 有利于降低软件的复杂度作为工具类、或者组件类项目，有助于使用者按照需要引用合适的 packag
2020-12-22 18:15:25
1910
原创 Safari 浏览器插件（扩展）开发
Safari 浏览器插件前期准备http://developer.apple.com 开发者账号注册 需要 Apple IDSafari Extension 旧版文档 适用于 2018 年前， Safari 12版本之前，大部分接口不可再使用Safari App Extension 新版文档 旧版中关于与浏览器APP 相关的接口，改为通过 Swift 实现，适用于 Safari 12版本及后续版本有关插入脚本或者样式的文档有关 NSExtension: 控制访问权限的配置上下文菜单与工具栏
2020-06-22 11:14:33
11227
1
原创 使用 webpack 开发 React 组件库
使用 Webpack 开发 React 组件库组件库设计要求使用 webpack 做模块开发以及打包打包后的格式为 umd 模块Code Splitting 代码分割第三方包排除打包 react、antd 、lodash 等样式文件抽离借助 babel-plugin-import 实现组件的按需引入主要文件结构├── package.json├── script # 一些脚...
2019-01-31 11:15:32
4836
7
原创 浏览器表单自动填充调研
自动填充保存用于登录此网站的密码，这个动作是需要用户手动确认的，如果用户没有保存则不会有，网站的这个功能主要是为了存储密码，如果是个普通表单，那么不会被浏览器记录（chrome 对设置了 name 的表单会有记录）自动填充分两种，一种是直接添加到表单中（非交互自动填充），一种是提供下拉选择（交互自动填充）firefox 中如果一个域名下只有一个账号密码记录，那么会自动添加到表单中chrome（非无痕模式） 中一个域名下无论有多少个账号密码记录，都会自动添加最近使用的到表单中。
2023-04-10 17:22:51
1155
1
原创 使用 Jest + Testing Library 完成 React 的单元测试
说明不同于普通JS测试，组件的测试会更关注 DOM 渲染，以及组件功能正确性，而不是组件内部某些方法调用等的测试Testing Library 包含 DOM 及 UI 组件测试的一系列工具, 支持 React Vue Angular 等多个框架组件测试目标编写可维护的测试，并通过测试可以确保组件在正确工作同时希望测试避免包含实现细节，以便组件重构时，不会破坏测试用例或者减慢开发速度针对 React 组件来说，应避免测试 state、声明周期、组件方法等Testing Librar
2021-07-23 11:35:21
2110
原创 入手前端单元测试(一) -- Jest 基本使用
说明什么是单元测试？单元测试是用来对一个模块、一个函数或者一个类进行正确性检验的测试工作单元测试的意义在于，如果某一天我们对代码做了改动，只要再跑一遍测试，如果通过，说明我们的改动对这个模块的行为不会造成影响；如果不通过，则说明修改后与原行为不一致，要么修改代码、要么修改测试。TDD 测试驱动开发先思考需求，然后编写测试用例，再写功能实现，通过测试用例来规范约束开发者编写出质量更高、bug 更少的代码，这种模式也可称为 ”测试驱动开发“ TDDTDD 三层含义Test-Dri
2021-07-20 15:59:24
502
原创 基于 next.js + mdx 搭建组件库文档项目(一) -- 开发环境搭建
说明之前使用过 Docz 来作为组件库文档搭建工具，它基于 gatsby , 提供了高度的定制化能力，但是截止 2021-06-22， Docz 停留在 v2.3.1（2020-04-05） 已经一年多，其所依赖的 gatsby 相关包，已经有了多个版本的更新，每次 安装 docz 都会在控制台收到大量的警告，虽然项目依然可以运行，但是为长久打算，决定放弃 Docz ，尝试基于 MDX 来搭建一个组件库预期计划使用 MDX 来作为文档的主要载体，这样组件库的文档还是通过 markdown 来
2021-06-23 10:28:33
2029
原创 Stylelint 接入说明
Stylelint 接入说明前因 为什么要使用 Stylelintstylelint 用来检查样式文件 css less sass 等是否符合规范, css 不能算作严格意义的编程语言，它是以描述为主的样式表，如果描述的混乱，没有规则，对于开源项目的协作者来讲，一定是一个定时炸弹。Styleint 官网预期使用节点开发时通过 vscode Stylelint 插件触发，并借助 vscode 等代码编辑器报错提示commit 提交时, 通过 husky 触发 lint-staged 然后
2021-02-23 18:33:05
1761
原创 Lerna 项目搭建 Publish Github workFlow
说明需求main 分支发布主要版本LTS 分支发布修订版本成员日常通过 PR 提交对代码库的变更搭建 Publish workFlow1. 明确项目的参与者权限Admin： 最高权限，可以对项目进行设置，且提交代码到 main 分支，不需要提 prMember: 成员权限（读写），除了不能用 setting 其他都可以，提交代码到 main 分支，需要提 pr外部协作者：最低参与权限2. Github 的受保护分支受保护分支主要用来规范对某个分支的提交操作规范，例如：m
2021-02-08 16:45:07
807
原创 lerna 项目中集成 babel lint-staged husky eslint
lerna 项目中集成 babel lint-staged husky eslintMonorepo 是针对单仓库、多 package 的流行解决方案, lerna 是它的一种实现。说明重要 package 版本“lint-staged”: “^10.5.3”,“eslint”: “^7.17.0”,“husky”: “^4.3.6”,“lerna”: “^3.22.1”“@babel/core”: “^7.12.10”因为项目采用 lerna 这种 monorepo 解决方
2021-01-13 17:41:04
2199
3
原创 Docz 组件库文档实现方案（三）
Docz 组件库文档实现方案（三）Docz 结合 Lerna 项目Docz 可以与组件库代码混合使用，即在组件实现的同级别目录创建扩展名为 mdx 的组件同名文件；如果你的项目是 lerna 项目，那么可以尝试另外一种方案，即：将组件库组件代码与docs 文档分离成两个子项目，这样每个子项目只关心各自的实现即可，下面我们把之前的案例改造成 docs 与 components 分离，源码可以到这里查看1. 将一个 lerna 项目改造成如下结构其中 /packages/mjz-ui/ 是组件库
2020-12-29 15:04:20
634
4
javascript 面向对象编程.pdf javascript 设计模式与开发实践.pdf
2018-03-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人