宝贝介绍
你将获得
- 告别零散技术点,搭建前端知识体系;
- 打通JS、HTML、CSS、浏览器 4 大脉络;
- 40+ 前端难点完全解答;
- 大厂前端工程实战演练。
讲师介绍
程劭非,网名「winter」,前端社区知名专家,前手机淘宝前端负责人,先后就职于微软、盛大、阿里巴巴等公司。winter 早年做过嵌入式系统浏览器、电子书和 WebOS 的相关工作,近年致力于移动前端领域研究,提出过 Flexible 布局等先进概念,也产出过 Weex 这样的移动前端开发框架。
课程介绍
随着前端技术不断地发展,岗位需求与薪资一路攀升。整个前端业界正值「黄金时代」,而前端开发者们却似乎「学不动了」。
这缘于前端的学习是一条先快后慢的曲线。在快速入门之后,大多数人都会感觉:自己仅仅停留在会用的阶段,后面的学习之路似乎越来越陡峭,每前进一步都十分艰难。
其实是你没有意识到,你在自学的过程中走了太多弯路。
大部分前端工程师的知识,其实都来自于工作中零散的学习和实践。在这种情况下,学习方向一旦偏离,就可能导致基础不牢固,知识认知不清晰,难以建立完整的知识体系。
并且,如果所在公司业务简单,工程师更难以在实践中形成技术积累,这导致了自身技术长期处于非常初级的阶段。
winter 在手机淘宝一直负责前端工程师的面试与培养工作,他深知其中的痛点与难点。在这个专栏中,winter 将带你告别零散和盲目的自学,重新学习前端,一起搭建前端知识框架,共同明确学习重点,精进前端技术。
专栏分为4大模块。
模块一:JavaScript
这部分会按照文法、语义和运行时去讨论 JavaScript 语言。这样的划分符合编程语言的一般规律,即「用一定的词法和语法,表达一定语义,去操作运行时」。而且,这样的划分也整合了零散的知识点,具有完备性。
模块二,HTML 和 CSS
这部分会侧重从语言和功能的角度来讲解,带你领略两者的全貌。HTML 的功能主要由标签来承担,所以我们首先会把标签分类,并分别进行讲解。语言部分,我们会简要介绍 HTML 的语法和几个重要的语言机制。在 CSS 的语言部分,我们会从大到小介绍 @rule、选择器、单位等等。功能部分,我们大致可以分为布局、绘制和交互类。
模块三,浏览器实现原理与 API:
这部分会着重讲解浏览器的工作原理。我们会一起来了解:一个浏览器到底是如何工作的。并且,我们还会学习一些重要的浏览器 API,包括 BOM、DOM、CSSOM 等内容。只有了解了这些知识,你才能把 JavaScript 和 HTML、CSS 联系起来实现具体功能。
模块四,前端综合应用:
作者会结合自己的前端工作经验,选择自己在手淘和淘宝工作中的一些案例来辅助讲解前端的性能、工具链、持续集成、架构等实际应用内容。
课程目录
开篇词 + 学习路线 + 架构图 (3 讲)
开篇词 | 从今天起,重新理解前端
学习路线 | 明确你的前端学习路线与方法
架构图 | 列一份前端知识架构图
模块一:JavaScript (15 讲)
01 | JavaScript 类型:关于类型,有哪些你不知道的细节?
02 | JavaScript 对象:面向对象还是基于对象?
03 | JavaScript 对象:我们真的需要模拟类吗?
04 | JavaScript 对象:你知道全部的对象分类吗?
05 | JavaScript 执行 (一):Promise 里的代码为什么比 setTimeout 先执行?
06 | JavaScript 执行 (二):闭包和执行上下文到底是怎么回事?
07 | JavaScript 执行 (三):你知道现在有多少种函数吗?
08 | JavaScript 执行 (四):try 里面放 return,finally 还会执行吗?
09 | JavaScript 词法:为什么 12.toString 会报错?
10 | (小实验) 理解编译原理:一个四则运算的解释器
11 | JavaScript 语法 (预备篇):到底要不要写分号呢?
12 | JavaScript 语法 (一):在 script 标签写 export 为什么会抛错?
13 | JavaScript 语法 (二):你知道哪些 JavaScript 语句?
14 | JavaScript 语法 (三):什么是表达式语句?
15 | JavaScript 语法 (四):新加入的 ** 运算符,哪里有些不一样呢?
模块二:HTML 和 CSS (16 讲)
16 | HTML 语义:div 和 span 不是够用了吗?
17 | HTML 语义:如何运用语义类标签来呈现 Wiki 网页?
18 | CSS 语法:除了属性和选择器,你还需要知道这些带 @ 的规则
19 | HTML 元信息类标签:你知道 head 里一共能写哪几种标签吗?
20 | CSS 选择器:如何选中 svg 里的 a 元素?
21 | CSS 选择器:伪元素是怎么回事儿?
22 | HTML 链接:除了 a 标签,还有哪些标签叫链接?
23 | CSS 排版:从毕升开始,我们就开始用正常流了
24 | HTML 替换型元素:为什么 link 一个 CSS 要用 href,而引入 js 要用 src 呢?
25 | HTML 小实验:用代码分析 HTML 标准
26 | CSS Flex 排版:为什么垂直居中这么难?
27 | CSS 动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
28 | HTML 语言:DTD 到底是什么?
29 | CSS 渲染:CSS 是如何绘制颜色的?
30 | CSS 小实验:动手做,用代码挖掘 CSS 属性
31 | HTML·ARIA:可访问性是只给盲人用的特性么?
模块三:浏览器实现原理与 API (9 讲)
32 | 浏览器:一个浏览器是如何工作的?(阶段一)
33 | 浏览器:一个浏览器是如何工作的?(阶段二)
34 | 浏览器:一个浏览器是如何工作的(阶段三)
35 | 浏览器:一个浏览器是如何工作的?(阶段四)
36 | 浏览器:一个浏览器是如何工作的?(阶段五)
37 | 浏览器 DOM:你知道 HTML 的节点有哪几种吗?
38 | 浏览器 CSSOM:如何获取一个元素的准确位置
39 | 浏览器事件:为什么会有捕获过程和冒泡过程?
40 | 浏览器 API (小实验):动手整理全部 API
模块四:前端综合应用 (5 讲)
41 | 性能:前端的性能到底对业务数据有多大的影响?
42 | 工具链:什么样的工具链才能提升团队效率?
43 | 持续集成:几十个前端一起工作,如何保证工作质量?
44 | 搭建系统:大量的低价值需求应该如何应对?
45 | 前端架构:前端架构有哪些核心问题?
特别加餐 (9 讲)
新年彩蛋 | 2019,有哪些前端技术值得关注?
用户故事 | 那些你与 “重学前端” 的不解之缘
期中答疑 | name(){}与 name: function() {},两种写法有什么区别吗?
答疑加餐 | 学了这么多前端的 “小众” 知识,到底对我有什么帮助?
加餐 | 前端与图形学
加餐 | 前端交互基础设施的建设
期末答疑 (一):前端代码单元测试怎么做?
期末答疑 (二):前端架构中,每个逻辑页面如何可以做到独立发布呢?
加餐 | 一个前端工程师到底需要掌握哪些技能?
尾声 (1 讲)
尾声 | 长风破浪会有时,直挂云帆济沧海
注册向导
当你收到授权后,可以通过以下步骤兑换课程:
网页版兑换过程请按照以下步骤操作:
一、通过下方链接地址访问官方兑换网站:
https://time.geekbang.org/service/exchange
二、进入官网后,点击网页右上角的「登陆」按钮:
-
三、在转跳的网页中,任选一种登陆方式登陆账号,
-
四、在转跳的网页中,输入「兑换码 > 验证码」点击「立即验证」即可解锁全部课程。
-
手机版兑换过程请按照以下步骤操作:
一、打开「极客时间」官方 App,依次点击菜单栏「我的 > 点击登陆 > 登陆账号」按钮:
-
二、登陆后返回首页,依次点击「我的 > 兑换中心 > 立即兑换」按钮:
-
三、在弹出的窗口中,输入「兑换码」点击「立即验证」即可解锁全部课程。
-
常见问题
如果你在使用过程中遇到问题,可访问以下链接,前往我们的官方网站查看常见问题的解决方案。