摘要：Shadow tree 背后的思想是封装组件的内部实现细节。 假设，在 <user-card> 组件的 shadow DOM 内触发一个点击事件。但是主文档内部的脚本并不了解 shadow DOM 内部，尤其是当组件来自于第三方库。 所以，为了保持细节简单，浏览器会重新定位（retarget）事件。 阅读全文

摘要：shadow DOM 可以包含 <style> 和 <link rel="stylesheet" href="…"> 标签。在后一种情况下，样式表是 HTTP 缓存的，因此不会为使用同一模板的多个组件重新下载样式表。 一般来说，局部样式只在 shadow 树内起作用，文档样式在 shadow 树外起 阅读全文

摘要：许多类型的组件，例如标签、菜单、照片库等等，需要内容去渲染。 就像浏览器内建的 <select> 需要 <option> 子项，我们的 <custom-tabs> 可能需要实际的标签内容来起作用。并且一个 <custom-menu> 可能需要菜单子项。 使用了 <custom-menu> 的代码如下 阅读全文

摘要：内建的 <template> 元素用来存储 HTML 模板。浏览器将忽略它的内容，仅检查语法的有效性，但是我们可以在 JavaScript 中访问和使用它来创建其他元素。 从理论上讲，我们可以在 HTML 中的任何位置创建不可见元素来储存 HTML 模板。那 <template> 元素有什么优势？ 阅读全文

摘要：Shadow DOM 为封装而生。它可以让一个组件拥有自己的「影子」DOM 树，这个 DOM 树不能在主文档中被任意访问，可能拥有局部样式规则，还有其他特性。 内建 shadow DOM 你是否曾经思考过复杂的浏览器控件是如何被创建和添加样式的？ 比如 <input type="range">： 浏 阅读全文

摘要：我们可以通过描述带有自己的方法、属性和事件等的类来创建自定义 HTML 元素。 在 custom elements （自定义标签）定义完成之后，我们可以将其和 HTML 的内建标签一同使用。 这是一件好事，因为虽然 HTML 有非常多的标签，但仍然是有穷尽的。如果我们需要像 <easy-tabs>、 阅读全文

摘要：这一部分我们将会讲述关于「Web Components」的一系列现代标准。 到目前为止，这些标准仍然在制定中。其中一些特性已经被很好地支持并集成到了现代 HTML/DOM 标准中，但是还有部分特性仍然处在草案阶段。你可以在任何浏览器中尝试一些例子，Google Chrome 可能是对这些新特性支持得 阅读全文

摘要：str.match(regexp) str.match(regexp) 方法在字符串 str 中查找 regexp 的匹配项。 它有 3 种模式： 如果 regexp 不带有修饰符 g，则它以数组的形式返回第一个匹配项，其中包含捕获组和属性 index（匹配项的位置）、input（输入字符串，等于  阅读全文

摘要：y 修饰符让我们能够在源字符串中的指定位置进行搜索。 为了掌握 y 修饰符的使用方式，让我们来看一个实际的例子。 正则表达式的常见任务之一就是“词法分析”：例如我们得到了一个代码文本，我们需要找到它的结构元素。例如，HTML 有标签和特性（attribute），JavaScript 代码有函数、变量 阅读全文

摘要：有些正则表达式看起来很简单，但执行起来耗时却非常长，甚至会导致 JavaScript 引擎“挂起”。 大多数开发者迟早会遇到这样的情况。典型的症状就是 —— 正则表达式有时可以正常工作，但对于某些字符串，它会消耗 100% 的 CPU 算力，出现“挂起”的现象。 在这种情况下，Web 浏览器会建议终 阅读全文

摘要：有时我们只需要为一个模式找到那些在另一个模式之后或之前的匹配项。 有一种特殊的语法，称为“前瞻断言（lookahead）”和“后瞻断言（lookbehind）”。 首先，让我们从字符串中查找价格，例如 1 turkey costs 30€。即：一个数字，后跟€符号。 前瞻断言 语法为：x(?=y)， 阅读全文

摘要：选择是正则表达式中的一个术语，实际上是一个简单的“或”。 在正则表达式中，它用竖线 | 表示。 例如，我们想要找出编程语言：HTML、PHP、Java 或 JavaScript。 对应的正则表达式为：html|php|java(script)?。 用例如下： let regexp = /html|p 阅读全文

摘要：我们不仅可以在结果或替换字符串中使用捕获组 (...) 的内容，还可以在模式本身中使用它们。 按编号反向引用：\N 可以使用 \N 在模式中引用一个组，其中 N 是组号。 为了弄清这有什么用，让我们考虑一个任务。 我们需要找到带引号的字符串：单引号 '...' 或双引号 "..." —— 应匹配这两 阅读全文

摘要：模式的一部分可以用括号括起来 (...)。这被称为“捕获组（capturing group）”。 这有两个影响： 它允许将匹配的一部分作为结果数组中的单独项。 如果我们将量词放在括号后，则它将括号视为一个整体。 示例 让我们看看在示例中的括号是如何工作的。 示例：gogogo 不带括号，模式 go+ 阅读全文

摘要：量词乍一看非常简单，但实际上它们可能很棘手。 如果我们打算寻找比 /\d+/ 更复杂的东西，就需要理解搜索的工作原理。 以接下来的任务为例。 有一个文本，我们需要用书名号：«...» 来代替所有的引号 "..."。在许多国家，书名号是排版的首选。 例如："Hello, world" 应该变成 «He 阅读全文

摘要：假设我们有一个像这样 +7(903)-123-45-67 的字符串，并想要找到其中所有数字。但与之前不同的是，我们对单个数字不感兴趣，只对全数感兴趣：7, 903, 123, 45, 67。 数字是一个或多个数字 \d 的序列。为了标记我们需要的数量，我们需要加一个 量词。 数量 {n} 最简单的量 阅读全文

摘要：在方括号 […] 中的几个字符或者字符类表示“搜索给定字符中的任意一个”。 集合 例如，[eao] 表示以下 3 个字符中的任何一个：'a'、'e' 或 'o' 。 这就是所谓的 集合。在正则表达式中，可以将集合和常规字符一起使用。 // 查找 [t 或 m]，然后匹配 "op" alert( "M 阅读全文

摘要：正如我们所看到的，反斜杠 \ 用于表示字符类，例如 \d。所以它是正则表达式中的一个特殊字符（就像在常规字符串中一样）。 还存在其它特殊字符，这些字符在正则表达式中有特殊的含义，例如 [ ] { } ( ) \ ^ $ . | ? * +。它们用于执行更强大的搜索。 现在并不需要尝试记住它们 —— 阅读全文

摘要：词边界 \b 是一种检查，就像 ^ 和 $ 一样。 当正则表达式引擎（实现正则表达式搜索的程序模块）遇到 \b 时，它会检查字符串中的位置是否是词边界。 有三种不同的位置可作为词边界： 在字符串开头，如果第一个字符是单词字符 \w。 在字符串中的两个字符之间，其中一个是单词字符 \w，另一个不是。 阅读全文

摘要：多行模式由修饰符 m 启用。 它只影响 ^ 和 $ 的行为。 在多行模式下，它们不仅仅匹配文本的开始与末尾，还匹配每一行的开始与末尾。 搜索行的开头 ^ 在这个有多行文本的例子中，模式 /^\d/gm 将从每行的开头取一个数字： let str = `1st place: Winnie 2nd pl 阅读全文