所学所思

上一期的答疑文章发布之后，同学们的热情很高，我在后台又收到了一批新的问题，今天我们继续来答疑。1. 请问前端架构中，每个逻辑页面如何可以做到独立发布呢？答：首先，我们要知道发布是什么意思，我们平时开发好一个网页，把它放到线上真实对用户服务的机器上，这个过程叫做发布。正常来讲，前端工程师发布的原材料是HTML，产出是一个线上的URL地址。各个公司的发布系统差异非常的大，有的是前端发HTML，有的是前端把代码给服务端同学，改成JSP之类的代码，再一起发布。对于逻辑页面而言，我们需要发布的从HTML变成了Java

集中解决一下大家在学习中遇到的问题，我争取用快问快答的形式，咱们多回答一些问题。1. 前端代码单元测试还是非常有必要的，不知道老师这一块是怎么做的，能否分享一下？答：关于单元测试这件事，虽然在业务代码我没做成功过，但是它在框架和基础库开发中起到了非常积极的作用。我们平时写代码也肯定写一部分就要运行一下试试，其实这种行为就是单元测试，只是我们把很多自动化的内容，用人肉执行了，并且没有保存和管理case，也没有统计code coverage。只要选择一个好的单元测...

分享内容大纲Vue、React等现代前端框架很好地解决了组件化和数据视图解耦问题。而对前端来说，新交互永远是花费时间最多的工作，新交互也是前端团队的自然价值和核心竞争力之一。在这次话题中，我会分享在交互的基础设施的建设上的一些思考和实践，包括图形图像基础、事件机制与视图层架构模式、交互管理框架等内容。首先我们要了解一下历史。在70年代，大概是70年代的尾巴，1979年左右，有了特别有名的，MVC架构。MVC之后，经过了差不多十几年的发展，到了90年代，准确地说应该是95年左右的时候，这个有一个公司的CTO，

（点击视频观看完整分享内容。）主要内容关于前端和图形学，我分成了三个部分来讲解。第一部分是讲前端和图形学有什么样的关系。我们为什么要在前端里引入图形学，这个也是我的一段心路历程。第二部分相对来说是比较实用的，就是图形学的应用场景。如何在前端的日常的工作中，把图形学的知识用进去，为我们的工作和业务创造价值。最后一部分是对图形学基础设施的一些建设，目前还是一个比较初级的阶段，但是对大家来说，应该有些思路还是可以去思考的。前端和图形学首先讲第一部分前端和图形学，先讲讲缘起。缘起2011年我做了

1.老师讲的内容是不是工作中用不到的，对掌握前端的实际工作有什么帮助呢，我们有必要掌握这些比较偏的内容吗？我自己一直奉行着一个观点，不要执着于知识的“临时”实用性。因为我总是感觉，掌握知识越多的人，更喜欢花费时间学习一些暂时可能无法变现的知识，原因有两点：一是其实学知识花费的时间比想象中的要少，这边在纠结它有没有用，那边可能都学完了；二是知识的实用性其实不怎么好判定，比如当年黎曼搞出非欧几何的时候，全世界都觉得纯粹是数学的思维游戏，直到黎曼死了很多年后，相对论出世，黎曼几何有了实际用途。不过，这里我还是希望

写在前面的话不知不觉，专栏已经更新了一半有余了。在两个月的时间里，我收到了很多同学的留言，很开心可以跟大家保持交流，也很惊喜见证了大家的成长。在整个学习过程中，你有没有一些学习感悟呢，有哪些新的学习收获，又有哪些实践感悟？有没有对前端的知识架构有了更为深刻的认识，是否规划好了自己的前端之路。下面我们就一起来看看三位同学的分享。极客时间用户@阿成 分享在我进入知乎社区的时候，winter 老师就已经不在这个社区了，虽然是退隐了江湖，但是江湖上还流传着他的传说，后来我在 Google Feed 中看到 wint

