前端学习概述

正确的学习方法

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

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

建立知识架构的误区

  • 知识架构的误区就是将一些毫无逻辑关系的并列知识点进行合并
  • 知识的架构是有优劣之分的,最重要的就是逻辑性和完备性

2. 追本溯源

有一些知识,背后有一个很大的体系,我们需要在建立知识架构之后去完善每个知识点背后的所有知识

  • 追本溯源的第一层: 学习体系知识
  • 追本溯源的第二层: 其实就是关注技术提出的背景,关注原始的论文或者文章,关注作者说的话

架构图

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

2. javascript架构图

javascript
  • 在JavaScript的模块中,首先我们可以把语言按照文法、语义和运行时来拆分,这符合编程语言的一般规律:用一定的词法和语法,表达一定语义,从而操作运行时
  • 运行时 分为 数据结构算法 部分:数据结构包含类型和实例(JavaScript的类型系统就是它的7种基本类型和7种语言类型,实例就是它的内置对象部分)。所谓的算法,就是JavaScript的执行过程。
  • 类型 部分中,对象比其它所有类型加起来都要更为复杂,所以我们会用较长的篇幅来讲解对象,包括它的一些历史和设计思路。
  • 执行过程 我们则需要按照从大结构到小结构的角度讲解,从最顶层的程序与模块、事件循环和微任务,到函数、再到语句级的执行。我们从粗到细地了解执行过程。
  • 实例部分,对JavaScript来说类似基础库,JavaScipt的内置对象多达150以上,考虑到我们即使逐次讲解也必定不如MDN更加细致全面,所以我们会从应用和机制的角度,挑选其中几个体系来讲解。
  • 文法 中的 语法语义 基本是一一对应关系,在JavaScript标准中有一份语法定义表,它同样不适合一一讲解,我们会从JavaScript语法中特别的地方,以及与日常开发比较相关的地方来重点讲解,剩下的内容和词法部分,我们会带领大家做一些数据挖掘工作,从这份表格中找到一些和我们日常开发息息相关的内容。
  • 语义 的大部分内容我们会在运行时的讲解中透出,同时它又跟语法有对应的关系,所以我们不再单独拿出来讲解。

3. html和css架构图

html和css

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

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

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

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

简要介绍HTML的语法和几个重要的语言机制:实体、命名空间。

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

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

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

4. 浏览器的实现原理和API

brower

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

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

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

5. 前端工程实践

project
  • 性能 首先我们会谈谈性能。对任何一个前端团队而言,性能是它价值的核心指标,从早年“重构”的实践开始,前端有通过性能证明自己价值的传统。 但是性能并非细节的堆砌,也不是默默做优化,所以,我会从团队的角度来跟你一起探讨性能的方法论和技术体系。

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

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

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

  • 架构和基础库 最后一个部分,会给大家介绍前端架构和基础库的知识。软件架构师主要解决功能复杂性的问题,服务端架构师主要解决高流量问题,而前端是页面间天然解耦,分散在用户端运行的系统,但是前端架构也有自己要解决的问题。 前端需求量大、专业人才稀缺,更因为前端本身运行在浏览器中,有大量兼容工作要做。所以前端架构的主要职责是兼容性、复用和能力扩展。这一部分文章我将会介绍前端架构工作的一些思路和切入点。

总结

希望同学们都能都按照正确的方法建立自己的知识架构,想着梦想前进!下面我们会去推荐一些优秀的博客地址

  1. 前端工匠
  2. leonardomso
  3. 前端一万小时
  4. 刘小夕的博客
  5. JS 原生面经从初级到高级【近1.5W字】
Last Updated: 10/25/2019, 4:55:38 PM