【重学前端】001-开篇词
@[toc]
一、重新理解前端
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
在 JavaScript 的模块中，首先我们可以把语言按照文法、语义和运行时来拆分，这符合编程语言的一般规律：用一定的词法和语法，表达一定语义，从而操作运行时。
运行时：分为数据结构和算法部分，数据结构包含类型和实例（JavaScript 的类型系统就是它的 7 种基本类型和 7 种语言类型，实例就是它的内置对象部分）。所谓的算法，就是 JavaScript 的执行过程。
文法中的语法和语义基本是一一对应关系。
2、HTML 和 CSS
HTML 部分
- 文档元信息：通常是出现在 head 标签中的元素，包含了描述文档自身的一些信息；
- 语义相关：扩展了纯文本，表达文章结构、不同语言要素的标签；
- 链接：提供到文档内和文档外的链接；
- 替换型标签：引入声音、图片、视频等外部元素替换自身的一类标签；
- 表单：用于填写和提交信息的一类标签；
- 表格：表头、表尾、单元格等表格的结构。
CSS 部分
大致可以分为布局、绘制和交互类。
布局类：两个最常用的布局：正常流和弹性布局。
绘制类：图形相关的和文字相关的绘制。
交互类：动画和其它交互。
3、浏览器的实现原理和 API
4、前端工程实践
性能、工具链、持续集成、搭建系统、架构和基础库。
