重构前端体系系列 - 构建前端知识架构

发表于 更新于 分类于 本文字数： 1.1k 阅读时长 ≈ 1 分钟

重新理解前端

前端工程师已经成为研发体系中重要的岗位，但与此相对是大部分前端工程师的知识其实都是来自于实践和工作中零散的学习，这个现状就引发了一系列的问题

  • 前端的基础知识薄弱：散点自学 + 基础不牢 
1
基础知识的欠缺会让你束手束脚，更限制你解决问题的思路
  • 技术上存在短板，就会导致前端开发者的上升通道不甚顺畅 
1
小公司的程序员，只能靠自己摸索，这样就很容易陷入重复性劳动的陷阱，最终耽误自己的职业发展
  • 前端工程师也会面临技术发展问题带来的挑战 
1
前端社区高度活跃，前端标准也在快速更新，这样蓬勃发展对技术来说无疑是好事，但是副作用也显而易见，它使得前端工程师的学习压力变得很大。

大部分人学前端的方式是 “土法学前端”，他们对于知识的理解基本都停留在点上，从来没有大范围把这些点串成线，形成自己的知识体系，因此才会出现遗漏和盲点

前端工程师的成长视角

  • 是立足标准，系统性总结和整理前端知识，建立自己的认知和方法论
  • 是放眼团队，从业务和工程角度思考前端团队的价值和发展需要。只有这样做，才能够持续发展，在高速发展的技术和工程浪潮中稳稳立足
  • 以完备、体系化的方式理解和思考前端的基础知识和工程实践

事实上，前端的能力可以带来更多的业务场景，这些有待于我们去发掘
建立自己的知识体系和方法论，才能够保持领先优势

明确前端的学习路线和方法

学习目标

  • 摸索出适合你自己的前端学习方法
  • 帮助建立前端技术的知识架构
  • 理解前端技术背后的核心思想

前端学习方法

建立知识架构

  • 学习的过程实际上就是知识架构不断进化的过程
  • 通过知识架构的自然延伸，我们可以更轻松地记忆一些原本难以记住的点，还可以发现被忽视的知识盲点
  • 建立知识架构同样利于面试

追本溯源

  • 有一些知识，背后有一个很大的体系
  • 关注技术提出来的背景，找到知识的源头
  • 关注原始的论文或者文章，关注作者说的话

比如 关注 scheme，Java 与 JS 语言的异同

前端知识图谱

JavaScript

用一定的词法和语法，表达一定语义，从而操作运行时

所以分为以下三个部分

  • 运行时
  • 文法
  • 语义

image

HTML 和 CSS

HTML 的功能主要由标签来承担，所以我们首先会把标签做一些分类

  • 文档元信息：通常是出现在 head 标签中的元素，包含了描述文档自身的一些信息；
  • 语义相关：扩展了纯文本，表达文章结构、不同语言要素的标签；
  • 链接：提供到文档内和文档外的链接；
  • 替换型标签：引入声音、图片、视频等外部元素替换自身的一类标签；
  • 表单：用于填写和提交信息的一类标签
  • 表格：表头、表尾、单元格等表格的结构

image

浏览器的实现原理和 API

image

前端工程实践

image

前端知识架构

image

小结

建立一个理解前端的全景图
这样，任何时候都能够体系地思考问题，分析问题，解决问题！