重学前端
程劭非（winter）
前手机淘宝前端负责人
立即订阅
32956 人已学习
课程目录
已完结 58 讲
0/4登录后，你可以任选4讲全文学习。
开篇词+学习路线+架构图 (3讲)
开篇词 | 从今天起，重新理解前端
免费
明确你的前端学习路线与方法
列一份前端知识架构图
模块一：JavaScript (15讲)
JavaScript类型：关于类型，有哪些你不知道的细节？
JavaScript对象：面向对象还是基于对象？
JavaScript对象：我们真的需要模拟类吗？
JavaScript对象：你知道全部的对象分类吗？
JavaScript执行（一）：Promise里的代码为什么比setTimeout先执行？
JavaScript执行（二）：闭包和执行上下文到底是怎么回事？
JavaScript执行（三）：你知道现在有多少种函数吗？
JavaScript执行（四）：try里面放return，finally还会执行吗？
JavaScript词法：为什么12.toString会报错？
（小实验）理解编译原理：一个四则运算的解释器
JavaScript语法（预备篇）：到底要不要写分号呢？
JavaScript语法（一）：在script标签写export为什么会抛错？
JavaScript语法（二）：你知道哪些JavaScript语句？
JavaScript语法（三）：什么是表达式语句？
JavaScript语法（四）：新加入的**运算符，哪里有些不一样呢？
模块二：HTML和CSS (16讲)
HTML语义：div和span不是够用了吗？
HTML语义：如何运用语义类标签来呈现Wiki网页？
CSS语法：除了属性和选择器，你还需要知道这些带@的规则
HTML元信息类标签：你知道head里一共能写哪几种标签吗？
CSS 选择器：如何选中svg里的a元素？
CSS选择器：伪元素是怎么回事儿？
HTML链接：除了a标签，还有哪些标签叫链接？
CSS排版：从毕升开始，我们就开始用正常流了
HTML替换型元素：为什么link一个CSS要用href，而引入js要用src呢？
HTML小实验：用代码分析HTML标准
CSS Flex排版：为什么垂直居中这么难？
CSS动画与交互：为什么动画要用贝塞尔曲线这么奇怪的东西？
HTML语言：DTD到底是什么？
CSS渲染：CSS是如何绘制颜色的？
CSS小实验：动手做，用代码挖掘CSS属性
HTML·ARIA：可访问性是只给盲人用的特性么？
模块三：浏览器实现原理与API (9讲)
浏览器：一个浏览器是如何工作的？（阶段一）
浏览器：一个浏览器是如何工作的？（阶段二）
浏览器：一个浏览器是如何工作的（阶段三）
浏览器：一个浏览器是如何工作的？（阶段四）
浏览器：一个浏览器是如何工作的？（阶段五）
浏览器DOM：你知道HTML的节点有哪几种吗？
浏览器CSSOM：如何获取一个元素的准确位置
浏览器事件：为什么会有捕获过程和冒泡过程？
浏览器API（小实验）：动手整理全部API
模块四：前端综合应用 (5讲)
性能：前端的性能到底对业务数据有多大的影响？
工具链：什么样的工具链才能提升团队效率？
持续集成：几十个前端一起工作，如何保证工作质量？
搭建系统：大量的低价值需求应该如何应对？
前端架构：前端架构有哪些核心问题？
特别加餐 (9讲)
新年彩蛋 | 2019，有哪些前端技术值得关注？
用户故事 | 那些你与“重学前端”的不解之缘
期中答疑 | name(){}与name: function() {}，两种写法有什么区别吗？
答疑加餐 | 学了这么多前端的“小众”知识，到底对我有什么帮助？
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑（一）：前端代码单元测试怎么做？
期末答疑（二）：前端架构中，每个逻辑页面如何可以做到独立发布呢？
加餐 | 一个前端工程师到底需要掌握哪些技能？
尾声 (1讲)
尾声 | 长风破浪会有时，直挂云帆济沧海
重学前端
登录|注册

列一份前端知识架构图