首先呢，我觉得可以谈一谈，我特别关注的图形学领域。进击吧，图形学！在淘宝工作的后期，我也有很大一部分精力放在了图形学上面，我是深刻地感觉到，在未来，图形学会和前端结合的更紧密。这是由于我觉得图形实际上是UI最重要的一部分计算机科学，同时它也是计算机领域里面的一个非常关键的学科。我们的前端就是做UI的这样的一个职能，在未来，我觉得随着前端的工作层级逐渐地下沉，前端能够做到越来越多的事情。我们的图形也会逐渐的成为前端的一个基本的技能。我在2018年已经可以看到很多2D和3D领域的应用了，我们会用2D的东西去做图

今天我们来谈谈架构。在传统桌面软件开发中，架构师是一种通过设计架构保证团队能够良好分工和有序工作的岗位。在工程领域，我们凡是要做点什么事儿，都会有明确的目的性，这个目的性，一定是为了完成生产服务业务的。为什么桌面软件开发需要架构师和架构设计呢？因为桌面软件开发具有高度的复杂性，如果没有架构，就没法分解成互相耦合低的模块来分工。所以一般来说，架构是为了分工而存在的。但是到了前端领域，这个问题是否还存在呢？答案是，不存在。前端是个天然按照页面解耦的技术，在多页面架构中，页面的复杂度大约刚好适合一个人的工作量。（

不知道你在工作中有没有遇到过这样的事情：一个运营找过来说，有一个紧急又简单的临时活动页面要做，希望打断现有的产品开发节奏临时插入。这类页面技术难度不高，业务上通常属于“紧急不重要”的事情。这些需求技术上没挑战，线上存在时间短，上线时间紧又没有任何调整空间，它们往往会成为前端团队里人人都不喜欢的“垃圾需求”，谁要是接了这种需求，就只能自认倒霉。但是，这些真的是垃圾需求吗？换个视角来看，我认为它反而是宝藏。所谓工程师，就是为了解决这些问题而存在的岗位，我们从工程的视角来看，“大量紧急不重要的页面”，才是真正的需

今天我们来聊聊持续集成。持续集成是近现代软件工程中的一个非常重要的概念。它是指在软件开发过程中，以定期或者实时的方式，集成所有人的工作成果，做统一的构建和测试。与持续集成相对的做法是：独立开发各个模块，在软件开发的最终阶段才做集成。持续集成的优势是及早处理集成阶段的问题，使软件质量和开发进度可控。现在持续集成还有升级版本：持续交付和持续部署，这些因为需要更为完善的基础设施，目前很少有公司前端团队可以用上，我们暂且不谈。传统的持续集成概念诞生于桌面客户端开发，在Web前端领域，由于技术和产品形态的差别，我们需

今天我们的主题是工具。古语云：“工欲善其事，必先利其器”，程序员群体对工具的爱好和重视是一个悠久的传统。简单趁手的工具是程序员开发的好帮手。但是在工程方面，工具不仅仅是简单的“趁手”即可，假如一个团队人人都自己发明几个小工具，那么后果将会是灾难性的：同一个团队的同学无法互相配合写代码，一旦有人离职，可能某一个项目就永远无法跑起来了。所以我们今天从工程的角度谈一谈工具体系的规划。工具总论跟性能不同，工具体系并非业务结果，所以我们没法用简单的数据指标来衡量工具，它的结果更多程度是一种开发体验：帮助技术团队内的同

从今天开始，我们就从前端知识学习的部分，过渡到了实践部分。这节课我来谈谈性能。性能是个特别有意思的话题，在我之前的工作中，从入门的初级工程师到高级别的技术专家，大家都很喜欢谈性能，我以前参与晋升评审，每年总能听到很多关于性能的晋升述职。那么，今天我就来谈谈我眼中的性能。性能总论while循环快还是for循环快？|0 是不是比 Math.floor 性能好？网上随处可以见到一类对性能的讨论。一些新人也非常热衷此类讨论。但是实际上，它们除了让你写代码的时候纠结之外，毫无意义。为什么这样讲呢？我想讲一个小

今天我们来讲讲浏览器API。浏览器的API数目繁多，我们在之前的课程中，已经一起学习了其中几个比较有体系的部分：比如之前讲到过的DOM和CSSOM等等。但是，如果你留意过，会发现我们讲到的API仍然是标准中非常小的一部分。这里，我们不可能把课程变成一本厚厚的API参考手册，所以这一节课，我设计了一个实验，我们一起来给API分分类。我们按照每个API所在的标准来分类。所以，我们用代码来反射浏览器环境中全局对象的属性，然后我们用JavaScript的filter方法来逐步过滤掉已知的属性。接下来，我们整理API

