复杂的
1. 组件封装
QBox
QButton: 首先支持 antd Button 所有的属性, 我在它基础之上额外扩展了自己的属性
为什么要封装:
* 按钮的 icon 的位置, 可能是在左边 也可能在右边, 划过icon 有时会有背景色, antd 的 icon 只能在左边, 他的icon划过没有单独的背景色
* 我们公司的 按钮要有点击事件, 按钮的 icon 也要有点击事件, antd 带icon的按钮只有一个事件 不能区分
* 我们公司的 button 有滚动的效果, 记录左侧 menu 点击, 这个button 有2个左右分页的按钮可以点击, 这个滚动效果是我用 button 结合 swiper 封装的
* 我们公司的幽灵按钮 有很多颜色, antd 只有4种颜色 不支持我们的需求
* 我们的表格的功能按钮 有单排 还有多排的, antd 的表格的按钮 只支持单排的, 他单排的样式也要自己调整间距等样式, 我封装完以后 单排按钮只需要传一个一
维数组, 如果传2维数组就是多排的, 只需要控制数据是一维数组 还是二维数组就可以了, 不需要自己调整按钮的左右 上下位置等样式
<QButton
dataSouce=button 数据
className
style
radius=button 圆角
size=button 大小
justify=按钮对齐的位置
iconDirection=icon位置
spacing=按钮的左右间距
marginTop=多行按钮的上下间距
onOk=点击按钮的回调
onIcon=点击icon的回调
支持antd button的所有属性
/>
dataSource = [
{
title: 按钮文字
icon: icon 图标
disabled: 按钮禁用
ghost: true, // 幽灵按钮
color: 幽灵按钮的颜色
// 支持 antd 所有的 button 属性
},
{
title: 按钮文字
icon: icon 图标
disabled: 按钮禁用
},
]
QImage: 首先我支持 antd Image 所有属性, 我在它基础之上额外扩展了自己的属性
为啥封装:
* 组件里监听图片加载是否失败 失败展示默认图片
* 图片的懒加载 react-lazyload
* 我们图片组件有点击记录数字的功能
dataSouce 多长图片的数据
src 图片地址
width 宽
height 高
onClick 图片的点击事件
className
scrollContainer 懒加载滚动节点
QForm: 首先我支持 antd Form 所有属性, 我在它基础之上额外扩展了自己的属性
为啥封装:
* 封装表单可以大量的减少写表单的代码量 只需要写十几行代码 就可以实现任意表单
* 一排有多个表单 不需要自己写布局 只需要传递一个 二维数组就可以了
* 扩展了很多表单额外的功能, 比如 日期的格式化, 比如 select 下拉加载, select 样式
* 提交表单 回填表单 不需要自己额外处理
<QForm
dataSource // 数据源
model // 1 横向布局 / model: 2 纵向布局 model: 3 原生的 antd 布局
values // 表单回填
onOk // 表单默认确定按钮点击回调
justify // 表单的整体对齐方式
/>
面试官可能问的问题
* 表单联动怎么办: 每个json对象可以写事件, 默认支持 antd 所有的表单事件, 并且额外扩展了很多自定事件
* 布局(比如几个表单是一排的): json数据里定义 二维数组, 有几个 就有一个表单展示成一排
* 怎么控制 要展示哪些表单
{
id: 1,
cell: 10, // 占的宽度
className: 'abc',
label: '小花', // 当前行配置的标题
type: 'Input', // 装饰组件的类型
field: 'i1', // 后台参数
placeholder: '请输入文字',
rules: [{ required: true, message: '必填' }],
}
CardPro
* 这个组件包含了很多其他公共组件 例如 QImage, QCard, QIcon, QTree, QButton 等等
* 这个组件左侧是一个 tree, 划过这个 tree 会弹出下拉菜单 可以动态添加 删除 编辑这个 tree, 点击tree 可以切换右侧的图片列表展示的数据
图片列表可以点击并且可以按照点击的顺序展示数字, 标题可以编辑
* CardPro 支持图片上传功能, 上传后的图片会到右侧的图片列表里
* tree 和 图片列表 支持搜索的功能
<CardPro
tree={{
data // tree 的数据
expandedKeys: ['0-0', '0-0-0', '0-0-1'], // 默认展开的 tree
onSelect, // tree 选中回调
onSearch, // tree 搜索
}}
card={{
data // 右侧卡片的数据
onClick // 右侧卡片的点击
color // 卡片选中的边框颜色
}}
/>
2. 0-1搭建项目
* 我在上家公司, 从0-1搭建过很多项目, 比如 xxx 项目是我从0-1搭建的, 我用 umi4 + dva 搭建的这个项目
* 首先是 pageage.json 里配置环境变量, cross-env 注入不同的环境
* 然后在 config 目录下的 env.js 获取 process.env 获取当前环境, 因为我们有好几个测试环境 所以需要区分
* 在 proxy.js 里通过 env 的值配置后台跨域代理
* 在 config.js 配置路由, 配置懒加载, 配置路径别名, antd 皮肤
* 再配置 css 命名冲突, css 命名冲突 我自己调研了一个插件 react-css-modules, 这个插件是在 confgi.js 里配的, 需要配置
他的 哈希规则, 还有配置哪些目录不需要通过 react-css-modules 进行转义, 然后说一下这个插件的用法
* 创建src下的目录, 制定目录规范
assets 代表静态文件的目录
cfgs 所有环境变量的目录
layouts 全局布局的目录
models 公共dva的目录
services 接口请求的目录 (详细说), 首先有一个 api.js 包含所有的接口, 每个pages目录对应一个单独的 js 文件, 里面通过导出
暴露接口调用的方法, 最终通过一个 index.js 整体导出所有文件的接口
utils 目录封装所有的公共方法 比如 axios
3. 项目优化
* useMemo 具体在哪用的
* memo
* useCallback
* 组件懒加载
* 图片都适用 webp
* 组件传值的使用 Context useContext
* 使用 e6, 7 减少代码量
* 大量使用 css3 属性
4. css 命名冲突:
xxx 项目他的 css命名冲突一开始用的 css-module, 这个是以对象的方式写css 使用起来不方便,
我调研了 react-css-modules 这个插件, 这个插件 只需要把 className 换成 styleName 就可以解决 css 命名冲突,
他会自动的给 css 名称后面添加 唯一的 hash 值, react-css-modules 需要配置哈希值的生成规则, 然后再配置 cssLoader
的生成规则, 这2个生成的 hash 规则要保证一致, 这里还碰到一个问题, umi3框架的时候 cssLoader 和 react-css-modules
生成的 hash 值一致, 没有任何问题, 但是在 umi4里 cssLoader 和 react-css-modules 生成的 hash 值不同了, 经过调研
是因为 css-loader版本升级以后生成hash值的算法变了, 所以我使用 generic-names 插件生成了唯一的 hash 值规则, 使
cssLoader 和 react-css-modules 按照同一个规则生成 hash值, 解决了 css 名称不同的问题
5. 配置 vw vh 替换掉 rem
* 移动端我们公司以前一直使用 rem 做响应式布局, 后期我调研了 vh, vw, 使用 postcss-px-to-viewport把
我们公司的 rem 换成 vh, vw
6. 提取公共组件库 (给整个公司使用)
* 放到了公司 内部的 npm 上
* 怎么发布: npm publish 发布到 npm 上
* 重新发版要 改 package.json 的 version
发布到npm 上都要package.json改哪些东西 ?
1. name
2. version 版本号
3. main 入口文件
学习途径
* 掘金
* 大牛的博客
* 项目中学习
1) 封装公共组件 不断地迭代组件 不断提升项目开发效率
2) 项目中碰到各种问题 通过 google issur 等解决问题
* 看很多书籍