重学前端 / 每天10分钟,重构你的前端知识体系
程劭非(winter)
前手机淘宝前端负责人
 
  • 课程目录
  • 课程介绍
  • 开篇词 | 从今天起,重新理解前端

    对于工作之后的前端开发者来说,没有系统学习的问题仍然存在,常常有一些具有多年从业经验的工程师,仍然会在看到一些用法时惊呼:“还可以这样!”

  • 01 | 明确你的前端学习路线与方法

    我希望通过这个专栏,把前端技术背后的设计原理和知识体系讲清楚,让你能对前端技术产生整体认知,这样才能够在未来汹涌而来的新技术中保持领先的状态。

  • 02 | 列一份前端知识架构图

    我们提到的第一个学习方法就是:建立知识框架。那么,今天我们就一起来列一份前端的知识框架。

  • 03 | HTML语义:div和span不是够用了吗?

    HTML并不简单,它是典型的“入门容易,精通困难”的一部分知识。深刻理解HTML是成为优秀的前端工程师重要的一步。

  • 04 | HTML语义:如何运用语义类标签来呈现Wiki网页?

    我们通过分析一篇wiki的文章用到的语义类标签,来进一步帮你理解语义的概念。

  • 05 | JavaScript类型:关于类型,有哪些你不知道的细节?

    运行时类型包含了所有 JavaScript 执行时所需要的数据结构的定义,所以我们要对它格外重视。

  • 06 | JavaScript对象:面向对象还是基于对象?

    要想理解JavaScript对象,必须清空我们脑子里“基于类的面向对象”相关的知识,回到人类对对象的朴素认知和面向对象的语言无关基础理论。

  • 07 | JavaScript对象:我们真的需要模拟类吗?

    在新的ES版本中,我们不再需要模拟类了:我们有了光明正大的新语法。

  • 08 | JavaScript对象:你知道全部的对象分类吗?

    JavaScript的对象机制并非简单的属性集合+原型。

  • 新年彩蛋 | 2019,有哪些前端技术值得关注?

    在新年来临之际,我先给大家拜个年,祝大家新年快乐。

  • 09 | CSS语法:除了属性和选择器,你还需要知道这些带@的规则

    CSS的语法总体结构是由两种规则列表构成,一种是at 规则,另一种是普通规则。

  • 10 | 浏览器:一个浏览器是如何工作的?(阶段一)

    在我面试和接触过的前端开发者中,70%的前端同学对“浏览器工作原理”的知识内容只能达到“一知半解”的程度。

  • 11 | 浏览器:一个浏览器是如何工作的?(阶段二)

    在今天的文章中,我带你继续探索了浏览器的工作原理,我们主要研究了解析代码和构建DOM树两个步骤。

  • 12 | 浏览器:一个浏览器是如何工作的(阶段三)

    CSS计算是把CSS规则应用到DOM树上,为DOM结构添加显示相关属性的过程。

  • 13 | 浏览器:一个浏览器是如何工作的?(阶段四)

    浏览器进行到这一步,我们已经给DOM元素添加了用于展现的CSS属性,接下来,浏览器的工作就是确定每一个元素的位置了。

  • 14 | 浏览器:一个浏览器是如何工作的?(阶段五)

    在这一节课程中,我们讲解了浏览器中的位图操作部分,这包括了渲染、合成和绘制三个部分。

  • 15 | HTML元信息类标签:你知道head里一共能写哪几种标签吗?

    元信息类标签,就是HTML用于描述文档自身的一类标签,它们通常出现在head标签中,一般都不会在页面被显示出来。

  • 16 | JavaScript执行(一):Promise里的代码为什么比setTimeout先执行?

    当拿到一段JavaScript代码时,浏览器首先要做的就是;传递给JavaScript引擎,并且要求它去执行。

  • 17 | JavaScript执行(二):闭包和执行上下文到底是怎么回事?

    我们今天要讲的知识在网上有不同的名字,比较常见的可能有:闭包、作用域链、执行上下文、 this值。实际上,它们所指向的都是函数执行过程相关的知识。

  • 18 | JavaScript执行(三):你知道现在有多少种函数吗?

    在JavaScript,切换上下文最主要的场景是函数调用。在这一课,我们就来讲讲函数调用切换上下文的事情。

  • 19 | JavaScript执行(四):try里面放return,finally还会执行吗?

    这一篇文章中我们以Completion Record类型为线索,讲解一下JavaScript语句执行的原理。

  • 20 | CSS 选择器:如何选中svg里的a元素?

    选择器是由CSS最先引入的一个机制,但随着document.querySelector等API的加入,选择器已经不仅仅是CSS的一部分了。

  • 21 | CSS选择器:伪元素是怎么回事儿?

    这一课,我们会讲解CSS选择器的三种机制:选择器的组合、选择器优先级、以及伪元素。

  • 22 | 浏览器DOM:你知道HTML的节点有哪几种吗?

    DOM API是最早被设计出来的一批API,也是用途最广的API。

  • 23 | HTML链接:除了a标签,还有哪些标签叫链接?

    在HTML中,链接有两种类型。一种是超链接型标签,一种是外部资源链接。

  • 24 | CSS排版:从毕升开始,我们就开始用正常流了

    我们可以用一句话来描述正常流的排版行为,那就是:依次排列,排不下了换行。这也是理解它最简单最源头的方式。

  • 25 | 浏览器CSSOM:如何获取一个元素的准确位置

    正如HTML和CSS分别承担了语义和表现的分工,DOM和CSSOM也有语义和表现的分工。

  • 26 | JavaScript词法:为什么12.toString会报错?

    词法规定了语言的最小语义单元:token,可以翻译成“标记”或者“词”,在我的专栏文章中,我统一把token翻译成词。

  • 27 |(小实验)理解编译原理:一个四则运算的解释器

    今天的内容比较特殊,我们来做一段详细的代码实验,详细的代码我放在了文章里,如果你正在收听音频,可以点击文章查看详情。

  • 28 | JavaScript语法(预备篇):到底要不要写分号呢?

    在我们介绍JavaScript语法的全局结构之前,我们先要探讨一个语言风格问题:究竟要不要写分号。

  • 用户故事 | 那些你与“重学前端”的不解之缘

    如果你的留言被选中作为用户故事,我们将会为你送出“极客时间”& winter联名T恤一件。分享你的收获,我们一起成长。

  • 29 | JavaScript语法(一):在script标签写export为什么会抛错?

    我们将一起学习JavaScript语法的全局结构,JavaScript有两种源文件,一种叫做脚本,一种叫做模块。

  • 期中答疑 | name(){}与name: function() {},两种写法有什么区别吗?

    我鼓励你在阅读文章之外,多思考,多提问,把自己不懂的地方暴露出来,及时查缺补漏,这样可以更好地吸收知识。

  • 30 | JavaScript语法(二):你知道哪些JavaScript语句?

    我们在上节课讲的脚本,或者模块都是由语句列表构成的,这一节课,我们就来一起了解一下语句。

  • 31 | JavaScript语法(三):什么是表达式语句?

    事实上,真正能干活的就只有表达式语句,其它语句的作用都是产生各种结构,来控制表达式语句执行,或者改变表达式语句的意义。

  • 32 | JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?

    接下来我们就来看看左值表达式是如何一步步构成更为复杂的语法结构。

  • 33 | HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?

    替换型元素的特点是,引入一个外部资源来进入页面,替换掉自身的位置。

  • 34 | HTML小实验:用代码分析HTML标准

    这一节课,我们将要完成一个小实验:利用工具分析Web标准文本,来获得元素的信息。

  • 35 | CSS Flex排版:为什么垂直居中这么难?

    CSS三大经典问题:垂直居中问题,两列等高问题,自适应宽问题。这是在其它UI系统中最为基本的问题,而到了CSS中,却变成了困扰工程师的三座大山。

  • 36 | 浏览器事件:为什么会有捕获过程和冒泡过程?

    很多文章会讲到捕获过程是从外向内,冒泡过程是从内向外,但是这里我希望讲清楚,为什么会有捕获过程和冒泡过程。

  • 37 | 浏览器API(小实验):动手整理全部API

    浏览器的API数目繁多,但我们没法把课程变成API参考手册,所以这一节课,我设计了一个实验,一起来给API分分类。

  • 38 | CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?

    CSS用transition和animation两个属性来实现动画,我们今天还介绍了它们背后的原理:贝塞尔曲线。

  • 答疑加餐 | 学了这么多前端的“小众”知识,到底对我有什么帮助?

    在本期文章中,为了让同学们更好地理解我们专栏的重点,在今天的文章中,我会逐一回答同学们在学习方法上的困惑。

  • 39 | HTML语言:DTD到底是什么?

    DTD在HTML4.01和之前都非常的复杂,到了HTML5,抛弃了SGML兼容,变得更为简单。

  • 40 | CSS渲染:CSS是如何绘制颜色的?

    今天我们将要介绍CSS中渲染相关的属性:颜色和形状。

  • 41 | CSS小实验:动手做,用代码挖掘CSS属性

    CSS属性数量繁多,我们的课程只能覆盖其中一小部分,所以我设计了这个小实验,教你用代码挖掘W3C标准中的属性。

  • 加餐 | 前端与图形学

    我们打开了一扇新的大门,如果想法再深入一点,我们不需要用图片了,可以直接用代码去渲染了。

  • 加餐 | 前端交互基础设施的建设

    这是我在交互基础设施建设上的一些思考和实践,包括图形图像基础、事件机制与视图层架构模式等内容。

  • 42 | HTML·ARIA:可访问性是只给盲人用的特性么?

    实际上,可访问性其实是一个相当大的课题,它的定义包含了各种设备访问、各种环境、各种人群访问的友好性。

  • 43 | 性能:前端的性能到底对业务数据有多大的影响?

    性能应该是基于业务和实际用户体验需求的一种工程实施,不是纯粹的技术游戏。

  • 44 | 工具链:什么样的工具链才能提升团队效率?

    假如一个团队每人发明几个小工具,后果将会是灾难性的:同一个团队无法配合写代码,一旦有人离职,可能某个项目永远无法跑起来。

  • 45 | 持续集成:几十个前端一起工作,如何保证工作质量?

    持续集成的概念最早来自桌面客户端软件开发,应用到前端领域有了变化。我提出了一个预览环境+规则校验的前端持续集成体系。

  • 46 | 搭建系统:大量的低价值需求应该如何应对?

    所谓工程师,就是为了解决这些问题而存在的岗位,我们从工程的视角来看,“大量紧急不重要的页面”,才是真正的需求。

  • 47 | 前端架构:前端架构有哪些核心问题?

    前端不存在分工问题,但是在多人协同时,仍然要解决质量和效率的问题,这就需要从架构的角度去解决问题。

  • 期末答疑(一):前端代码单元测试怎么做?

    我们专栏课程的知识部分已经告一段落了。今天,我来集中解决一下大家在学习中遇到的问题。

  • 期末答疑(二):前端架构中,每个逻辑页面如何可以做到独立发布呢?

    上一期的答疑文章发布之后,同学们的热情很高,我在后台又收到了一批新的问题,今天我们继续来答疑。

  • 尾声 | 长风破浪会有时,直挂云帆济沧海

    专栏的课程到此告一段落,但是对我而言,这是一个起点。长风破浪会有时,直挂云帆济沧海,希望未来能与你一起遇见更好的自己

