你好,我是winter。前端工程师是研发体系中的重要岗位之一。但是,与此相对的是,系统性的教学方案几乎找不到。大部分前端工程师的知识,其实都是来自于实践和工做中零散的学习。前端
我以前作过一次调查,调查中看到了不少前端工程师的困扰。 算法
因此,我想带你梳理一套前端知识框架,帮你把知识点从新作个遍历,让你在学习的路上走的更轻松一些。这份知识框架,也是我在《重学前端》专栏里帮助你们重构前端架构的核心内容。编程
对于0基础入门的同窗,我建议你先去读几本经典的前端教材,打好起知识基础的地基。咱们能够先从《JavaScript高级程序设计》、《精通CSS》看起。而后去阅读一些参考性质的网站,很推荐:MDN。浏览器
若是你已经有1年以上的工做经验了,咱们能够一块儿创建起前端的知识框架,再去把知识点作个遍历,这其中有原理和背景的部分,我去看知识的原理和背景就够了。若是没有的话,咱们就去看整理和记忆这部分知识的方法,这样,即便你碰见没法一会儿记住的知识,也能够很容易地查阅参考手册和标准来解决。前端工程师
咱们先来说讲什么叫作知识架构?咱们能够把它理解为知识的“目录”或者索引,它可以帮助咱们把零散的知识组织起来,也可以帮助咱们发现一些知识上的盲区。数据结构
咱们把前端知识在整体上分红基础部分和实践部分,基础部分包含了JavaScript语言、CSS和HTML以及浏览器的实现原理和API,这三个模块涵盖了一个前端工程师所须要掌握的所有知识,学完这三个部分,你再结合基本的编程能力,就能够应对基本的前端开发工做了。架构
在JavaScript的模块中,首先咱们能够把语言按照文法、语义和运行时来拆分,这符合编程语言的通常规律:用必定的词法和语法,表达必定语义,从而操做运行时。框架
接下来,按照程序的通常规律,能够把运行时分为数据结构和算法部分——数据结构包含类型和实例(内置对象),算法是执行过程。数据结构和算法
类型部分中,对象比其它全部类型加起来都复杂,因此咱们会用较长的时间来学习对象,包括它的一些历史和设计思路。执行过程应按照从大结构到小结构的角度来学习,从最顶层的事件循环和微任务,到函数、再到语句级的执行。编程语言
实例部分也很关键,但对JavaScript来讲相似基础库,JavaScipt的内置对象多达150以上,在MDN会有细致全面的讲解。文法中的语法和语义基本是一一对应关系,在JavaScript标准中有一份语法定义表,建议随时拿出来看一看。
在HTML的部分,咱们按照功能和语言来划分它的知识,HTML的功能主要由标签来承担,因此首先要把标签作一些分类。咱们按照承担的不一样功能,把标签分红下面几种。
除了标签以外,你还应该把HTML看成一门语言来了解下。但标记语言跟编程语言不太同样,比较基础的HTML的语法和几个重要的语言机制:实体、命名空间,你必定要掌握。
HTML还有一个补充标准也很关键:ARIA,它是HTML的扩展,在可访问性领域,它有相当重要的做用。
CSS部分,按照惯例,咱们按照语言和功能划分。
-在布局类的两个最经常使用的布局:正常流和弹性布局。
-绘制类,建议你分红图形相关的和文字相关的绘制。
浏览器部分中浏览器的实现原理,是咱们深刻理解API的基础。
你能够从通常的浏览器设计出发,按照解析、构建DOM树、计算CSS、渲染、合成和绘制的流程来学习浏览器的工做原理。
在API部分,能够从W3C零散的标准中挑选几个大块的API来详细讲解,主要有:事件、DOM、CSSOM几个部分,他们分别覆盖了交互、语义和可见效果,这是咱们工做中用到的主要内容。