帮你梳理了一份前端知识架构图

news2024/9/24 23:22:05

列一份前端知识架构图

在上一篇文章中,我们简要地总结了前端的学习路径与方法,我们提到的第一个学习方法就是:建立知识框架。那么,今天我们就一起来列一份前端的知识框架图。

在开始列框架之前,我想先来谈谈我们的目标。实际上,我们在网上可以找到很多参考资料,比如 MDN 这样的参考手册,又比如一份语言标准,但是我们的课程既不是一本参考手册,也不是一份语言标准。参考手册希望做到便于查阅、便于理解和全面,语言标准的目标是严谨、无遗漏、无歧义。

而我们的课程有什么不同呢?我认为,作为一个课程,有两个目标:一个是把无法通过查阅解决的原理和背景讲清楚,另一个是把不方便查阅和记忆的内容整理好。

我会尽量避免像前面提到的两种文档一样逐条目罗列知识点和细节,当然,这不是在说两种文档没有价值,而是我们各有分工,参考手册和语言标准做的事情,我们没必要重复去做,即使做了也不一定能做得更好。

在这个课程里,我希望能和你一起打造一个前端知识的框架,再把知识点做个遍历,这其中,有原理和背景的部分,我去讲解知识的原理和背景。如果没有的话,我们就去讲整理和记忆这部分知识的方法,这样,即使你遇见无法一下子记住的知识,也可以很容易地查阅参考手册和标准来解决。

如果让我做一个划分,前端的知识在总体上分成基础部分和实践部分,基础部分包含了 JavaScript 语言(模块一)、CSS 和 HTML(模块二)以及浏览器的实现原理和 API(模块三),这三个模块涵盖了一个前端工程师所需要掌握的全部知识。

学完这三个部分,你再结合基本的编程能力,就可以应对基本的前端开发工作了。实践部分(模块四)重点会介绍我在工作过程中遇到的问题和解决方案,希望这块内容能够帮助你和你的前端团队找到可能的发展方向和着力点。

JavaScript

 

上面是我整理的 JavaScript 知识架构图,下面我们来具体解释一下。

在 JavaScript 的模块中,首先我们可以把语言按照文法、语义和运行时来拆分,这符合编程语言的一般规律:用一定的词法和语法,表达一定语义,从而操作运行时。

接下来,我们又按照程序的一般规律,把运行时分为数据结构和算法部分:数据结构包含类型和实例(JavaScript 的类型系统就是它的 7 种基本类型和 7 种语言类型,实例就是它的内置对象部分)。所谓的算法,就是 JavaScript 的执行过程。

类型部分中,对象比其它所有类型加起来都要更为复杂,所以我们会用较长的篇幅来讲解对象,包括它的一些历史和设计思路。

执行过程我们则需要按照从大结构到小结构的角度讲解,从最顶层的程序与模块、事件循环和微任务,到函数、再到语句级的执行。我们从粗到细地了解执行过程。

实例部分,对 JavaScript 来说类似基础库,JavaScipt 的内置对象多达 150 以上,考虑到我们即使逐次讲解也必定不如 MDN 更加细致全面,所以我们会从应用和机制的角度,挑选其中几个体系来讲解。

文法中的语法和语义基本是一一对应关系,在 JavaScript 标准中有一份语法定义表,它同样不适合一一讲解,我们会从 JavaScript 语法中特别的地方,以及与日常开发比较相关的地方来重点讲解,剩下的内容和词法部分,我们会带领大家做一些数据挖掘工作,从这份表格中找到一些和我们日常开发息息相关的内容。

语义的大部分内容我们会在运行时的讲解中透出,同时它又跟语法有对应的关系,所以我们不再单独拿出来讲解。

HTML 和 CSS

上面是我整理的 HTML 和 CSS 的知识架构图,我们来具体解释一下。

在 HTML 的部分,我们会按照功能和语言来划分它的知识,HTML 的功能主要由标签来承担,所以我们首先会把标签做一些分类,并对它们分别进行讲解。

我们都知道 HTML 的标签可以分为很多种,head 里面的我们称为元信息类标签,诸如 title、meta、style、link、base 这些,它们用来描述文档的一些基本信息。还有一类是一些诸如 section、nav 的标签,它们在视觉表现上跟 div 并没有区别,但是各有各的适用场景,我们把它们称作语义类标签。另外一类是 img、video、audio 之类的替换型媒体类标签,用来引入外部内容,平常开发中你也会经常用到。再有就是表单类的,比如 input、button。

