之前的Blog中讲到了,重新开始理解前端和明确你前端的学习方法和学习路线,前文中讲到了对应的方法,但是对应的学习路线还没有做具体介绍,这一篇,我们来讲讲前端学习路线,也为我在学习前端的过程中,温习和巩固!
那么我们在列一个知识架构图的时候,我们应该注意什么或者我们应该如何做?
- 知识架构图不是一个参考手册!
- 知识架构图并不是一个语言标准!
- 知识架构图本质上是为了更好地查阅,便于理解和全面!
- 语言标准更多的是严谨,无遗漏和无歧义!
除此之外,架构图的的目标是什么?
- 把不方便和记忆的内容整理好
- 把不容易查阅解决的过程中在后面的Blog中讲解明白!
对应的写Blog是一种非常不错的学习方式,有人可能会说:"对应的写教程的方式不应该是更好的嘛?"
是的,无论是教程还是所谓的Blog都是一种不错的学习方式,但是如果说考虑到时间成本的话,教程的篇幅和内容非常多并且非常细致,一个人也非常难做好,鉴于现在互联网上的MDN以及阮一峰老师有更好的更细致的教程!因此没必要去做,并且做了也不一定能够做得更好!
因此一个前端知识框架的建立,将重要的有联系的知识点将整个架子搭建起来,再把对应的知识点做个遍历,将原理和背景的部分做深度剖析和理解!对应的不是那么重要甚至是没有背景的部分可以使用手册或者标准进行查询!
前端总体部分上来看,可以划分为两个部分,分别为,基础知识部分和实践部分
- 基础知识部分
- JavaScript语言
- CSS和HTML语言
- 浏览器实现原理和API
三个模块组成了对应的基础知识部分!
JavaScript对应的知识架构图:
02.png
其实图中的部分还是不难理解的,我们看JavaScript应该站在编程语言的角度去看待,符合一般规律:
用一定的词法和语法,表达一定的语义,从而操作运行时!
运行时分为数据结构和算法:
- 数据结构包含类型和实例
- 对应的JavaScript的类型系统就是它的7中基本类型和7种语言类型!实例就是JavaScript内置的对象部分!
对应的实例部分其实就是JavaScript中的基础库,JavaScript内置对象多大150个以上!我会在以后的Blog上面讲到!
CSS和HTML架构图
03.png
其中通过上图可以看到,HTML分为元素,语言和标准,先从元素开始,所谓的元素对应了HTML中的标签,例如说在head里面我们称之为元信息类标签,title和meta,style,link,以及base这些,用来描述文档的一些基本信息!
用来描述数据的数据我们称之为元数据,用来描述信息的标签我们称之为元信息标签!
之后还有一些例如section,nav,article标签,在视觉表现上面和所谓的div没有区别,但是各自有不同的应用场景,称之为语义类标签!
对应的一些例如img,audio和vedio之类的标签,一般是用来引用外部内容,开发中也会经常用到,称之为替换型元素!
因此,我们把HTML里面的知识点按照了功能划分了如下所示
| name | description |
|---|---|
| 文档元信息 | 出现在head标签中的元素,描述文档自身的一些信息 |
| 语义相关 | 扩展了纯文本,表达文章结构,不同语言要素的标签 |
| 链接 | 提供文档内核文档外的标签 |
| 替换型标签 | 引入声音,图片,视频等外部元素替换自身一类的标签 |
| 表单 | 用于填写和提交信息一类的标签 |
| 表格 | 表头,表尾单元格等表格的结构 |
CSS部分是按照语言和功能进行划分的,之后会介绍到CSS的语法相关的内容,例如说@rule,选择器,单位等等,功能这块,可以分为布局,绘制,交互等!
浏览器的实现原理和API
04.png
因为我们是前端程序员,我们的应用大部分情况下是跑在浏览器上面的,因此学习浏览器这块的知识也是非常必要的,我们可以从图上看,浏览器相关的知识我们可以按照思维导图的方式进行理解!
- 从浏览器的设计出发,按照解析,构建DOM树,和计算CSS,渲染,合成和绘制的流程来了解和学习浏览器的工作原理!
- 之后涉及到了API部分的知识点,可以从W3C标准中的几个大块的API来学习,主要有:
- 事件
- DOM
- CSSOM
API部分涉及到的知识分别覆盖了,交互,语义和可见效果是工作中常常用到的知识!
涉及到其他的API应该如何学习呢? 我们可以根据Chrome已经实现的API和W3C标准相关的API进行对照和学习!
总结和思考
和上图一样,列出了对应的知识图谱之后,可以针对性的进行学习了,而不至于学习前端的时候毫无头绪了! 如果你有很么好的建议和想法,请在评论区告诉我!
网友评论