浅谈前端程序员的学习

在前端行业已经呆了快6年了，中间也摸鱼了几年，呆在舒适区浪费了大把的光阴。毕竟也不短时间了，根据个人感受与经历，在这里总结下前端程序员对于技术一个大体的学习方向。

一点愚见，如有不对，欢迎指出！

通用知识系列

算法

对于web前端来说，算法这东西看得太不重要了，至少目前是这样的，比如现在能完整的手写出一个正确的快速排序就比较少。

因为前端项目中能用到算法的场景太少了，除非一些特定的项目，所以大家感觉就是算法并不重要。而我们学习算法并不是说要在项目中哪哪哪必须要用到，而是要学习算法的思维，解决一个问题的方法有很多种，但是你如何判断这段代码是不是比较好的实现方式，好的标准是什么？

时间复杂度和空间复杂度可以很好的去量化一段程序的好坏，时间和空间复杂度越低则这段代码的性能越好。如果都不知道时间复杂度和空间复杂度，那又如何去优化呢？

学习算法是一个长期的过程，不要想着用半个月一个月来重点攻克算法，未来也还会不同的更好的算法被发明出来。但是你可以每天花半个小时来学习一下算法的知识，去做做算法题：比如在 leetcode 刷题，长期累积下来，将超越大部分同学，并且对于大厂的面试，算法知识也是必备的。

正则表达式

正则表达式还是比较常见的，但是一样很少有人去真正的学习正则表达式的语法。如果是遇到电话号码、邮箱、密码等需要正则表达式匹配的时候，也大都是在网上查找。

但是在前端掌握一些简单的正则表达式写法，在某些时候是非常高效的。例如字符串有一个非常强大的方法：replace。平时在用 replace 的时候大多都是直接进行字符串匹配替换，但是如果参数是用正则和函数，能更简洁高效的去实现功能。

// 日期格式化
dataFormat(date: Date = new Date(), fmt: string = 'YYYY-MM-DD hh:mm:ss') {
  let o: any = {
    "Y+": date.getFullYear(),       // 年份
    "M+": date.getMonth() + 1,      // 月份 
    "D+": date.getDate(),           // 日 
    "h+": date.getHours(),          // 小时 
    "m+": date.getMinutes(),        // 分 
    "s+": date.getSeconds(),        // 秒 
    "q+": ((date.getMonth() + 3) / 3) | 0, // 季度 
    "S": date.getMilliseconds()     // 毫秒 
  }
  for (let k in o) {
    if (new RegExp("(" + k + ")").test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (a: string, b: number) => {
      
          if (b !== 0 && String(o[k]).length < 2 && a.length === 2) return `0${o[k]}`

          return o[k]
      })
    }
  }
  return fmt
}
复制代码

/**
 * 将不正规的json字符串替换成正规json字符串
 * eg: str = `{ first: 'first value', 'second': true, "third": "third value"}`
 *
 * result: "{"first": "first value", "second": true, "third": "third value"}"
 */
str2JsonFormat(str: string) {
  if (typeof str !== 'string') return str
  
  str = str.replace(/[\{|,]\s*([a-zA-Z0-9_]+?)\s*:|'/g, (a: string, b: string) => {
      if (a === "'") return '"'
      return `${a[0]}"${b}":`
  })

  return str
}
复制代码

位运算

程序中的所有数在计算机内存中都是以二进制的形式储存的。位运算就是直接对整数在内存中的二进制位进行操作。比如，and运算本来是一个逻辑运算符，但整数与整数之间也可以进行and运算。

位运算的知识是比算法更容易被忽略的，加了位运算的程序，可读性对于不懂位运算的同学来说是非常不友好的。但是只要掌握简单的位运算规则，平时项目种也能去优化，写出优雅的代码，并且在前端一些框架内是用了也是用了位运算来增加性能的。

下面是 vue3 框架源码，用来标记判断是哪些节点属性需要更新

示例：

// 没有结合位运算
function test(p1: string | undefined, p2: string | undefined, p3: string | undefined) {
  if (
    p1 && p2 && p3 ||     // 三个都有
    !p1 && !p2 && !p3 ||  // 三个都没有
    p1 && !p2 && !p3 ||   // 只有p1
    !p1 && p2 && !p3 ||   // 只有p2
    !p1 && !p2 && p3 ||   // 只有p3
    !p1 && p2 && p3 ||    // 只没有p1
    p1 && !p2 && p3 ||    // 只没有p2
    p1 && p2 && !p3       // 只没有p3
  ) {
    return null
  }
}