所以,基于这样的分类,我把标签分成下面几种。

  1. 文档元信息:通常是出现在 head 标签中的元素,包含了描述文档自身的一些信息;

  2. 语义相关:扩展了纯文本,表达文章结构、不同语言要素的标签;

  3. 链接:提供到文档内和文档外的链接;

  4. 替换型标签:引入声音、图片、视频等外部元素替换自身的一类标签;

  5. 表单:用于填写和提交信息的一类标签;

  6. 表格:表头、表尾、单元格等表格的结构。

我们的重点会放在前四种标签上,表单和表格较少用到,而且基本以查阅型知识为主,这里就不拿出来讲解了。

除了标签之外,我们还应该把 HTML 当作一门语言来了解下,当然,标记语言跟编程语言不太一样,没有编程语言那么严谨,所以,我们会简要介绍 HTML 的语法和几个重要的语言机制:实体、命名空间。

最后我们会介绍下 HTML 的补充标准:ARIA,它是 HTML 的扩展,在可访问性领域,它有至关重要的作用。

CSS 部分,按照惯例,我们也会从语言和功能两个角度去介绍。在语言部分,我们会从大到小介绍 CSS 的各种语法结构,比如 @rule、选择器、单位等等。功能部分,我们大致可以分为布局、绘制和交互类。

在布局类我们介绍两个最常用的布局:正常流和弹性布局。绘制类我们则会分成图形相关的和文字相关的绘制。最后我们会介绍动画和其它交互。

浏览器的实现原理和 API

上面是我整理的浏览器知识架构图,我们来具体看一下。

浏览器部分我们会先介绍下浏览器的实现原理,这是我们深入理解 API 的基础。

我们会从一般的浏览器设计出发,按照解析、构建 DOM 树、计算 CSS、渲染、合成和绘制的流程来讲解浏览器的工作原理。

在 API 部分,我们会从 W3C 零散的标准中挑选几个大块的 API 来详细讲解,主要有:事件、DOM、CSSOM 几个部分,它们分别覆盖了交互、语义和可见效果,这是我们工作中用到的主要内容。

其他的 API 怎么办呢,别着急,在最后,我会给出一份 Chrome 已经实现的 API 跟 W3C 标准的对应关系和它的生成过程,来覆盖其它部分。

前端工程实践

最后一个模块是前端工程实践。我们在掌握了前面的基础知识之后,也就基本掌握了做一个前端工程师的底层能力。在这个模块中,我选择了性能、工具链、持续集成、搭建系统、架构与基础库这几个方向的前端工程实践案例,来与你一起分享我的经验。

性能

首先我们会谈谈性能。对任何一个前端团队而言,性能是它价值的核心指标,从早年“重构”的实践开始,前端有通过性能证明自己价值的传统。

但是性能并非细节的堆砌,也不是默默做优化,所以,我会从团队的角度来跟你一起探讨性能的方法论和技术体系。

工具链

下一个案例是工具链。这一部分,我将会探讨企业中工具链的建设思路。对一个高效又合作良好的前端团队来说,一致性的工具链是不可或缺的保障,作为开发阶段的入口,工具链又可以和性能、发布、持续集成等系统链接到一起,成为团队技术管理的基础。

持续集成

接下来还会给大家介绍前端的持续集成,持续集成并非一个新概念,但是过去持续集成概念和理论都主要针对软件开发,而对前端来说,持续集成是一个新的课题(当然对持续集成来说,前端也是一个新课题),比如 daily build 就完全不适用前端,前端代码必须是线上实时可用的。这一部分内容将会针对前端的持续集成提出一些建设的思路。

搭建系统

接下来的案例是搭建系统,前端工作往往多而繁杂,针对高重复性、可模块化的业务需求,传统的人工开发不再适用,搭建系统是大部分大型前端团队的选择。这一部分内容我将会介绍什么是搭建系统,以及一些常见的搭建系统类型。

架构与基础库

最后一个部分,会给大家介绍前端架构和基础库的知识。软件架构师主要解决功能复杂性的问题,服务端架构师主要解决高流量问题,而前端是页面间天然解耦,分散在用户端运行的系统,但是前端架构也有自己要解决的问题。

前端需求量大、专业人才稀缺,更因为前端本身运行在浏览器中,有大量兼容工作要做。所以前端架构的主要职责是兼容性、复用和能力扩展。这一部分文章我将会介绍前端架构工作的一些思路和切入点。

上面的这些案例来自我在领导手淘前端团队时的经验,和我在阿里巴巴工作参与晋升面试时听到的案例,这些内容几乎是每一个年轻的前端团队成长过程中都会需要的基础设施。

好了,前端的知识体系我们大致列出来了。你可能发现了,知识体系图中的每一个知识点,教程里都有与之对应的文章,这也是我的初衷:希望借由讲解这 40 余个知识点,帮你建立起前端的知识框架。

