菜鸟前端的碎碎念

怎么样才能配得上“初级前端工程师”(2020.12.22)

作为工作半年的,实习一年菜鸟前端。我可以大概总结出,什么样的人才配得上称作为“初级前端工程师”

  • 熟练掌握js一些基本操作。特别是数组字符串NumberDate等对象的操作方法,就是高程前几章的东西吧,这在业务场景中使用的特别多。
  • 熟练掌握一种前端框架的用法。基本的生命周期、组件通信、错误边界等等。
  • 熟练掌握一种node框架。能够做到前后端分离,node请求后端,并且处理数据,将处理后的数据传到web
  • 能够了解前端一些不大但是确很重要的知识点,会让你工作轻松很多。
    • 正则表达式: 在某个业务场景下,我曾写过两个正则去匹配代码中的含中文的注释,这里列出来
      • 匹配单行注释:// [\s\S]*[\u4e00-\u9fa5]{1,}[\s\S]*,
      • 匹配多行注释:/\*\*[\w\W]*?[\*+]\/
    • 基础算法:过来人告诉你,算法在业务场景中还是很常见的,即使是前端web业务也是。
      • 数组转树,树转数组!!!用的巨多!!。
      • 还有动态规划,就是简单的找规律然后映射出来。
      • 还有就是while等,那种到临界值才会终止的那种。例如轮询请求。
  • 学会封装,有能力封装出比较有通用性的组件。提高代码复用性在我的业务场景中,我封装过包括但不限于下面这些组件(以后有机会可以写博客记录一下);
    • CommonTable: 支持前端分页、后端分页、数据loading、数据筛选、数据选中、数据导出、以及针对不同业务场景的编辑删除审核等。
    • 全局导出按钮: 支持通过后端api导出或者直接数据进行导出。
    • CommonModal: 在Modal内的FormItem都受控的情况下,支持传入自定义表单内容、暴露出确认回调。
    • CommonForm: 针对平台的全局筛选,支持筛选项联动、筛选项受控/非受控情况、路由记录筛选参数、筛选项可配置,用户可增删筛选项。
    • LineChart, PieChart: 基于BizCharts封装,默认支持数据排序,只展示Top N数据、图表图例受控筛选、隐藏0元数据、loading态等,支撑全平台所有折线图与饼图。
    • ChartCard: 通常跟LineChart或者PieChart一起使用,支持自定义用户操作,如暴露TopN隐藏0元账单选项,并将用户的配置向下传到子组件内。
    • ColumnSettings: 当页面展示Table的列过长时,支持用户自定义列配置,可以选择隐藏某些列。
    • MenuSettings: 同上,支持用户自定义菜单项。
    • PeopleWrapper: 根据用户的email获取到用户信息,支持缓存,通过用户信息能在公司内部办公软件发起聊天。
  • 考虑代码的通用性,以及后续开发的复用性,在我开发中常有这样的习惯。
    • 列表项、tab项、或者数据映射项,常自定义一个Map或者(params)=>Map,当后续有纬度增加时,可直接在Map中配置。
    • 封装组件时,希望传入的更多的不是data而是getData: async()=>data这种异步方法,不要将跟业务相关的Api及数据请求放在通用组件中,这样更能提高组件的通用性。
  • 能够承接较为复杂的业务场景,如:
    • 大文件分片上传
    • 数据请求队列
    • node层对数据进行再加工/过滤等。
    • 根据用户自定义配置渲染出不同形态。
    • 获取用户授权并且读取用户云文档

未完待续

-------------本文结束感谢您的阅读-------------