winter 2019-01-19
你好，我是 winter。
在上一篇文章中，我们简要地总结了前端的学习路径与方法，我们提到的第一个学习方法就是：建立知识框架。那么，今天我们就一起来列一份前端的知识框架图。
在开始列框架之前，我想先来谈谈我们的目标。实际上，我们在网上可以找到很多参考资料，比如 MDN 这样的参考手册，又比如一份语言标准，但是我们的课程既不是一本参考手册，也不是一份语言标准。参考手册希望做到便于查阅、便于理解和全面，语言标准的目标是严谨、无遗漏、无歧义。
而我们的课程有什么不同呢？我认为，作为一个课程，有两个目标：一个是把无法通过查阅解决的原理和背景讲清楚，另一个是把不方便查阅和记忆的内容整理好。
我会尽量避免像前面提到的两种文档一样逐条目罗列知识点和细节，当然，这不是在说两种文档没有价值，而是我们各有分工，参考手册和语言标准做的事情，我们没必要重复去做，即使做了也不一定能做得更好。
在这个课程里，我希望能和你一起打造一个前端知识的框架，再把知识点做个遍历，这其中，有原理和背景的部分，我去讲解知识的原理和背景。如果没有的话，我们就去讲整理和记忆这部分知识的方法，这样，即使你遇见无法一下子记住的知识，也可以很容易地查阅参考手册和标准来解决。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《重学前端》，如需阅读全部文章，
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(137)

  • 阿阳
    建议不要催更。知识和讲解需要打磨，给老师留出足够时间去思考，去整理，去写作，对作者和读者都有好处。
    2019-01-19
    383
  • 大漠
    接下来跟着图谱攻克
    2019-01-19
    3
    132
  • 7u
    希望那些不适合一一讲解的部分老师可以指定一些资料，让读者可以自己去学习
    2019-01-19
    123
  • Yybei
    老师您好，有一个问题。对于文中的：“JavaScript 的类型系统就是它的 7 种基本类型和 7 种语言类型。” 这一句话有点不太理解，我在MDN上查询相关资料后发现，只找到了7种基本类型对应的是：undefined,null, object,boolean, string, number, symbol。那么7种语言类型应该对应的什么？

    作者回复: List 和 Record
    Set
    Completion Record
    Reference
    Property Descriptor
    Lexical Environment 和 Environment Record
    Data Block

    2019-01-19
    2
    86
  • 成
    我就搞不懂了，这些说想了解三大前端框架的是来搞笑的吗，老师这明显是在一个比较高的角度重新梳理前端知识点，谢谢点是前端的基石，而我们平时用的框架都是建立在这些基石之上的…三大框架api的使用熟练度不是前端的核心能力，这些基石才是…
    2019-01-19
    79
  • lmran
    总觉得40节课讲不完

    作者回复: 多了的话算免费送大家的，哈哈

    2019-01-19
    57
  • CC
    在 JavaScript 中，「类型」和「实例」就是数据结构，而「执行过程」就是算法。

    之前从来没有从这个角度看待过 JavaScript 语言，写代码的思路就不一样了。这是第一大收获。

    第二个收获是明确自己问题所处的分支。比如，JavaScript 大部分的问题都存在于「运行时」这个分支中。又比如，发现自己疲于奔命，总是“感觉”学不完的内容，其实是处于「持续集成」这个分支中。

    核对了一下自己已经掌握，和计划学习的前端知识，都能在这份知识框架中找到落脚点，再次体会到完备性的重要。

    感谢 winter 老师。

    作者回复: 赞，有收获就好，更希望学完以后你能把知识架构变成自己的东西，不需要看着我的知识架构来学习。

    2019-01-19
    32
  • nineSean
    作为半路出家的前端，希望winter在讲解每个知识点后能够指明进一步深入学习的途径
    2019-01-19
    27
  • GanYuHui
    还记得刚开始学前端的时候，那个时候我只学原生态的JS ，什么项目都是原生JS开发，现在学了Vue之后发现其实我不是一个前端开发者，只是一个使用者罢了
    2019-01-19
    1
    25
  • 小野兽🇬 🇱 
    Vue、React、Angular在图谱里吗?它们又算作前端的什么哪?
    2019-01-19
    1
    19
  • 叶十七
    前端自动化测试方面是都也可以讲解下，除了工具，最重要的是怎么造自动化测试用例，这个用例感觉比后端复杂，工作量也非常大，所以很多项目会放弃自动化测试。怎么才能做好自动化测试？

    作者回复: 自动化测试，非一线大厂大型团队不建议搞，目前还没见过靠谱的方案。

    2019-01-19
    14
  • Xhavit🍭
    兼容性这一块会深入涉及吗？
    2019-01-19
    2
    12
  • 行走着的宋公子
    CSS 各种散落的知识点，实在是烦，希望能跟着老师把这些知识串起来。
    2019-01-19
    8
  • 小海
    Node.js 现在也是前端的必备技能了，构建工具这些都会用到，有计划讲讲吗

    作者回复: 这种就不讲了，实际上对前端有用的背景知识有很多，除了NodeJS还有数据结构、算法、编译原理这些，有用但是不需要深入，既然是重学，我默认大家都是会一点的，我这里只会给大家讲前端成长的核心技能，辅助技能大家自己学一下就好。

    2019-01-19
    8
  • 武瑶
    老师更新加快就好了！
    2019-01-19
    8
  • Teng
    刚工作没学过js 上来派去写ts angular4 之后又转到react之后 又去和ux 弄css 和grid layout。很感谢这个课 能把知识点基础串起来
    2019-01-19
    7
  • magic
    js一直是弱项，一个系统化的学习以及对症下药地写代码会不会带来更好的提升
    2019-01-19
    7
  • JoeChen
    前端水深
    2019-01-19
    6
  • 富贵呀
    高屋建瓴
    2019-01-19
    5
  • 小烦·张
    照着课程自己在幕布总结了一个前端知识架构, 比看别人总结好的舒服多了

    作者回复: 可以跟大家分享一下呀

    2019-01-19
    1
    5
收起评论
99+
下载
客户端
返回
顶部