重学前端-总结：02 、列一份前端知识架构图

待我称王封你为后i 2021-09-28 05:34 326阅读 0赞

### 文章目录 ###

*  重学前端-总结：02 、列一份前端知识架构图
 *  前言
 *   *  参考资料作用：
     *  课程有两个目标：
 *  JavaScript
 *  HTML 和 CSS
 *  浏览器的实现原理和 API
 *  前端工程实践
 *   *   *  性能
         *  工具链
         *  持续集成
         *  搭建系统
         *  架构与基础库
 *  讲述形式
 *  知识架构
 *  课程链接

# 重学前端-总结：02 、列一份前端知识架构图 #

# 前言 #

本章节讲述列一份前端的知识框架图。

## 参考资料作用： ##

比如 MDN 这样的参考手册，又比如一份语言标准，但是我们的课程既不是一本参考手册，也不是一份语言标准。参考手册希望做到便于查阅、便于理解和全面，语言标准的目标是严谨、无遗漏、无歧义。

## 课程有两个目标： ##

1、把无法通过查阅解决的原理和背景讲清楚，  
2、把不方便查阅和记忆的内容整理好。

在这个课程里，打造一个前端知识的框架，再把知识点做个遍历，这其中，有原理和背景的部分，去讲解知识的原理和背景。

# JavaScript #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70]  
整理的 JavaScript 知识架构图，在 JavaScript 的模块中，首先我们可以把语言按照文法、语义和运行时来拆分，这符合编程语言的一般规律：**用一定的词法和语法，表达一定语义，从而操作运行时。**  
。

# HTML 和 CSS #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 1]  
上面是我整理的 HTML 和 CSS 的知识架构图，我们来具体解释一下。  
**在 HTML 的部分**，按照功能和语言来划分它的知识，HTML 的功能主要由标签来承担，所以我们首先会把标签做一些分类，并对它们分别进行讲解。

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

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

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

# 浏览器的实现原理和 API #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 2]

# 前端工程实践 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 3]

### 性能 ###

对任何一个前端团队而言，性能是它价值的核心指标

### 工具链 ###

对一个高效又合作良好的前端团队来说，一致性的工具链是不可或缺的保障，作为开发阶段的入口，工具链又可以和性能、发布、持续集成等系统链接到一起，成为团队技术管理的基础。

### 持续集成 ###

持续集成并非一个新概念，但是过去持续集成概念和理论都主要针对软件开发，而对前端来说，持续集成是一个新的课题

### 搭建系统 ###

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

### 架构与基础库 ###

案例来自领导手淘前端团队时的经验，在阿里巴巴工作参与晋升面试时听到的案例，这些内容几乎是每一个年轻的前端团队成长过程中都会需要的基础设施。  
知识体系图中的每一个知识点，专栏里都有与之对应的文章

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 4]

# 讲述形式 #

课程主要采用两种讲述形式：一种是重点讲解的课程，一种是知识图谱型的课程。

# 知识架构 #

划分了前端的知识内容，前端的基础知识分成 JavaScript、HTML、CSS 以及浏览器四大重点模块。  
附录：知识点发布顺序  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 5]

# 课程链接 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70]: /images/20210923/8bdd8716856843b794e49405b9734b85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 1]: /images/20210923/1840e130188c4650a54e46836a8797e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 2]: /images/20210923/ad2d6094ece04abfb35177bfd958a15a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 3]: /images/20210923/93217f8833324d80b1121f300c670f64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 4]: /images/20210923/9a827b694d8642fdb1b57909a5a21dff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70 5]: /images/20210923/07132499df2749329aa7207eb6bcbe6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center]: /images/20210923/edcc3938f507439995cd30a21c23f2dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1bmZlbmc0ODI_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210923/8d81fe1062a041faa8037749155fc0f7.png