前端高频面试题

复杂的

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 进行转义

    * 使用这个插件 postcss-px-to-viewport 配置 vh vw vmin vmax

    * 调研了阿里云的一个 清楚 CDN 缓存的一个插件 ali-cdn-sdk, 使用流水线发布成功以后 就可以自动的清除缓存了

    * 创建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 属性, 比如使用 grid 替代 flex

 

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 等解决问题

  * 看很多书籍