澳门银河网址

首页 > 正文

一套完整的前端知识地图,告别零散知识点,打通任督二脉

www.zcqhco.com2019-07-22

前端工程师是研发体系中的重要岗位之一。可是,与此相对的是,系统性的教学方案几乎找不到。大部分前端工程师的知识,其实都是来自于实践和工作中零散的学习。

很多在学习前端,以及工作的前端工程师的困扰:

前端技术的更新如此迅速,在这样的大环境下,前端工程师保持自学能力就显得尤其重要了。因此,“学什么”“怎么学”就是我们要迫切解决的问题。这是我的前端交流学习qun:前面是七三一,中间是七七一,后面是二一一。如果需要学习资料在里面下载。我做这行十多年,有问题随时来问我,学习方法,学习效率等等问题。

0基础入门前端

对于0基础入门的同学,我建议你先通过视频,了解前端学习具体的学习路径,培养一定的思维,打好知识基础的地基。在对前端有过大致的了解,自己能规划版图路线的时候,去读几本经典的前端教材,推荐:《JavaScript高级程序设计》、《精通CSS》。

《JavaScript高级程序设计》

简介:《JavaScript高级程序设计》被称为“程序员的红宝书”。几乎涵盖了JavaScript的大部分内容,有大量的例子,理解起来也并不太费解。

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

前端必备知识框架

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

我们把前端知识在总体上分成基础部分和实践部分,基础部分包含了JavaScript语言、CSS和HTML以及浏览器的实现原理和API,这三个模块涵盖了一个前端工程师所需要掌握的全部知识,学完这三个部分,你再结合基本的编程能力,就可以应对基本的前端开发工作了。

JavaScript知识架构图

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

接下来,按照程序的一般规律,可以把运行时分为数据结构和算法部分——数据结构包含类型和实例(内置对象),算法是执行过程。

类型部分中,对象比其它所有类型加起来都复杂,所以我们会用较长的时间来学习对象,包括它的一些历史和设计思路。

执行过程应按照从大结构到小结构的角度来学习,从最顶层的事件循环和微任务,到函数、再到语句级的执行。

实例部分也很关键,但对JavaScript来说类似基础库,JavaScipt的内置对象多达150以上,在MDN会有细致全面的讲解。

文法中的语法和语义基本是一一对应关系,在JavaScript标准中有一份语法定义表,建议随时拿出来看一看。

在HTML的部分,我们按照功能和语言来划分它的知识,HTML的功能主要由标签来承担,所以首先要把标签做一些分类。

我们按照承担的不同功能,把标签分成下面几种。

1.文档元信息:通常是出现在head标签中的元素,包含了描述文档自身的一些信息;

2.语义相关:扩展了纯文本,表达文章结构、不同语言要素的标签;

3.链接:提供到文档内和文档外的链接;

4.替换型标签:引入声音、图片、视频等外部元素替换自身的一类标签;

5.表单:用于填写和提交信息的一类标签;

6.表格:表头、表尾、单元格等表格的结构。

除了标签之外,你还应该把HTML当作一门语言来了解下。但标记语言跟编程语言不太一样,比较基础的HTML的语法和几个重要的语言机制:实体、命名空间,你一定要掌握。

HTML还有一个补充标准也很关键:ARIA,它是HTML的扩展,在可访问性领域,它有至关重要的作用。

CSS部分,按照惯例,我们按照语言和功能划分。

语言部分,

热门浏览
热门排行榜
热门标签
日期归档