这一节课，我们进入了浏览器的部分，一起来学习一下事件。事件概述在开始接触具体的API之前，我们要先了解一下事件。一般来说，事件来自输入设备，我们平时的个人设备上，输入设备有三种：键盘；鼠标；触摸屏。这其中，触摸屏和鼠标又有一定的共性，它们被称作pointer设备，所谓pointer设备，是指它的输入最终会被抽象成屏幕上面的一个点。但是触摸屏和鼠标又有一定区别，它们的精度、反应时间和支持的点的数量都不一样。我们现代的UI系统，都源自WIMP系统。WIMP即Window Icon Menu Pointe

在前面的课程中，我们已经学习了DOM相关的API，狭义的DOM API仅仅包含DOM树形结构相关的内容。今天，我们再来学习一类新的API：CSSOM。我想，你在最初接触浏览器API的时候，应该都有跟我类似的想法：“好想要element.width、element.height这样的API啊”。这样的API可以直接获取元素的显示相关信息，它们是非常符合人的第一印象直觉的设计，但是，偏偏 DOM API 中没有这样的内容。随着学习的深入，我才知道，这样的设计是有背后的逻辑的，正如HTML和CSS分别承担了语义和

今天我们进入浏览器API的学习, 这一节课，我们来学习一下DOM API。DOM API是最早被设计出来的一批API，也是用途最广的API，所以早年的技术社区，常常用DOM来泛指浏览器中所有的API。不过今天这里我们要介绍的DOM，指的就是狭义的文档对象模型。DOM API介绍首先我们先来讲一讲什么叫做文档对象模型。顾名思义，文档对象模型是用来描述文档，这里的文档，是特指HTML文档（也用于XML文档，但是本课不讨论XML）。同时它又是一个“对象模型”，这意味着它使用的是对象这样的概念来描述HTML文档。说

我们的浏览器系列已经进行到最后一篇。在之前的几篇文章中，我们已经经历了把URL变成字符流，把字符流变成词（token）流，把词（token）流构造成DOM树，把不含样式信息的DOM树应用CSS规则，变成包含样式信息的DOM树，并且根据样式信息，计算了每个元素的位置和大小。那么，我们最后的步骤，就是根据这些样式信息和大小信息，为每个元素在内存中渲染它的图形，并且把它绘制到对应的位置。渲染首先我们来谈谈渲染这个词，渲染也是个外来词，它是英文词render的翻译，render这个词在英文里面，有“导致”“变成”的

我们书接上文。浏览器进行到这一步，我们已经给DOM元素添加了用于展现的CSS属性，接下来，浏览器的工作就是确定每一个元素的位置了。我们的基本原则仍然不变，就是尽可能流式地处理上一步骤的输出。在构建DOM树和计算CSS属性这两个步骤，我们的产出都是一个一个的元素，但是在排版这个步骤中，有些情况下，我们就没法做到这样了。尤其是表格相关排版、Flex排版和Grid排版，它们有一个显著的特点，那就是子元素之间具有关联性。基本概念首先我们先来介绍一些基本概念，使你可以感性地认识一下我们平常说的各种术语。“排版”这个概

在上一节课中，我已经讲了浏览器的DOM构建过程，但是这个构建的DOM，实际上信息是不全的，它只有节点和属性，不包含任何的样式信息。我们这一节课就来讲讲：浏览器是如何把CSS规则应用到节点上，并给这棵朴素的DOM树添加上CSS属性的。整体过程首先我们还是要感性地理解一下这个过程。首先CSS选择器这个名称，可能会给你带来一定的误解，觉得好像CSS规则是DOM树构建好了以后，再进行选择并给它添加样式的。实际上，这个过程并不是这样的。我们回忆一下我们在浏览器第一节课讲的内容，浏览器会尽量流式处理整个过程。我们上一节

