黑客
登录
客服
网络安全,渗透测试

前端程序员学习方法(前端程序员该如何提高自己)

日期:2021/5/11 19:11:55

在前端行业已经呆了快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 框架源码,用来标记判断是哪些节点属性需要更新

image.png

示例:

// 没有结合位运算
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 工具,用流程图等记录每一步变化、每一步的功能,记好备注等。比如下图:

image.png

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

写博客

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

参与开源项目

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

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

组团学习

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

最新教程

最新文章

推荐文章

热门文章

黑客技术 黑客软件 黑客教程 黑客书籍

关于我们 | 免责声明 | 学员守则 | 广告服务 | 联系我们

©2013-2021 xf1433.com 版权所有

本站资源仅供用于学习和交流,请遵循相关法律法规