讲述形式

基于这份知识框架图,我们的课程主要采用两种讲述形式:一种是重点讲解的课程,一种是知识图谱型的课程。

重点讲解的课程我们会从技术的背景、原理和设计出发,把知识的内容呈现出来。这种形式适用于有体系和源流的知识,比较适合系统学习和理解,比如 JavaScript 中的对象、CSS 的排版。

知识图谱型的课程则提供一些方法,用表格或者脑图的形式来整理知识的结构。这种形式适用于零散的知识,比较适合记住大概,用到时去查阅,比如 JavaScript 的词法、HTML 中的所有标签、以及浏览器中的 API 就十分适合这样的讲解方式。

结语

今天我带你一起划分了前端的知识内容,前端的基础知识分成 JavaScript、HTML、CSS 以及浏览器四大重点模块,每个模块也分别有自己的技术重点。你可以在框架中,挑选你最需要的前端知识,按需学习。

当然,这篇文章最重要的是,我希望能帮你建立一个理解前端的全景图。这样,任何时候,你都能够体系地思考问题,分析问题。

你觉得你的划分跟我一样吗,你还有其他的想法,你觉得是否有想了解的知识不在其中,更多内容请查看:开发者网站

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/610917.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

GoogleTest之gMock:创建Mock

目录 MOCK_METHODmock方法的访问属性mock重载函数mock模板类mock非虚函数mock自由函数Nice/Strict/Naggymock方法简化参数mock具体类的替代方法代理给fake mock是用来模拟对象,隔离边界的一种测试方法,以便在开发阶段不需要依赖第三方或其他依赖项可以进…

C#,码海拾贝(31)——约化“对称矩阵“为“对称三对角阵“的“豪斯荷尔德Householder变换法“之C#源代码