今天我们继续来看浏览器的相关内容。我在上一篇文章中，简要介绍了浏览器的工作大致可以分为6个阶段，我们昨天讲完了第一个阶段，也就是通讯的部分：浏览器使用HTTP协议或者HTTPS协议，向服务端请求页面的过程。今天我们主要来看两个过程：如何解析请求回来的HTML代码，DOM树又是如何构建的。解析代码我们在前面讲到了HTTP的构成，但是我们有一部分没有详细讲解，那就是Response的body部分，这正是因为HTTP的Response的body，就要交给我们今天学习的内容去处理了。HTML的结构不算太复杂，我们

对于前端开发来说，我们平时与浏览器打交道的时间是最多的。可浏览器对前端同学来说更多像一个神秘黑盒子的存在。我们仅仅知道它能做什么，而不知道它是如何做到的。在我面试和接触过的前端开发者中，70%的前端同学对这部分的知识内容只能达到“一知半解”的程度。甚至还有一部分同学会质疑这部分知识是否重要：这与我们的工作相关吗，学多了会不会偏移前端工作的方向？事实上，我们这里所需要了解的浏览器工作原理只是它的大致过程，这部分浏览器工作原理不但是前端面试的常考知识点，它还会辅助你的实际工作，学习浏览器的内部工作原理和个中缘由

上一节课我们已经给你介绍了表达式的一些结构，其中关于赋值表达式，我们讲完了它的左边部分，而留下了它右边部分，那么，我们这节课一起来详细讲解。在一些通用的计算机语言设计理论中，能够出现在赋值表达式右边的叫做：右值表达式（RightHandSideExpression），而在JavaScript标准中，规定了在等号右边表达式叫做条件表达式（ConditionalExpression），不过，在JavaScript标准中，从未出现过右值表达式字样。JavaScript标准也规定了左值表达式同时都是条件表达式（也就

不知道你有没有注意到，我们在语句部分，讲到了很多种语句类型，但是，其实最终产生执行效果的语句不多。事实上，真正能干活的就只有表达式语句，其它语句的作用都是产生各种结构，来控制表达式语句执行，或者改变表达式语句的意义。今天的课程，我们就深入到表达式语句中来学习一下。什么是表达式语句表达式语句实际上就是一个表达式，它是由运算符连接变量或者直接量构成的（关于直接量我们在下一节详细讲解）。一般来说，我们的表达式语句要么是函数调用，要么是赋值，要么是自增、自减，否则表达式计算的结果没有任何意义。但是从语法上，并没有这

你好，我是winter。我们在上一节课中已经讲过了JavaScript语法的顶层设计，接下来我们进入到更具体的内容。JavaScript遵循了一般编程语言的“语句-表达式”结构，多数编程语言都是这样设计的。我们在上节课讲的脚本，或者模块都是由语句列表构成的，这一节课，我们就来一起了解一下语句。在JavaScript标准中，把语句分成了两种：声明和语句，不过，这里的区分逻辑比较奇怪，所以，这里我还是按照自己的思路给你整理一下。普通语句：声明型语句：我们根据上面的分类，来遍历学习一下这些语句。语句块我们可以这.

你好，我是winter，今天我们进入到语法部分的学习。在讲解具体的语法结构之前，这一堂课我首先要给你介绍一下JavaScript语法的一些基本规则。脚本和模块首先，JavaScript有两种源文件，一种叫做脚本，一种叫做模块。这个区分是在ES6引入了模块机制开始的，在ES5和之前的版本中，就只有一种源文件类型（就只有脚本）。脚本是可以由浏览器或者node环境引入执行的，而模块只能由JavaScript代码用import引入执行。从概念上，我们可以认为脚本具有主动性的JavaScript代码段，是控制宿主完.

在我们介绍JavaScript语法的全局结构之前，我们先要探讨一个语言风格问题：究竟要不要写分号。这是一个非常经典的口水问题，“加分号”党和“不写分号”党之间的战争，可谓是经久不息。实际上，行尾使用分号的风格来自于Java，也来自于C语言和C++，这一设计最初是为了降低编译器的工作负担。但是，从今天的角度来看，行尾使用分号其实是一种语法噪音，恰好JavaScript语言又提供了相对可用的分号自动补全规则，所以，很多JavaScript的程序员都是倾向于不写分号。这里要特意说一点，在今天的文章中，我并不希望去