限时拼团中,点「拼团按钮」,立即加入。

随着前端技术不断地发展,岗位需求与薪资一路攀升。整个前端业界正值“黄金时代”,而前端开发者们却似乎“学不动了”。

这缘于前端的学习是一条先快后慢的曲线。在快速入门之后,大多数人都会感觉:自己仅仅停留在会用的阶段,后面的学习之路似乎越来越陡峭,每前进一步都十分艰难。

其实是你没有意识到,你在自学的过程中走了太多弯路。

大部分前端工程师的知识,其实都来自于工作中零散的学习和实践。在这种情况下,学习方向一旦偏离,就可能导致基础不牢固,知识认知不清晰,难以建立完整的知识体系。

并且,如果所在公司业务简单,工程师更难以在实践中形成技术积累,这导致了自身技术长期处于非常初级的阶段。

winter在手机淘宝一直负责前端工程师的面试与培养工作,他深知其中的痛点与难点。在这个专栏中,winter将带你告别零散和盲目的自学,重新学习前端,一起搭建前端知识框架,共同明确学习重点,精进前端技术。

作者程劭非,网名“winter”,前端社区知名专家,前手机淘宝前端负责人,先后就职于微软、盛大、阿里巴巴等公司。winter早年做过嵌入式系统浏览器、电子书和 WebOS的相关工作,近年致力于移动前端领域研究,提出过 Flexible 布局等先进概念,也产出过 Weex这样的移动前端开发框架。