// 修改 --> 结合位运算的代码
function test1(p1: string | undefined, p2: string | undefined, p3: string | undefined) {
  let flag = 0
  if (p1) flag |= 1
  if (p2) flag |= 2
  if (p3) flag |= 4

  if (
    flag == 0 ||    // 三个都没有
    flag == 1 ||    // 只有p1
    flag == 2 ||    // 只有p2
    flag == 3 ||    // 只没有p3
    flag == 4 ||    // 只有p3
    flag == 5 ||    // 只没有p2
    flag == 6 ||    // 只没有p1
    flag == 7       // 三个都有
  ) {
    return null
  }
}
复制代码

以上两个方法是等价的，但是上面的明显比较杂乱，下面的比较清晰。还有因为位运算是底层的计算，性能好。

前端知识系列

浏览器工作原理

web前端写的项目都是在浏览器上运行的，所以掌握浏览器的工作原理对于前端程序员来说，是重中之重，是升阶路上不可绕过的知识点。

• 浏览器的组成组件
• 浏览器的引擎
• 网络
• 缓存
• 资源加载
• 回流与重绘等

浏览器的工作原理是项目优化的一个重要方向。

js的基础知识

js的基础知识应该是web前端程序员的安身立命的基石，对于基础知识的学习，我们不应该只是简单的用，还要探究其工作原理，这也是永不过时的知识点，越早掌握的越多越好。不管前端框架怎么迭代更新，不管出现什么更流行的前端框架，其本质还是对js基础知识的更灵活的应用。很好的掌握基础知识，能保证能够对于框架源码更有效的阅读。

• 事件循环
• 原型链
• 闭包
• 继承
• this 关键字
• 作用域等等

框架源码

学习最有效的方式之一就是去看一流程序员的代码，学习他们的代码思维，代码组织等。一个框架能够流行，这已经代表了其框架作者已处于顶级水平，而阅读他们的作品，也是一个最直接的学习方式。

现在高级以上程序员的面试，基本都会涉及到框架源码。这能直接反应一个人的学习态度，对于技术的追求，并且在开发项目中，阅读过源码和没有阅读过源码的开发者在开发功能，他们的逻辑组织会有明显的不同。阅读源码还是解决bug的一个利器，因为有见过很多同学，就莫名其妙的解决了bug，但是不知道为什么就解决了。

后端的基础知识

对于不懂后端的前端程序员来说，去了解下后端的逻辑还是很重要的，了解下后端的作用，数据库的基本操作及功能。在开发的时候，更加的得心应手。还要最重要的一点，了解后端的作用，可以不用背不必要的锅，可以不做本应该由后端去实现的功能 ^_^ !

学习方法

最后说一点，对于技术的学习，有一个共有的问题：就是学了之后，如果长时间不用，就会很快忘记了。

听过一个大佬说过的话：对于任何一个东西，你学过和没有学过，就是两个不同的境界。所以我们还是要坚持去学，但也是要有选择性的去学，像基础原理、通用的算法之类的肯定不会亏，但是不建议盲目的去追新技术，因为这有可能是付出和收获不成正比，要根据自身的条件去选择。

对于学习成果的检验，一个有效的方法是：你学完之后，讲给另外一个人听，如果另外一个人听懂了，那就代表你真正的掌握了。

记笔记

在学习一个新东西的时候，一定要记笔记。

比如学习源码：从初始化时候开始，我们可以用 processOn 工具，用流程图等记录每一步变化、每一步的功能，记好备注等。比如下图：

这在之后去复习的时候，根据之前的笔记是非常快的。

写博客

还要学着尝试去写博客，现在的博客平台非常多：掘金、知乎、简书、博客园等。不要怕写的不好，因为没有一个人一开始就能写的非常好的，这需要一个长期的练习过程。写博客的好处是非常多的，将自己学会的东西写成博客文章，在写的过程中，会想得更加深入、更加细化，如何让人更容易的理解；还能加深记忆，能促进交流，养成一个分享的习惯。

参与开源项目

参加开源项目的也是一个有效的提升自己的方式，如果是业内比较有名的开源项目，在简历上是一个非常加分的点。
而带来的好处简单说几种：

• 不断的学习和实践，与其它优秀的开发者一同提升技术
• 更容易获得大佬的指点
• 展现自己的能力，增加自己在业界内的影响力
• 增加简历上的亮点
• 更多收入的机会
• 在圈子内建立更多的人脉

组团学习

一个人独自学习是非常容易放弃的，其根本原因就是自我学习成本低，没人督促等，找同学一起学习，互相督促，互相交流，更容易坚持下来。