前端
文章平均质量分 93
前端
_Rye_
左手代码右手诗
一行代码一行诗
展开
-
尾声 | 长风破浪会有时,直挂云帆济沧海
与以前零散地写博客相比,按时按体系去产出课程需要花费成倍的时间和精力。不断查阅资料,整理代码,这个专栏对我自己来说,也是一个自我重塑的过程。在这个专栏即将结束的时刻,我想借这个课程谈谈我对教育的理解。原创 2024-06-14 15:09:12 · 308 阅读 · 0 评论 -
前端架构中,每个逻辑页面如何可以做到独立发布呢?
Window 对象比较复杂,这块我没有详细讲,从 JavaScript 的 Global Object 的角度可以讲,浏览器部分还有个 Window Proxy 机制,我是觉得复杂又没什么实际意义就没有讲,你可以这样感性地理解一下:全局对象和 Window 对象合成了一个东西。答:这里说的确实有点歧义,我在这里再厘清一下。答:这一部分,首先你需要一个比较通用的日志服务,能接受前端用 HTTP 请求的方式打一些日志进去,一般公司都会有这样的系统,如果没有,就需要新建一个,这部分比较麻烦,需要一定的专业知识。原创 2024-06-14 09:12:15 · 1250 阅读 · 0 评论 -
前端代码单元测试怎么做?
总体而言,本文涵盖了前端开发中的多个技术问题,为读者提供了丰富的知识和实用的建议。但是,你不能认为懂了 Node 就懂了后端,懂了 electron 就懂了客户端,每个领域都可以很深入,知识本来就是学不完的,你能掌握多少只跟投入的时间有关,这道理是很简单的,与其困惑,不如把困惑的时间拿来学习,相信你会有所收获的。答:缓存的是位图,父子元素位置变化时,因为子元素的位图被缓存,子元素不需要重新渲染,因为父元素的位图也被缓存,父元素也不需要重新渲染,只有父子元素合成起来的位图需要被渲染。手机早就更新好几代了。原创 2024-06-13 17:13:33 · 726 阅读 · 0 评论 -
前端交互基础设施的建设
这个变化对于 UI 有很大的影响,1970 年的那个 MVC 那篇论文里的图,model 很大,view 很小,而到了 2018 年,今天我们很多的 model,都是放在服务端的,而今天 model 的大小已经不是说一台机器上能去存的,你存在本地的只是视图展现一点点的 model,这个是很小的一部分的东西。MVC 之后,经过了差不多十几年的发展,到了 90 年代,准确地说应该是 95 年左右的时候,这个有一个公司的 CTO,叫 Mike,Mike 在 MVC 的基础上,提出来了 MVP。原创 2024-06-13 16:10:11 · 985 阅读 · 0 评论 -
学了这么多前端的“小众”知识,到底对我有什么帮助?
这一期想跟你谈谈前端知识的学习姿势。课程进展至今,已经把大部分困难的知识点都讲完了。我在后台收到了一些留言,有的同学针对前端专栏的学习方法和学习方向提出了一些问题,在本期文章中,为了让同学们更好地理解我们专栏的重点,最大程度地吸收知识,在今天的文章中,会逐一回答同学们在学习方法上的困惑。原创 2024-06-13 15:26:57 · 864 阅读 · 0 评论 -
name(){}与name: function() {},两种写法有什么区别吗?
接下来,因为微任务队列没空,第一个宏任务没有结束,继续执行微任务队列,所以 pro_then,被显示出来,然后又调用了一次 setTimeout,所以 pro_timeout 进入宏任务队列,成为第 5 个宏任务。答:排版应该是会重新排的,但是如果有些元素的尺寸没有改变,那么它内部不需要重排,当然也就更不需要重新渲染了,但是绘制应该是要重绘的,目前来看,浏览器还没有那么智能。第一个宏任务中,调用了三次 setTimeout(Promise 中的代码也是同步执行的),调用了一次 resolve,打印了三次。原创 2024-06-13 11:10:13 · 1021 阅读 · 0 评论 -
前端架构:前端架构有哪些核心问题?
今天从宏观的角度介绍了前端架构相关的知识,我重点介绍了“组件化”“适配性”“单页应用”三个前端架构需要解决的核心问题,组件化在社区有很多现成的方案,我们需要做的主要工作是框架选型。适配性需要用到 CSS 的几种特性:vw 单位、viewport 规则和 media 规则,单页应用重点是逻辑页面解耦、独立开发和发布和保持前进后退历史。前端架构在传统桌面软件开发中扮演着重要角色,但在前端领域却存在着不同的挑战和需求。原创 2024-06-13 10:29:34 · 878 阅读 · 0 评论 -
搭建系统:大量的低价值需求应该如何应对?
本课我为你讲解了搭建系统,搭建系统是为了应对大量简单页面的生产需求而设计的一种工具型产品,它的目标非常明确,就是快速生产大量的页面。方案上,它重点和难点在于几个产品实体的设计,数据部分重点在于编辑器和跟服务端 API 的对接,模板部分则主要是版本化和数据的格式定义,模块除了模板的重点,还有拖拽系统,最终产生的页面主要的难点是跟生产环境的对接。搭建系统的实施主要是把产品在做出来,一般来讲推广是非常自然的事情,最后,搭建系统产生的数据监控关键的指标是用户访问数和生产页面数。原创 2024-06-12 11:45:30 · 620 阅读 · 0 评论 -
持续集成:几十个前端一起工作,如何保证工作质量?
今天我们讲解了持续集成,持续集成这个概念最早来自桌面客户端软件开发,应用到前端领域,会有一定的变化。这里我提出了一个预览环境 + 规则校验的前端持续集成体系。预览环境需要申请机器和域名、部署和建立发布机制,规则校验有三种方法:结构扫描、数据采集和代码扫描。持续集成的实施需要重点关注校验规则部分,要建立一个民主讨论、定期更新的校验规则。持续集成机制的建立就是其结果本身,此外,系统中产生的数据也可以有一定管理价值。最后留一个问题,你所在的团队,是否有做持续集成呢?请你设计或者改进这个持续集成方案。。原创 2024-06-12 11:25:24 · 957 阅读 · 0 评论 -
工具链:什么样的工具链才能提升团队效率?
这一课,我们讲解了工具相关的工程知识。我们仍然从目标、方案设计、执行和结果四个方面来讲解,工具体系的目标除了单个工具解决具体问题之外,还要注意一致性和配合问题,因此我们需要工具链。工具链一般会涵盖研发阶段的各个主要操作。工具体系的执行比较简单,很容易就可以做到完全的自动化。工具体系的监控同样非常重要,工具的监控除了帮助我们改进工具体系,对研发体系的其它部分也有帮助。最后,请你思考下自己所在的团队,是否已经建立了工具体系?听完了今天的课程,你认为它有哪些可改进的部分?。原创 2024-06-07 18:00:54 · 976 阅读 · 1 评论 -
性能:前端的性能到底对业务数据有多大的影响?
今天我们学习了前端团队工程实施中的性能体系,首先我们介绍了总体思想:性能应该是基于业务和实际用户体验需求的一种工程实施,不是纯粹的技术游戏。接下来我们分成四个步骤介绍了性能工程体系,首先介绍了现状评估和建立指标,建立指标应当从业务的角度考虑,接下来讲了技术方案设计,技术方案应当从整体角度,基于 Profiling 的结果分析来设计。之后我们讲了实施,我们讲了工程实施的三个层次:纯管理、制度化、工程化,最后,我们讲了结果评估和线上监控,线上监控需要从数据采集和数据展现两个部分分别实现。原创 2024-06-07 15:23:18 · 1035 阅读 · 0 评论 -
浏览器API(小实验):动手整理全部API
到 Screen Orientation API,我这里看到还剩 300 余个属性没有处理,剩余部分,我想把它留给大家自己来完成。我们可以看到,在整理 API 的过程中,我们可以找到各种不同组织的标准,比如:ECMA402 标准来自 ECMA;Encoding 标准来自 WHATWG;WebGL 标准来自 Khronos;Web Cryptography 标准来自 W3C;还有些 API,根本没有被标准化。浏览器环境的 API,正是这样复杂的环境。我们平时编程面对的环境也是这样的一个环境。原创 2024-06-07 14:47:38 · 771 阅读 · 0 评论 -
浏览器事件:为什么会有捕获过程和冒泡过程?
在开始接触具体的 API 之前,我们要先了解一下事件。一般来说,事件来自输入设备,我们平时的个人设备上,输入设备有三种:键盘;鼠标;触摸屏。这其中,触摸屏和鼠标又有一定的共性,它们被称作 pointer 设备,所谓 pointer 设备,是指它的输入最终会被抽象成屏幕上面的一个点。但是触摸屏和鼠标又有一定区别,它们的精度、反应时间和支持的点的数量都不一样。我们现代的 UI 系统,都源自 WIMP 系统。原创 2024-06-07 11:12:36 · 980 阅读 · 0 评论 -
浏览器CSSOM:如何获取一个元素的准确位置
今天我们一起学习了 CSSOM 这一类型的 API。我们首先就说到了,就像 HTML 和 CSS 分别承担了语义和表现的分工,DOM 和 CSSOM 也有语义和表现的分工。CSSOM 是 CSS 的对象模型,在 W3C 标准中,它包含两个部分:描述样式表和规则等 CSS 的模型部分(CSSOM),和跟元素视图相关的 View 部分(CSSOM View)。最后留给你一个问题,请找一个网页,用我们今天讲的 API,把页面上的所有盒的轮廓画到一个 canvas 元素上。。原创 2024-06-07 10:30:53 · 595 阅读 · 0 评论 -
浏览器DOM:你知道HTML的节点有哪几种吗?
首先我们先来讲一讲什么叫做文档对象模型。顾名思义,文档对象模型是用来描述文档,这里的文档,是特指 HTML 文档(也用于 XML 文档,但是本课不讨论 XML)。同时它又是一个“对象模型”,这意味着它使用的是对象这样的概念来描述 HTML 文档。说起 HTML 文档,这是大家最熟悉的东西了,我们都知道,HTML 文档是一个由标签嵌套而成的树形结构,因此,DOM 也是使用树形的对象模型来描述一个 HTML 文档。DOM API 大致会包含 4 个部分。节点:DOM 树形结构中的节点相关 API。原创 2024-06-07 09:13:32 · 821 阅读 · 0 评论 -
浏览器:一个浏览器是如何工作的?(阶段五)
在这一节课程中,我们讲解了浏览器中的位图操作部分,这包括了渲染、合成和绘制三个部分。渲染过程把元素变成位图,合成把一部分位图变成合成层,最终的绘制过程把合成层显示到屏幕上。当绘制完成时,就完成了浏览器的最终任务,把一个 URL 最后变成了一个可以看的网页图像。当然了,我们对每一个部分的讲解,都省略了大量的细节,比如我们今天讲到的绘制,就有意地无视了滚动区域。原创 2024-06-06 16:35:30 · 687 阅读 · 0 评论 -
浏览器:一个浏览器是如何工作的?(阶段四)
这一部分,我们以正常流为主,介绍了浏览器的排版基本概念及一些算法。这里,主要介绍了正常流中的文字排版、正常流中的盒、绝对定位元素、浮动元素排版这几种情况。最后,还简单介绍了一下 Flex 排版。这属于进阶版的排版方式了,你可以了解一下。浏览器排版是浏览器渲染页面的重要步骤之一。在排版阶段,浏览器确定每个元素的位置,包括文字、图片、图形和表格等。排版的基本概念源自活字印刷,而现代浏览器的排版内容更加复杂。浏览器支持不同语言的书写顺序和双向文字系统,同时还支持元素和文字的混排,采用盒模型进行排版。原创 2024-06-06 15:37:27 · 697 阅读 · 0 评论 -
浏览器:一个浏览器是如何工作的(阶段三)
这一我们讲解了 CSS 计算的过程。CSS 计算是把 CSS 规则应用到 DOM 树上,为 DOM 结构添加显示相关属性的过程。在这一节中,我们主要介绍了选择器的几种复合结构应该如何实现。在这一步骤之后,我们得到了一棵带有 CSS 属性的树,为我们后续打下了基础。最后留一个问题,你认为 CSS 语法解析成什么结构,最适合我们进行 CSS 计算。本文介绍了浏览器如何将CSS规则应用到DOM树上,为DOM结构添加显示相关属性的过程。原创 2024-06-06 11:35:02 · 859 阅读 · 0 评论 -
浏览器:一个浏览器是如何工作的?(阶段二)
好了,总结一下。在今天的文章中,带你继续探索了浏览器的工作原理,我们主要研究了解析代码和构建 DOM 树两个步骤。在解析代码的环节里,我们一起详细地分析了一个词(token)被拆分的过程,并且给出了实现它所需要的一个简单的状态机。在构建 DOM 树的环节中,基本思路是使用栈来构建 DOM 树为了方便你动手实践,我用 JavaScript 实现了这一过程。今天给你留的题目是:在语法和词法的代码,我已经给出了大体的结构,请你试着把内容补充完整吧。。原创 2024-06-06 10:41:08 · 743 阅读 · 0 评论 -
浏览器:一个浏览器是如何工作的?(阶段一)
在这一节内容中,我们一起学习了浏览器的第一步工作,也就是“浏览器首先使用 HTTP 协议或 HTTPS 协议,向服务端请求页面”的这一过程。在这个过程中,掌握 HTTP 协议是重中之重。从一个小实验开始,带你体验了一次完整的 HTTP 请求过程。我们一起先分析了 HTTP 协议的结构。接下来,分别介绍了 HTTP 方法、HTTP 状态码和状态文本、HTTP Head 和 HTTP Request Body 几个重点需要注意的部分。原创 2024-06-06 09:50:35 · 717 阅读 · 0 评论 -
HTML·ARIA:可访问性是只给盲人用的特性么?
今天介绍了 ARIA 相关的知识,我们分几个部分学习了如何使用 ARIA 属性来提高页面的可访问性。我们以 ARIA 角色为中心,讲解了 ARIA 定义的语义体系。我们可以把 ARIA 分为三类。Widget 角色:主要是各种可交互的控件。结构角色:文档的结构。窗体角色:弹出的窗体。今天的课后小问题是,请找一个支持图结构可视化的 JS 库,把所有 ARIA 的继承关系用可视化的方式展现出来。。原创 2024-06-05 16:44:42 · 1015 阅读 · 0 评论 -
CSS小实验:动手做,用代码挖掘CSS属性
今天的这节课我们通过代码对标准做了分析,找出了属性和标准的对应关系。我们的第一步是找到所有的标准列表,第二步是找到每个标准中的属性。最后得到的这个列表比较全面地覆盖了 CSS 属性,并根据标准划分好了分类,我觉得这可以作为你后续学习和精研的重要依据。在本篇内容的前面还有一份浏览器中已经实现的属性列表,理论上属性列表中的属性应该都出现在了我们的标准中。那么,这次课后的小任务,就是找出被我们的代码遗漏的属性,和重复出现在多份标准中的属性,让我们的列表更为完善。。原创 2024-06-05 09:12:00 · 705 阅读 · 0 评论 -
CSS渲染:CSS是如何绘制颜色的?
今天我们介绍了 CSS 中渲染相关的属性:颜色和形状。我们重点介绍了 CSS 的颜色系统,从颜色基本原理讲解了 RGB 颜色、CMYK 颜色和 HSV 颜色,我们还讲解了 Alpha 通道。接下来我们又讲了颜色的一个重要应用:渐变,我们可以把渐变看作是一个更复杂的颜色,它非常实用,能够用渐变绘制很多的图像。最后我们讲解了形状相关的属性,以及 SVG 应用的一个小技巧。原创 2024-06-04 18:00:14 · 992 阅读 · 0 评论 -
HTML语言:DTD到底是什么?
SGML 的 DTD 语法十分复杂,但是对 HTML 来说,其实 DTD 的选项是有限的,浏览器在解析 DTD 时,把它当做几种字符串之一,关于 DTD,在本篇文章的后面会详细讲解。今天的课程中我们讲了 HTML 的语法,HTML 语法源自 SGML,我们首先介绍了基本语法,包含了五种节点:标签(元素)、文本、注释、文档类型定义(DTD)和处理信息(ProcessingInstruction)。之后我们又重点介绍了两部分内容:DTD 和文本实体。原创 2024-06-04 17:30:14 · 926 阅读 · 0 评论 -
CSS动画与交互:为什么动画要用贝塞尔曲线这么奇怪的东西?
我们今天的课程,重点介绍了动画和它背后的一些机制。CSS 用 transition 和 animation 两个属性来实现动画,这两个属性的基本用法很简单,我们今天还介绍了它们背后的原理:贝塞尔曲线。我们中介绍了贝塞尔曲线的实现原理和贝塞尔曲线的拟合技巧。最后,留给你一个小问题,请纯粹用 JavaScript 来实现一个 transition 函数,用它来跟 CSS 的 transition 来做一下对比,看看有哪些区别。。原创 2024-06-04 14:29:19 · 1269 阅读 · 0 评论 -
CSS Flex排版:为什么垂直居中这么难?
今天我们从 Flex 的设计、原理和应用三个方面一起学习了 Flex 排版。我们先从感性的角度,介绍了 Flex 的设计,Flex 的设计是一种不同于流布局的,自外而内的设计思路。接下来我们讲解了 Flex 的实现原理,也就是具体的排版算法。要想理解 Flex 排版的原理,主轴和交叉轴是非常重要的抽象,Flex 排版三个步骤:分行、计算主轴、计算交叉轴。最后我们给出了几个例子,解决了旧时代的 CSS 三大经典问题。原创 2024-06-04 10:26:03 · 1078 阅读 · 0 评论 -
HTML小实验:用代码分析HTML标准
这一节课,我们完成了一个小实验:利用工具分析 Web 标准文本,来获得元素的信息。通过这个实验,我希望能够传递一种思路,代码能够帮助我们从 Web 标准中挖掘出来很多想要的信息,编写代码的过程,也是更深入理解标准的契机。我们前面的课程中把元素分成了几类来讲解,但是这些分类只能大概地覆盖所有的标签,我设置课程的目标也是讲解标签背后的知识,而非每一种标签的细节。具体每一种标签的属性和细节,可以留给大家自己去整理。原创 2024-06-04 09:05:00 · 810 阅读 · 0 评论 -
HTML替换型元素:为什么link一个CSS要用href,而引入js要用src呢?
这节课,我们又认识了一组 HTML 元素:替换型元素。它们的特点是,引入一个外部资源来进入页面,替换掉自身的位置。我们通过对 script、img、picture、audio、video、iframe 几个标签的讲解,了解了不同的资源引入方式:src 属性;srcset 属性;source 标签;srcdoc 属性。这中间,我们也介绍了一些小技巧,比如 src 属性的好朋友:data uri,这在实际开发中非常有用。原创 2024-06-03 17:44:25 · 869 阅读 · 0 评论 -
CSS排版:从毕昇开始,我们就开始用正常流了
这次的文章中,我们一起学习了正常流,我们可以用一句话来描述正常流的排版行为,那就是:依次排列,排不下了换行。这也是理解它最简单最源头的方式。我们将正常流的知识分成了三个部分。正常流的行为部分,我们从一些感性认知出发,帮助你从思路和源头上理解正常流的行为。正常流的原理部分,我用更严格的描述方式,给你讲解了 CSS 标准中规定的正常流排版逻辑。最后的正常流应用部分,我以两个经典布局问题等分布局和自适应宽为例,为你讲解了正常流实际使用的一些技巧。原创 2024-06-03 16:21:51 · 756 阅读 · 0 评论 -
HTML链接:除了a标签,还有哪些标签叫链接?
本节课我们介绍了几种链接类型。在 HTML 中,链接有两种类型。一种是超链接型标签,一种是外部资源链接。我们逐次讲到了 link 标签、a 标签和 area 标签,link 标签一般用于看不见的链接,它可能产生超链接或者外部资源链接,a 和 area 一般用于页面上显示的链接,它们只能产生超链接。最后,留给你一个思考问题,你的工作中,是使用过哪些类型的 link 标签的呢?HTML中的链接不仅限于a标签,还包括其他标签如area和link,它们各自具有不同的功能和特点。原创 2024-06-03 15:43:00 · 780 阅读 · 0 评论 -
CSS选择器:伪元素是怎么回事儿?
这一课,我们讲了 CSS 选择器的三种机制:选择器的组合、选择器优先级、以及伪元素。在选择器组合这一部分,我们讲到了,选择器的连接方式像四则运算一样有优先级。第一优先级是无连接符号;第二优先级是:“空格”“~”“+”“>”“||”;第三优先级是“,”。然后我们又介绍了选择器优先级的计算方式。最后我们介绍了伪元素,我们逐次讲解了:::before::after四种伪元素。伪元素的语法跟伪类相似,但是实际产生的效果是把不存在的元素硬选出来。这一点就与伪类不太一样了。原创 2024-06-03 09:50:34 · 731 阅读 · 0 评论 -
CSS 选择器:如何选中svg里的a元素?
这一节课程中,我们介绍了 CSS 选择器的整体结构,并且介绍了一系列简单选择器。它们包括了下面这些内容。类型选择器:根据一个元素的标签名来选中元素。全体选择器:与类型选择器类似,选择任意元素。id 选择器:# 后面跟随 id 名。class 选择器:. 后面跟随 class 名。伪类选择器:一系列由 CSS 规定好的选择器,它们以冒号开头,伪类有普通型和函数型。在下一节课,我们开始进入到更复杂的情况,我们将会介绍选择器的组合使用方式和选择器的一些机制。原创 2024-05-31 17:58:52 · 713 阅读 · 0 评论 -
HTML元信息类标签:你知道head里一共能写哪几种标签吗?
在 HTML 标准中,还定义了一批 meta 标签的 name,可以视为一种有约定的 meta,我在这里列出来,你可以简单了解一下。application-name:如果页面是 Web application,用这个标签表示应用名称。author: 页面作者。description:页面描述,这个属性可能被用于搜索引擎或者其它场合。generator: 生成页面所使用的工具,主要用于可视化编辑器,如果是手写 HTML 的网页,不需要加这个 meta。原创 2024-05-31 15:05:18 · 762 阅读 · 0 评论 -
CSS语法:除了属性和选择器,你还需要知道这些带@的规则
在这一部分,我们介绍了 CSS 语法的总体结构,CSS 的语法总体结构是由两种规则列表构成,一种是 at 规则,另一种是普通规则。在 at 规则中,我举了 13 个以上的例子,并逐个进行了简单的介绍。而在普通规则的部分,我介绍了选择器和声明区块是普通规则的主要组成部分。并且,我给出了一个(不太严谨)的选择器语法结构,声明区块则由属性和值构成,这一部分我们重点介绍了函数。从整体上去掌握内容,再去定位到单个细节,这对于我们学习 CSS 有非常重要的提示作用。原创 2024-05-30 18:03:57 · 651 阅读 · 0 评论 -
HTML语义:如何运用语义类标签来呈现Wiki网页?
在这一篇 Wiki 文章中,已经涉及了大部分语义标签,可见 HTML 工作组对语义标签的增加是非常谨慎和保守的。当然了,我们选择的案例不可能刚巧覆盖所有的标签,还有些没讲到的标签,我们这里稍微做一下简要的补充说明。实际上,HTML 这种语言,并不像严谨的编程语言一样,有一条非此即彼的线。一些语义的使用其实会带来争议,所以我的建议是:你可以尽量只用自己熟悉的语义标签,并且只在有把握的场景引入语义标签。这样,我们才能保证语义标签不被滥用,造成更多的问题。你最擅长使用哪些语义标签,会把它们用在哪些场景里呢。原创 2024-05-30 17:22:01 · 935 阅读 · 0 评论 -
HTML语义:div和span不是够用了吗?
介绍完自然语言的语义场景后,我想介绍的另一个语义重要使用场景,就是文章的结构。中国古代小说就形成了“章 - 回”的概念,西方的戏剧也有幕的区分,所以人类的自然语言作品也是如出一辙。HTML 也应该支持这样的需求。HTML 语义标签中,有不少是用于支持这样的结构的标签。语义化的 HTML 能够支持自动生成目录结构,HTML 标准中还专门规定了生成目录结构的算法,即使我们并不打算深入实践语义,也应该尽量在大的层面上保证这些元素的语义化使用。原创 2024-05-30 16:25:36 · 618 阅读 · 0 评论 -
JavaScript语法(四):新加入的**运算符,哪里有些不一样呢?
今天我们讲解了表达式的右边部分,讲到了包括更新表达式、一元运算表达式、乘方表达式、乘法表达式、移位表达式等 14 种表达式。至此为止,我们已经讲全了表达式。你如果有不熟悉的地方,可以随时回头查阅。留一个小任务,我们试着总结下 JavaScript 中所有的运算符优先级和结合性。例如:JavaScript语法新增了多种运算符和表达式类型,丰富了表达式组合方式,同时也需要注意它们的优先级和特性。原创 2024-05-30 15:51:37 · 1264 阅读 · 0 评论 -
JavaScript语法(三):什么是表达式语句?
表达式语句实际上就是一个表达式,它是由运算符连接变量或者直接量构成的(关于直接量我们在下一节详细讲解)。一般来说,我们的表达式语句要么是函数调用,要么是赋值,要么是自增、自减,否则表达式计算的结果没有任何意义。但是从语法上,并没有这样的限制,任何合法的表达式都可以当做表达式语句使用。比如我们看下面的例子。a + b;这句代码计算了 a 和 b 相加的值,但是不会显示出来,也不会产生任何执行效果(除非 a 和 b 是 getter),但是不妨碍它符合语法也能够被执行。原创 2024-05-30 15:12:20 · 743 阅读 · 0 评论 -
JavaScript语法(二):你知道哪些JavaScript语句?
今天我们一起学习了语句家族,语句分成了普通语句和声明型语句。普通语句部分,建议你把重点放在循环语句上面。声明型语句我觉得都很重要,尤其是它们的行为。熟练掌握了它们,我们就可以在工作中去综合运用它们,从而减少代码中的错误。新特性大多可以帮助我们发现代码中的错误。最后留一个小作业,请你找出所有具有 Symbol.iterator 的原生对象,并且看看它们的 for of 遍历行为。JavaScript语法(二):深入了解各种JavaScript语句类型。原创 2024-05-30 14:33:39 · 1026 阅读 · 0 评论 -
JavaScript语法(一):在script标签写export为什么会抛错?
今天,我们一起进入了 JavaScript 的语法部分,在开始学习之前,我先介绍了一部分语法的基本规则。我们首先介绍了 JavaScript 语法的全局结构,JavaScript 有两种源文件,一种叫做脚本,一种叫做模块。介绍完脚本和模块的基础概念,我们再来把它们往下分,脚本中可以包含语句。模块中可以包含三种内容:import 声明,export 声明和语句。最后,我介绍了两个 JavaScript 语法的全局机制:预处理和指令序言。原创 2024-05-30 11:27:45 · 888 阅读 · 0 评论