在前面的课程中，我在JavaScript和CSS的部分，多次提到了编译原理相关的知识。这一部分的知识，如果我们从编译原理“龙书”等正规的资料中学习，就会耗费掉不少的时间，所以我在这里设计了一个小实验，帮助你快速理解编译原理相关的知识。今天的内容比较特殊，我们来做一段详细的代码实验，详细的代码我放在了文章里，如果你正在收听音频，可以点击文章查看详情。分析按照编译原理相关的知识，我们来设计一下工作，这里我们分成几个步骤。定义四则运算：产出四则运算的词法定义和语法定义。词法分析：把输入的字符串流变成token

在前面的文章中，我们已经从运行时的角度了解过JavaScript的知识内容，在接下来的几节课，我们来了解一下JavaScript的文法部分。文法是编译原理中对语言的写法的一种规定，一般来说，文法分成词法和语法两种。词法规定了语言的最小语义单元：token，可以翻译成“标记”或者“词”，在我的专栏文章中，我统一把token翻译成词。从字符到词的整个过程是没有结构的，只要符合词的规则，就构成词，一般来说，词法设计不会包含冲突。词法分析技术上可以使用状态机或者正则表达式来进行，我们的课程主要是学习词法，关于它们实

在前面几篇文章中，我们已经了解了关于执行上下文、作用域、闭包之间的关系。今天，我们则要说一说更为细节的部分：语句。语句是任何编程语言的基础结构，与JavaScript对象一样，JavaScript语句同样具有“看起来很像其它语言，但是其实一点都不一样”的特点。我们比较常见的语句包括变量声明、表达式、条件、循环等，这些都是大家非常熟悉的东西，对于它们的行为，我在这里就不赘述了。为了了解JavaScript语句有哪些特别之处，首先我们要看一个不太常见的例子，我会通过这个例子，来向你介绍JavaScript语句执

