【重学前端专栏学习笔记】建立系统的知识架构体系

明确你的前端学习路线

自己特别喜欢屯课,看着自己买的课,有种满足感,仿佛知识都是我的了,翻看极客时间买的课,决定这段时间把重学前端专栏学习一遍。

从周六到今天,一共学习了 5 篇文章,这个专栏的信息量是非常大的,特别是第一章《前端的学习路线与方法》给我的启发特别大。

首先一上来就分享了两个学习方法:建立知识架构、追本溯源。

建立知识架构很够就相当于把知识分类了,输入时有条理的存储,输出时能够快速找出对象的知识点。而追本溯源的学习方法特别适用于一些概念性的东西,可以追溯提出时的背景及之后的演变过程等。

建立知识架构

winter 在文中说:你的知识框架是啥?this闭包作用域原型等术语拼凑起来?这些名词之间有关联吗?

显然这只是在堆砌名词,就算你弄清楚了this是啥,但你始终不知道this为啥为这样。然后每次新技术发布后,在一堆名词中迷失,无从下手。

winter 给出了他的知识框架,他将javascript分成了三个层级:

为什么这么划分,他说:对任何计算机语言来说,必定是“用规定的文法,去表达 特定语义,最终操作运行时”的一个过程

这里有三个名词:文法、语义、运行时。这三个词大部分同学都比较陌生,当然我也是。第一次接触到这些名词,给我挺冲击的,虽然还不明白其中的意义,这里先混个眼熟,下次在出现这些名词,就会有个印象。

追本溯源

追本溯源的方法能够帮我们了解一些看起来不太合理的东西,有时候还能发现一些八卦。

在饥人谷跟着方方学的时候,方方老师每次在讲一个新概念的时候,总是从历史讲起,这些知识虽然看上去没啥用,但是这些知识在你今后的遇到一些不太理解的东西是特别有用,就不会去质疑知识本身了。

列一份前端知识架构图

在这章节中,winter 分享了本专栏要学习的知识架构:javascripthtml/css、浏览器的实现原理和API、前端工程实践四个模块。

javascript按照文法、语义、运行时进行讲解,这个符合语言的一般规律:用一定的词法和语法,表达一定语义,从而操作运行时

按照这个一遍规律在继续往下分,运行时又可以分为:数据结构执行过程,数据结构和执行过程还能再继续往下分...

文法中的语法和语义是一一对应的关系

html/css和浏览器的实现原理和API知识比较细碎,我这里就不一一列举出来了。

最后一个是前端工程实践,从性能、工具链、持续集成、搭建系统、架构与基础库五个方面讲起。

总结

在结束的时候,winter 留了一个问题:你的知识划分是否和我一样?

我之前的知识体系非常混乱,jstsvuegitwebpack、小程序,es6canvas等知识混为一谈,越学越迷茫,学了这个又想学那个,学了那个这个又放弃了,因为我根本不知道要学啥,只知道这些名词,所见即所得,那都学了吧,而正确的学习方法就应该像 winter 这样的划分知识架构,然后深入去学。

原文链接:segmentfault.com

上一篇:写一个 JS 调用栈可视化工具 hound-trace
下一篇:Javascript之适配者模式

相关推荐

  • 零代码深入浅出React并发模式,带你理解React Fiber架构

    React Fiber架构有一定的复杂度,如果硬着头皮去啃源码,我们会深陷于庞大的代码量和实现细节之中,往往学不到什么东西。 React并发模式是ReactFiber架构的重要应用,本文不贴任何Rea...

    8 个月前
  • 详解REST架构风格

    REST REST是Representational State Transfer(在表示层上的状态传输)的缩写,这个词的意思要在文章的后面才能解释清楚。REST是一种WEB应用的架构风格,它被定义为...

    2 年前
  • 记一次平台项目开发经验,一点点架构设计

    项目名称:生态环境监测平台 项目背景 一个关于生态的产品 本文将尽量还原这个开发情境,讲述当初为何如此设计,设计过程中遇到的问题,及其解决方案。 1.背景梳理 生态环境监测系统主要应用于水利、环保行业...

    2 年前
  • 美团点评金融平台Web前端技术体系 - 知乎专栏·「美团点评技术博客」

    背景 随着美团点评金融业务的高速发展,前端研发数量从2015 年的 1 个人,扩张到了现在横跨北上两地 8 个事业部的将近 150 人。业务新,团队新,前端领域框架技术又层出不穷,各个业务的研发团队...

    2 年前
  • 第46期 带你走进医疗行业的体验设计 & 前端开发与架构师 & 前端内存优化的探索与实践

    前端架构101:从 Flux 进化到 Model-View-Presenter 在 Flux 架构中,有两个问题依然没有被提到,一个是表现层模型,另一个是测试 我们从表现层逻辑说起 前端内存优化的探索...

    3 个月前
  • 移动端使用dva脚手架构架webapp

    技术选型 基础框架:react UI库:antd-mobile 脚手架:dva 插件使用 polished (css-in-js 常用css代码块) react-loadable (可...

    2 年前
  • 码code|腾讯大佬带你深入理解小游戏的架构设计与开发

    转载来源:云加社区 原作者:余国良 小游戏自发布以来,微信平台上已经出现了不少现象级的小游戏,包括跳一跳。在技术上微信小游戏和小程序的区别是什么?开发商在开发一款小游戏的时候通常会遇到什么问题?怎么...

    1 年前
  • 珠峰架构课学习笔记

    一 数据类型:typeof 检测数据类型console.log(typeof NaN); => "number", NaN不是有效数字,但属于number数据类型NaN == NaN 为fa...

    6 个月前
  • 深入Parcel--架构与流程篇

    本篇文章是对 Parce 的源码解析,代码基本架构与执行流程,在这之前你如果对 parcel 不熟悉可以先到 Parcel官网 了解 介绍 下面是偷懒从官网抄下来的介绍: 极速零配置Web应用打包...

    2 年前
  • 浏览器进程架构的演化

    前言 曾经你用 IE6或IE7 或者 firefox 的时候有遇到一个插件崩溃,而你打开的一系列页面全部崩溃的场景么?😰 曾经你遇到过打开浏览器或某些页面总是弹出很多你不想打开的恶意窗,要一个一个...

    10 个月前

官方社区

扫码加入 JavaScript 社区