摘要:插入符号 ^ 和美元符号 $ 在正则表达式中具有特殊的含义。它们被称为“锚点”。 插入符号 ^ 匹配文本开头,而美元符号 $ 则匹配文本末尾。 举个例子,让我们测试一下文本是否以 Mary 开头: let str1 = "Mary had a little lamb"; alert( /^Mary/
阅读全文
摘要:JavaScript 对字符串使用 Unicode 编码。大多数字符使用 2 个字节编码,但这种方式只能编码最多 65536 个字符。 这个范围不足以对所有可能的字符进行编码,这就是为什么使用 4 个字节对一些罕见的字符进行编码,比如 𝒳(数学符号 X)或 😄(笑脸),一些象形文字等等。 下面是
阅读全文
摘要:考虑一个实际的任务 —— 我们有一个电话号码,例如 "+7(903)-123-45-67",我们需要将其转换为纯数字:79031234567。 为此,我们可以查找并删除所有非数字的内容。字符类可以帮助我们实现它。 字符类(Character classes) 是一种特殊的符号,匹配特定集合中的任何符
阅读全文
摘要:正则表达式是提供了一种在文本中进行搜索和替换的强大的方式的模式。 在 JavaScript 中,我们可以通过 RegExp 对象使用它们,也可以与字符串方法结合使用。 正则表达式 正则表达式(可叫作 “regexp”,或 “reg”)包扩 模式 和可选的 修饰符。 有两种创建正则表达式对象的语法。
阅读全文
摘要:JavaScript 动画可以处理 CSS 无法处理的事情。 例如,沿着具有与 Bezier 曲线不同的时序函数的复杂路径移动,或者实现画布上的动画。 使用 setInterval 从 HTML/CSS 的角度来看,动画是 style 属性的逐渐变化。例如,将 style.left 从 0px 变化
阅读全文
摘要:CSS 动画可以在不借助 Javascript 的情况下做出一些简单的动画效果。 你也可以通过 Javascript 控制 CSS 动画,使用少量的代码,就能让动画表现更加出色。 CSS 过渡(transition)[#css-transition] CSS 过渡的理念非常简单,我们只需要定义某一个
阅读全文
摘要:贝塞尔曲线用于计算机图形绘制形状,CSS 动画和许多其他地方。 它们其实非常简单,值得学习一次并且在矢量图形和高级动画的世界里非常受用。 控制点 贝塞尔曲线由控制点定义。 这些点可能有 2、3、4 或更多。 例如,两点曲线: 三点曲线: 四点曲线: 如果仔细观察这些曲线,你会立即注意到: 控制点不总
阅读全文
摘要:IndexedDB 是一个浏览器内建的数据库,它比 localStorage 强大得多。 通过支持多种类型的键,来存储几乎可以是任何类型的值。 支撑事务的可靠性。 支持键值范围查询、索引。 和 localStorage 相比,它可以存储更大的数据量。 对于传统的 客户端-服务器 应用,这些功能通常是
阅读全文
摘要:Web 存储对象 localStorage 和 sessionStorage 允许我们在浏览器上保存键/值对。 它们有趣的是,在页面刷新后(对于 sessionStorage)甚至浏览器完全重启(对于 localStorage)后,数据仍然保留在浏览器中。我们很快就会看到。 我们已经有了 cooki
阅读全文
摘要:Cookie 是直接存储在浏览器中的一小串数据。它们是 HTTP 协议的一部分,由 RFC 6265 规范定义。 Cookie 通常是由 Web 服务器使用响应 Set-Cookie HTTP-header 设置的。然后浏览器使用 Cookie HTTP-header 将它们自动添加到(几乎)每个对
阅读全文
摘要:Server-Sent Events 规范描述了一个内建的类 EventSource,它能保持与服务器的连接,并允许从中接收事件。 与 WebSocket 类似,其连接是持久的。 但是两者之间有几个重要的区别: 与 WebSocket 相比,EventSource 是与服务器通信的一种不那么强大的方
阅读全文
摘要:在 RFC 6455 规范中描述的 WebSocket 协议,提供了一种在浏览器和服务器之间建立持久连接来交换数据的方法。数据可以作为“数据包”在两个方向上传递,而无需中断连接也无需额外的 HTTP 请求。 对于需要连续数据交换的服务,例如网络游戏,实时交易系统等,WebSocket 尤其有用。 一
阅读全文
摘要:长轮询是与服务器保持持久连接的最简单的方式,它不使用任何特定的协议,例如 WebSocket 或者 Server Sent Event。 它很容易实现,在很多场景下也很好用。 从服务器获取新信息的最简单的方式是定期轮询。也就是说,定期向服务器发出请求:“你好,我在这儿,你有关于我的任何信息吗?”例如
阅读全文
摘要:使用 fetch 方法来上传文件相当容易。 连接断开后如何恢复上传?这里没有对此的内建选项,但是我们有实现它的一些方式。 对于大文件(如果我们可能需要恢复),可恢复的上传应该带有上传进度提示。由于 fetch 不允许跟踪上传进度,我们将会使用 XMLHttpRequest。 不太实用的进度事件 要恢
阅读全文
摘要:XMLHttpRequest 是一个内建的浏览器对象,它允许使用 JavaScript 发送 HTTP 请求。 虽然它的名字里面有 “XML” 一词,但它可以操作任何数据,而不仅仅是 XML 格式。我们可以用它来上传/下载文件,跟踪进度等。 现如今,我们有一个更为现代的方法叫做 fetch,它的出现
阅读全文
摘要:内建的 URL 类提供了用于创建和解析 URL 的便捷接口。 没有任何一个网络方法一定需要使用 URL 对象,字符串就足够了。所以从技术上讲,我们并不是必须使用 URL。但是有些时候 URL 对象真的很有用。 创建 URL 对象 创建一个新 URL 对象的语法: new URL(url, [base
阅读全文
摘要:到目前为止,我们已经对 fetch 相当了解了。 现在让我们来看看 fetch 的剩余 API,来了解它的全部本领吧。 ❗️ 请注意: 请注意:这些选项 (option) 大多都很少使用。即使跳过本章,你也可以很好地使用 fetch。 但是,知道 fetch 可以做什么还是很好的,所以如果需要,你可
阅读全文
摘要:如果我们向另一个网站发送 fetch 请求,则该请求可能会失败。 例如,让我们尝试向 http://example.com 发送 fetch 请求: try { await fetch('http://example.com'); } catch(err) { alert(err); // fetc
阅读全文
摘要:正如我们所知道的,fetch 返回一个 promise。JavaScript 通常并没有“中止” promise 的概念。那么我们怎样才能取消一个正在执行的 fetch 呢?例如,如果用户在我们网站上的操作表明不再需要某个执行中的 fetch。 为此有一个特殊的内建对象:AbortControlle
阅读全文
摘要:fetch 方法允许去跟踪 下载 进度。 请注意:到目前为止,fetch 方法无法跟踪 上传 进度。对于这个目的,请使用 XMLHttpRequest,我们在后面章节会讲到。 要跟踪下载进度,我们可以使用 response.body 属性。它是 ReadableStream —— 一个特殊的对象,它
阅读全文