using System; namespace Zhou.CSharp.Algorithm { /// <summary> /// 矩阵类 /// 作者&#xff1a;周长发 /// 改进&#xff1a;深度混淆 /// https://blog.csdn.net/beijinghorn /// </summary> public partial class Matrix {…

运维小白必学篇之基础篇第九集:Linux文件管理实验

Linux文件管理实验 实验作业&#xff1a; 1、筛选/etc/issue文件中的空行 2、筛选/etc/passwd文件中以“bash”结尾的行 3、筛选/etc/passwd文件中以“sync”开头的行 4、列出/etc/passwd文件中包含“dns”的行,并显示行号 5、创建a1-a3.txt3个文件&#xff0c;使用tar命令将这…

基于GD32的定时器不完全详解--定时、级联

SysTick 定时器 SysTick 是一个 24 位的倒计数定时器&#xff0c;当计到 0 时&#xff0c;将从 RELOAD 寄存器中自动重装载定时初值。只要不把它在 SysTick 控制及状态寄存器中的使能位清除&#xff0c; 就永不停息。 该定时器的介绍在MCU的手册中一般不会介绍&#xff0c;因为…

MySQL server安装记录

1 安装Notepad 运行下载的 npp.7.9.Installer.x64.exe 2 安装MySQL 将mysql-8.0.22-winx64.zip解压缩&#xff0c;我将其放置D盘根目录下。 进入文件夹&#xff0c;在目录中新建文件夹data和文件my.ini 用NotePad打开my.ini&#xff0c;输入以下内容并保存&#xff0c;其中目…

讨论和总结 树模型 的三种序列化 方式的区别(模型存储大小、序列化所用内存、序列化速度)...

一、前言 本文总结常用树模型&#xff1a; rf&#xff0c;xgboost&#xff0c;catboost和lightgbm等模型的保存和加载&#xff08;序列化和反序列化&#xff09;的多种方式&#xff0c;并对多种方式从运行内存的使用和存储大小做对比 二、模型 2.1 安装环境 pip install xgboos…

「车型分析」移动机器人控制系统典型应用车型 ——叉式移动机器人(AGV/AMR)

叉式移动机器人&#xff08;AGV/AMR&#xff09;是一种常见的移动机器人类型&#xff0c;它摆脱传统的人车操作&#xff0c;自动导航行驶&#xff0c;具有强大的柔性和智能性。叉式移动机器人&#xff08;AGV/AMR&#xff09;不同于传统叉车&#xff0c;它无需人工驾驶运行。具…

Spring纯注解开发模式让开发简化更简化

目录 一.注解开发二.注解定义Bean三.衍生注解四.纯注解开发模式五.注解实现注入 1.自动装配2.按名称注入3.简单数据注入4.读取properties配置文件六.Spring整合MyBatis 一.注解开发 以前跟老韩学习SE时他就说&#xff1a; 注解本质是一个继承了Annotation 的特殊接口,其具体…

龙华商业中心片区旧改:总建面161万平,分5个片区进行建设。

龙华商业旧改&#xff1a;总建面约161万平分5个片区进行建设 据了解&#xff0c;整个龙华商业旧改整体包含北、中、东、南一、南二五个片区&#xff0c;各个片区均整体实施。 更新单元南一片区项目&#xff08;金地宸峯府&#xff09;&#xff0c;拆除用地面积30836.8平方米&…

前4月同比增长超50%,这条座舱智能化赛道国产化率逼近50%

车市行情的低迷&#xff0c;并没有影响智能化人机交互功能的需求增长。 根据高工智能汽车研究院监测数据显示&#xff0c;2023年1-4月中国市场&#xff08;不含进出口&#xff09;乘用车标配HUD&#xff08;W/AR&#xff09;搭载交付55.36万辆&#xff0c;同比增长54.98%&…

附录2-小程序常用API

API有三大类&#xff0c;事件监听API&#xff0c;同步API&#xff0c;异步API 事件监听API都以on开头&#xff0c;比如wx.onWindowResize()监听窗口尺寸变化事件 同步API都以Sync结尾&#xff0c;同步API可以通过函数返回值直接获取&#xff0c;执行出错会抛出异常。比如 wx.…

健康管理系统开发笔记

健康管理系统 项目介绍功能架构项目结构maven项目搭建 项目介绍 健康管理系统是一款应用于健康管理机构的业务系统&#xff0c;实现健康管理机构工作内容 可视化、会员管理专业化、健康评估数字化、健康干预流程化、知识库集成化&#xff0c;从而提 高健康管理师的工作效率&a…

12.页面导航

页面导航 是 页面之间的相互跳转&#xff0c;我们在浏览器中可以使用 a链接 与 location.href 进行跳转 在小程序中可以使用 声明式导航(navigator标签&#xff0c;类似于a标签) 与 编程式导航(使用小程序导航API&#xff0c;类似于location.href) 来跳转页面 目录 1 声明式…

软考A计划-电子商务设计师-电商设计师重点

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例 &#x1f449;关于作者 专注于Android/Unity和各种游戏开发技巧&#xff0c;以及各种资源分享&am…

VS2019社区版和QT安装记录

下载 VS2019&#xff1a; Visual Studio 2019 版本 16.11 发行说明 | Microsoft Learnhttps://learn.microsoft.com/zh-cn/visualstudio/releases/2019/release-notes选择第一个&#xff0c;下载社区版。或者这里下载。 比较简单的方式就是直接打开&#xff0c;网络安装。但微…

camunda如何清理或归档历史数据

一、camunda如何清理历史数据 Camunda 提供了多种方式可以清理历史数据。以下是一些常见的方式&#xff1a; 1、使用 HistoryService#deleteHistoricProcessInstance 方法&#xff1a;该方法用于删除指定的历史流程实例以及与之关联的所有历史数据&#xff0c;包括历史任务、…

【微波实验1】 T形波导的内场分析及优化设计

实验目的 熟悉并掌握HFSS的工作界面、操作步骤及工作流程。掌握T型波导功分器的设计方法、优化设计方法和工作原理。 实验仪器 1、 装有windows 系统的PC 一台 2、 HFSS15.0 或更高版本软件 实验原理 本实验所要分析的器件是下图所示的一个带有隔片的T形波导。其中&#…

SpringBoot 设置动态定时任务,千万别再写死了~

怎么在SpringBoot项目中简单使用定时任务&#xff0c;不过由于要借助cron表达式且都提前定义好放在配置文件里&#xff0c;不能在项目运行中动态修改任务执行时间&#xff0c;实在不太灵活。 经过网上搜索学习后&#xff0c;特此记录如何在SpringBoot项目中实现动态定时任务。…

MySQL查询序号带小数点问题

案例&#xff1a; SELECT (num:num1) AS index, name, age FROM sys_user, (SELECT num:0) AS a order by age,name; 查询结果&#xff1a; datagrip和dbeaver查询结果不一样&#xff0c;使用cmd查询&#xff0c;默认也是无小数点的 但实际返回结果&#xff0c;其实是带点的 D…

CocosCreator制作地图外物品位置向导(指引/地图标点)

演示 图解 code goldTips&#xff1a;指引节点&#xff0c;更改位置使用 goldTipRotate&#xff1a;指引节点的子节点中具有指向性的节点&#xff0c;一般为带箭头&#xff0c;尖角等。 protected lateUpdate(dt: number): void {//可以不在lateUpdate中操作&#xff0c;…