在前一篇文章中，我们大致了解了执行上下文是什么，也知道了任何语句的执行都会依赖特定的上下文。一旦上下文被切换，整个语句的效果可能都会发生改变。那么，切换上下文的时机就显得非常重要了。在JavaScript，切换上下文最主要的场景是函数调用。在这一课，我们就来讲讲函数调用切换上下文的事情。我们在讲函数调用之前，首先来认识一下函数家族。函数在ES2018中，函数已经是一个很复杂的体系了，我在这里整理了一下。第一种，普通函数：用function关键字定义的函数。示例：function foo(){ //

你好，我是winter。在上一课，我们了解了JavaScript执行中最粗粒度的任务：传给引擎执行的代码段。并且，我们还根据“由JavaScript引擎发起”还是“由宿主发起”，分成了宏观任务和微观任务，接下来我们继续去看一看更细的执行粒度。一段JavaScript代码可能会包含函数调用的相关内容，从今天开始，我们就用两节课的时间来了解一下函数的执行。我们今天要讲的知识在网上有不同的名字，比较常见的可能有：闭包；作用域链；执行上下文；this值。实际上，尽管它们是表示不同的意思的术语，所指向的几.

这一部分我们来讲一讲JavaScript的执行。首先我们考虑一下，如果我们是浏览器或者Node的开发者，我们该如何使用JavaScript引擎。当拿到一段JavaScript代码时，浏览器或者Node环境首先要做的就是；传递给JavaScript引擎，并且要求它去执行。然而，执行JavaScript并非一锤子买卖，宿主环境当遇到一些事件时，会继续把一段代码传递给JavaScript引擎去执行，此外，我们可能还会提供API给JavaScript引擎，比如setTimeout这样的API，它会允许JavaScr

在前面的课程中，我已经讲解了JavaScript对象的一些基础知识。但是，我们所讲解的对象，只是特定的一部分，并不能涵盖全部的JavaScript对象。比如说，我们不论怎样编写代码，都没法绕开Array，实现一个跟原生的数组行为一模一样的对象，这是由于原生数组的底层实现了一个自动随着下标变化的length属性。并且，在浏览器环境中，我们也无法单纯依靠JavaScript代码实现div对象，只能靠document.createElement来创建。这也说明了JavaScript的对象机制并非简单的属性集合+原

早期的JavaScript程序员一般都有过使用JavaScript“模拟面向对象”的经历。在上一篇文章我们已经讲到，JavaScript本身就是面向对象的，它并不需要模拟，只是它实现面向对象的方式和主流的流派不太一样，所以才让很多人产生了误会。那么，随着我们理解的思路继续深入，这些“模拟面向对象”，实际上做的事情就是“模拟基于类的面向对象”。尽管我认为，“类”并非面向对象的全部，但我们不应该责备社区出现这样的方案，事实上，因为一些公司的政治原因，JavaScript推出之时，管理层就要求它去模仿Java。所

与其它的语言相比，JavaScript中的“对象”总是显得不那么合群。一些新人在学习JavaScript面向对象时，往往也会有疑惑：为什么JavaScript（直到ES6）有对象的概念，但是却没有像其他的语言那样，有类的概念呢；为什么在JavaScript对象里可以自由添加属性，而其他的语言却不能呢？甚至，在一些争论中，有人强调：JavaScript并非“面向对象的语言”，而是“基于对象的语言”。这个说法一度流传甚广，而事实上，我至今遇到的持有这一说法的人中，无一能够回答“如何定义面向对象和基于对象”

今天我们来讲讲JavaScript的内容，在这个部分，我首先想跟你聊一聊类型。JavaScript类型对每个前端程序员来说，几乎都是最为熟悉的概念了。但是你真的很了解它们吗？我们不妨来看看下面的几个问题。为什么有的编程规范要求用void 0代替undefined？字符串有最大长度吗？0.1 + 0.2不是等于0.3么？为什么JavaScript里不是这样的？ES6新加入的Symbol是个什么东西？为什么给对象添加的方法能用在基本类型上？如果你答起来还有些犹豫的地方，这就说明你对这部分知识点，还是

我们都知道，HTML已经是一个完整的语义系统。在前面的课程中，我们围绕着HTML本身做了讲解，但是在实际应用中，我们还会用到一些它的扩展。今天我们要讲的ARIA就是其中重要的一部分。ARIA全称为Accessible Rich Internet Applications，它表现为一组属性，是用于可访问性的一份标准。关于可访问性，它被提到最多的，就是它可以为视觉障碍用户服务，但是，这是一个误解。实际上，可访问性其实是一个相当大的课题，它的定义包含了各种设备访问、各种环境、各种人群访问的友好性。不单单是永久性的

课程中已经讲解了一部分CSS属性，但是CSS属性数量繁多，我们的课程只能覆盖其中一小部分，所以我设计了这个小实验，教你用代码挖掘W3C标准中的属性。浏览器中已经实现的属性首先我们来看看浏览器中实现了哪些属性。我们用一段代码来看一下。Object.keys(document.body.style).filter(e => !e.match(/^webkit/))这段代码思路非常简单，就是枚举document.body.style上的所有属性，并且去掉webkit前缀的私有属性。在我的Chrome中，得

今天我们来学习一下CSS的渲染相关的属性。我们在布局篇讲到，CSS的一些属性决定了盒的位置，那么今天我讲到的属性就决定了盒如何被渲染。按照惯例，还是先从简单得讲起，首先我们来讲讲颜色。颜色的原理首先我们来讲讲颜色，最常见的颜色相关的属性就是 color 和 background-color。这两个属性没什么好讲的，它们分别表示文字颜色和背景颜色，我们这里重点讲讲颜色值。RGB颜色我们在计算机中，最常见的颜色表示法是RGB颜色，它符合光谱三原色理论：红、绿、蓝三种颜色的光可以构成所有的颜色。为什么是这三种颜色

今天我们来学习一下CSS的动画和交互。在CSS属性中，有这么一类属性，它负责的不是静态的展现，而是根据用户行为产生交互。这就是今天我们要讲的属性。首先我们先从属性来讲起。CSS中跟动画相关的属性有两个：animation和transition。animation属性和transition属性我们先来看下animation的示例，通过示例来了解一下animation属性的基本用法:@keyframes mykf{ from {background: red;} to {background: yel