专栏共57讲,分为4大模块。

模块一,JavaScript :这部分会按照文法、语义和运行时去讨论JavaScript语言。这样的划分符合编程语言的一般规律,即“用一定的词法和语法,表达一定语义,去操作运行时”。而且,这样的划分也整合了零散的知识点,具有完备性。

模块二,HTML和CSS:这部分会侧重从语言和功能的角度来讲解,带你领略两者的全貌。HTML的功能主要由标签来承担,所以我们首先会把标签分类,并分别进行讲解。语言部分,我们会简要介绍HTML的语法和几个重要的语言机制。在CSS的语言部分,我们会从大到小介绍@rule、选择器、单位等等。功能部分,我们大致可以分为布局、绘制和交互类。

模块三,浏览器实现原理与API:这部分会着重讲解浏览器的工作原理。我们会一起来了解:一个浏览器到底是如何工作的。并且,我们还会学习一些重要的浏览器API,包括BOM、DOM、CSSOM等内容。只有了解了这些知识,你才能把JavaScript和HTML、CSS联系起来实现具体功能。

模块四,前端综合应用:作者会结合自己的前端工作经验,选择自己在手淘和淘宝工作中的一些案例来辅助讲解前端的性能、工具链、持续集成、架构等实际应用内容。

模块打乱发布,目录顺序仅供参考,按照文章实际发布顺序为准。

限时福利

你觉得怎么样?期待您评价: