【重学前端】001-开篇词

喜欢ヅ旅行 2023-09-29 09:54 1阅读 0赞

# 【重学前端】001-开篇词 #

### 文章目录 ###

*  【重学前端】001-开篇词
 *  一、重新理解前端
 *   *  1、前端发展现状
     *  2、当前前端工程师存在的问题
     *  3、怎么学前端
     *  4、四个模块
     *   *  JavaScript
         *  CSS 和 HTML
         *  浏览器
         *  前端综合应用
 *  二、明确你的前端学习路线与方法
 *   *  1、前端现状
     *  2、学习路径与学习方法
     *   *  0基础入门
         *  有了1年工作经验后
         *  两个学习前端的方法
 *  三、列一份前端知识架构图
 *   *  1、JavaScript
     *  2、HTML 和 CSS
     *   *  HTML 部分
         *  CSS 部分
     *  3、浏览器的实现原理和 API
     *  4、前端工程实践

# 一、重新理解前端 #

## 1、前端发展现状 ##

随着移动时代的到来，前端也开启了自己的“黄金时代”，它的职责变得更加重要，有了独立的发布权限，技术也变得更加复杂。一些传统软件开发和互联网服务端的方法论逐步移植到前端开发中，并形成了前端自己的工程体系，诸如持续集成、前后端分离、线上监控等。

## 2、当前前端工程师存在的问题 ##

前端开发之痛：散点自学 + 基础不牢

> 啊！我的后端也存在这样的问题！

## 3、怎么学前端 ##

关于前端工程师成长，我认为需要两个视角。一是**立足标准**，系统性总结和整理前端知识，建立自己的认知和方法论；二是**放眼团队**，从业务和工程角度思考前端团队的价值和发展需要。只有这样做，才能够持续发展，在高速发展的技术和工程浪潮中稳稳立足。

我觉得你需要通过**系统地学习和总结**获取知识，通过**练习**获取**编程能力**，通过**工作经验**来获取**架构和工程**能力。

## 4、四个模块 ##

### JavaScript ###

在 JavaScript 部分中，我主要会从**文法和运行时**的角度去讨论 JavaScript 语言。它们是**互相关联**的，而**语义**就是文法到运行时之间的**桥梁**；它们分别又是完备的，任何语言特性都离不开两者，所以从**语法和运行时**的角度，我们都可以了解完整的 JavaScript。

### CSS 和 HTML ###

CSS 和 HTML 部分，会侧重从**语言和设计思想**的角度来讲解，我们同样可以对两者的全貌建立一些认知。

### 浏览器 ###

浏览器部分，包含了**浏览器工作的原理和一些重要的 API**，包括 BOM、DOM、CSSOM和其他一些内容。了解了这些知识，你才能把 JavaScript 和 HTML、CSS 连接起来，用JavaScript 来实现功能。

> CSSOM？作为一个后端开发者也是第一次听说这个词！

### 前端综合应用 ###

前端综合应用部分，主要是我的一些工作经验，我会选择我在手淘和淘宝工作中的一些案例  
来辅助讲解。

# 二、明确你的前端学习路线与方法 #

## 1、前端现状 ##

> ES 6 中引入的新特性超过了过去十年的总和，新特性带来的实践就更多了，仅仅是一个 Proxy 特性的引入，就支持了 Vue Js 从 2.0 到 3.0 的内核原理完全升级。

**缺少系统教育 + 技术快速革新**，在这样的大环境下，前端工程师保持**自学能力**就显得尤其重要了!

## 2、学习路径与学习方法 ##

### 0基础入门 ###

读几本经典的前端教材，比如《JavaScript 高级程序设计》《精通 CSS》等书籍，去阅读一些参考性质的网站也是不错的选项，比如 MDN ；

### 有了1年工作经验后 ###

这个专栏！

**本专栏目标：**

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

### 两个学习前端的方法 ###

**第一个方法：建立知识架构**

> 第一个方法是建立自己的知识架构，并且在这个架构上，不断地进行优化。

**什么是知识架构：我们可以把它理解为知识的“目录”或者索引**，它能够帮助我们把零散的知识**组织**起来，也能够帮助我们**发现一些知识上的盲区**。

> 知识的架构是有优劣之分的，最重要的就是逻辑性和完备性。

**JavaScript 顶层目录：**

文法（词法、语法）、语义、运行时（类型、执行过程）；

**任何的计算机语言：必定是“用规定的文法**，去表达特定**语义**，最终操作**运行时**的”一个过程。

文法可以分成词法和语法，这来自编译原理的划分，同样是完备的。语义则跟语法具有一一对应关系，这里暂时不区分。

**程序 = 算法 + 数据结构，那么，对运行时来说，类型就是数据结构，执行过程就是算法。**

> 当我们再往下细分的时候，就会看到熟悉的概念了，词法中有各种直接量、关键字、运算符，语法和语义则是表达式、语句、函数、对象、模块，类型则包含了对象、数字、字符串等……

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

**第二个方法：追本溯源**

相似的概念可能存在天壤之别！有一些知识，涉及的概念本身经历了各种变迁，变得非常复杂和有争议性！

这种时候，就是我们做一些考古工作的时候了。追本溯源，其实就是关注技术提出的背景，关注原始的论文或者文章，关注作者说的话。

操作起来也非常简单：**翻翻资料**（一般 wiki 上就有）找找历史上的文章和人物，再顺藤摸瓜翻出来历史资料就可以了，如果翻出来的是历史人物（幸亏互联网的历史不算悠久），你也可以试着发封邮件问问。

这个过程，可以帮助我们理解一些看上去不合理的东西，有时候还可以收获一些趣闻！

# 三、列一份前端知识架构图 #

## 1、JavaScript ##

![请添加图片描述][d6280bb0796548de866b0cfadeda576e.png]

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

**运行时：分为数据结构和算法**部分，**数据结构**包含类型和实例（JavaScript 的类型系统就是它的 7 种基本类型和 7 种语言类型，实例就是它的内置对象部分）。所谓的**算法**，就是 JavaScript 的执行过程。

**文法中的语法和语义**基本是一一对应关系。

## 2、HTML 和 CSS ##

![请添加图片描述][05dd6fad42a9459fbee26c7bca667326.png]

### HTML 部分 ###

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

### CSS 部分 ###

大致可以分为**布局、绘制和交互类。**

布局类：两个最常用的布局：**正常流和弹性布局**。

绘制类：**图形**相关的和**文字**相关的绘制。

交互类：动画和其它交互。

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

![请添加图片描述][5143166fba3547eb9bd6226e5d1fd390.png]

## 4、前端工程实践 ##

性能、工具链、持续集成、搭建系统、架构和基础库。

[d6280bb0796548de866b0cfadeda576e.png]: https://img-blog.csdnimg.cn/d6280bb0796548de866b0cfadeda576e.png
[05dd6fad42a9459fbee26c7bca667326.png]: https://img-blog.csdnimg.cn/05dd6fad42a9459fbee26c7bca667326.png
[5143166fba3547eb9bd6226e5d1fd390.png]: https://img-blog.csdnimg.cn/5143166fba3547eb9bd6226e5d1fd390.png