diff --git a/files/ja/learn/css/first_steps/how_css_is_structured/index.md b/files/ja/learn/css/first_steps/how_css_is_structured/index.md index 27f47cd4dad54b..2fcdf70054f01a 100644 --- a/files/ja/learn/css/first_steps/how_css_is_structured/index.md +++ b/files/ja/learn/css/first_steps/how_css_is_structured/index.md @@ -289,11 +289,11 @@ CSS のプロパティと値は大文字と小文字を区別しません。そ 例として、CSS 内で単純な計算を行うことができる `calc()` 関数が挙げられます。 -```html +```html live-sample___the_calc_function
The inner box is 90% - 30px.
``` -```css +```css live-sample___the_calc_function .outer { border: 5px solid black; } @@ -316,11 +316,11 @@ CSS のプロパティと値は大文字と小文字を区別しません。そ 他の例としては、 {{cssxref("transform")}} のさまざまな値、たとえば `rotate()` などがあります。 -```html +```html live-sample___transform_functions
``` -```css +```css live-sample___transform_functions .box { margin: 30px; width: 100px; diff --git a/files/ja/web/api/customelementregistry/define/index.md b/files/ja/web/api/customelementregistry/define/index.md index c3490563b9e2ca..94653f76c4294b 100644 --- a/files/ja/web/api/customelementregistry/define/index.md +++ b/files/ja/web/api/customelementregistry/define/index.md @@ -28,7 +28,7 @@ customElements.define(name, constructor, options); - : 要素の定義の仕方を制御するオブジェクト。現在は、次の 1 つのオプションのみに対応しています。 -- `extends`: 拡張する組み込み要素の名前を示す文字列。*カスタム組み込み要素*を作成するのに使われる。 + - `extends`: 拡張する組み込み要素の名前を示す文字列。*カスタム組み込み要素*を作成するのに使われる。 ### 返値 diff --git a/files/ja/web/html/element/dialog/index.md b/files/ja/web/html/element/dialog/index.md index 39d8a4a15a5a85..5b4ae5503d2890 100644 --- a/files/ja/web/html/element/dialog/index.md +++ b/files/ja/web/html/element/dialog/index.md @@ -9,7 +9,7 @@ l10n: **``** は [HTML](/ja/docs/Web/HTML) の要素で、モーダルまたは非モーダルダイアログボックスや、それ以外の消すことができるアラート、インスペクター、サブウィンドウなどのような対話的コンポーネントを表します。 -HTML の `` 要素は、モーダルダイアログボックスと非モーダルダイアログボックスのどちらを作成する時にも使用します。 モーダルダイアログボックスは、ページの他の部分との操作を中断し、非モーダルダイアログボックスは、ページの他の部分との走査を許可します。 +HTML の `` 要素は、モーダルダイアログボックスと非モーダルダイアログボックスのどちらを作成する時にも使用します。 モーダルダイアログボックスは、ページの他の部分との操作を中断し、非モーダルダイアログボックスは、ページの他の部分との操作を許可します。 `` 要素を表示するには、JavaScript を使用して下さい。モーダルダイアログを表示するには {{domxref("HTMLDialogElement.showModal()", ".showModal()")}} メソッドを、非モーダルダイアログを表示するには {{domxref("HTMLDialogElement.show()", ".show()")}} メソッドを使用して下さい。ダイアログボックスは {{domxref("HTMLDialogElement.close()", ".close()")}} メソッドを使用するか、または `` 要素内に含まれる `
` フォームを送信する際に [`dialog`](/ja/docs/Web/HTML/Element/form#method) メソッドを使用して閉じることができます。モーダルダイアログは、Esc キーを押すことでも閉じることができます。 diff --git a/files/ja/web/javascript/reference/global_objects/iterator/drop/index.md b/files/ja/web/javascript/reference/global_objects/iterator/drop/index.md new file mode 100644 index 00000000000000..734bb5c420d698 --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/iterator/drop/index.md @@ -0,0 +1,138 @@ +--- +title: Iterator.prototype.drop() +slug: Web/JavaScript/Reference/Global_Objects/Iterator/drop +l10n: + sourceCommit: 7df171ff1d6da6a5e3911b7aedd56f6312bf0cca +--- + +{{JSRef}} + +**`drop()`** は {{jsxref("Iterator")}} インスタンスのメソッドで、新しい[イテレーターヘルパーオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator#イテレーターヘルパーオブジェクト)を返します。これは、このイテレーターの開始位置から指定した数の要素を読み飛ばします。 + +## 構文 + +```js-nolint +drop(limit) +``` + +### 引数 + +- `limit` + - : 反復処理の先頭から削除する要素の数です。 + +### 返値 + +新しい[イテレーターヘルパーオブジェクト](/ja/docs/Web/JavaScript/Reference/Global_Objects/Iterator#イテレーターヘルパーオブジェクト)です。 返されたイテレーターヘルパーの `next()` メソッドが最初に呼び出されると、現在のイテレーターは `limit` 要素分だけ即座に進められ、次の要素（`limit+1` 番目の要素）が返されます。その後、イテレーターヘルパーは残りの要素を順に返します。現在のイテレーターが `limit` 未満の数の要素しか保有していない場合、新しいイテレーターヘルパーは、 `next()` が最初に呼び出された時点で即座に処理が完了します。 + +### 例外 + +- {{jsxref("RangeError")}} + - : `limit` を[整数に変換](/ja/docs/Web/JavaScript/Reference/Global_Objects/Number#整数変換)する際に、 {{jsxref("NaN")}} または負の数になった場合に発生します。 + +## 例 + +### drop() の使用 + +次の例では、フィボナッチ数列の項を反復処理するイテレーターを作成します。最初の 2 項を省略し、 3 番目の項から開始します。 + +```js +function* fibonacci() { + let current = 1; + let next = 1; + while (true) { + yield current; + [current, next] = [next, current + next]; + } +} + +const seq = fibonacci().drop(2); +console.log(seq.next().value); // 2 +console.log(seq.next().value); // 3 +``` + +これは次のものと同等です。 + +```js +const seq = fibonacci(); +seq.next(); +seq.next(); +``` + +### drop() を for...of ループで使用 + +`drop()` は、イテレーターを手作業で作成しない場合に最も便利です。イテレーターも反復可能オブジェクトであるため、返されたヘルパーを {{jsxref("Statements/for...of", "for...of")}} ループで反復処理することができます。 + +```js +for (const n of fibonacci().drop(2)) { + console.log(n); + if (n > 30) { + break; + } +} + +// Logs: +// 2 +// 3 +// 5 +// 8 +// 13 +// 21 +// 34 +``` + +### drop() と take() の組み合わせ + +`drop()` と {{jsxref("Iterator.prototype.take()")}} を組み合わせることで、イテレーターの一部を取得することができます。 + +```js +for (const n of fibonacci().drop(2).take(5)) { + // 最初の 2 つの要素を削除し、次の 5 つを抽出する + console.log(n); +} +// Logs: +// 2 +// 3 +// 5 +// 8 +// 13 + +for (const n of fibonacci().take(5).drop(2)) { + // 最初の 5 つの要素を抽出し、次の 2 つを削除する + console.log(n); +} +// Logs: +// 2 +// 3 +// 5 +``` + +### 削除数の下限と上限 + +`limit` が負の数か {{jsxref("NaN")}} であった場合、 {{jsxref("RangeError")}} が発生します。 + +```js +fibonacci().drop(-1); // RangeError: -1 must be positive +fibonacci().drop(undefined); // RangeError: undefined must be positive +``` + +`limit` が反復処理で生成可能な要素の総数よりも大きい場合（{{jsxref("Infinity")}} など）、返された反復処理ヘルパーは、 `next()` が最初に呼び出されたときに、すべての要素を即座に破棄して完了します。現在の反復処理が無限である場合、返された反復処理ヘルパーは、決して完了しません。 + +```js +fibonacci().drop(Infinity).next(); // 終了しない +new Set([1, 2, 3]).values().drop(Infinity).next(); // { value: undefined, done: true } +new Set([1, 2, 3]).values().drop(4).next(); // { value: undefined, done: true } +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- [`Iterator.prototype.drop` のポリフィル (`core-js`)](https://github.com/zloirock/core-js#iterator-helpers) +- {{jsxref("Iterator")}} +- {{jsxref("Iterator.prototype.take()")}} diff --git a/files/ja/web/javascript/reference/global_objects/string/repeat/index.md b/files/ja/web/javascript/reference/global_objects/string/repeat/index.md index baaf83b53fe381..081917ddac6447 100644 --- a/files/ja/web/javascript/reference/global_objects/string/repeat/index.md +++ b/files/ja/web/javascript/reference/global_objects/string/repeat/index.md @@ -40,7 +40,7 @@ repeat(count) "abc".repeat(0); // '' "abc".repeat(1); // 'abc' "abc".repeat(2); // 'abcabc' -"abc".repeat(3.5); // 'abcabcabc' （小数は丸められ、整数の結果が返されます） +"abc".repeat(3.5); // 'abcabcabc' （小数点以下は切り捨てられます） "abc".repeat(1 / 0); // RangeError ({ toString: () => "abc", repeat: String.prototype.repeat }).repeat(2); diff --git a/files/zh-cn/learn/css/building_blocks/organizing/index.md b/files/zh-cn/learn/css/building_blocks/organizing/index.md index 390ce7a2656347..029d45a25fda61 100644 --- a/files/zh-cn/learn/css/building_blocks/organizing/index.md +++ b/files/zh-cn/learn/css/building_blocks/organizing/index.md @@ -57,14 +57,9 @@ slug: Learn/CSS/Building_blocks/Organizing 你可以看到很多 CSS 格式化的方式，一些开发者将所有的规则放在一行里面，像是这样： -```css -.box { - background-color: #567895; -} -h2 { - background-color: black; - color: white; -} +```css-nolint +.box {background-color: #567895; } +h2 {background-color: black; color: white; } ``` 还有的开发者更喜欢将所有的东西放在新的一行： @@ -94,17 +89,17 @@ CSS 不会管你使用哪种方式来进行格式化，我们自己的看法是 在你的样式表里面的逻辑段落之间，加入一块注释，是个好技巧。在你快速掠过的时候，这些注释可以帮你快速定位不同的段落，甚至给了你搜索或者跳转到那段 CSS 的关键词。如果你使用了一个不存在于代码里面的字符串，你可以从段落到段落间跳转，只需要搜索一下，下面我们用的是`||`。 ```css -/* || General styles */ +/* || 通用样式 */ -... +/* … */ -/* || Typography */ +/* || 排版 */ -... +/* … */ -/* || Header and Main Navigation */ +/* || 头部和主要导航 */ -... +/* … */ ``` 你不必在你的 CSS 中给每个东西都加上注释，因为它们很多都是自解释的。你应该加上注释的是那些你因为某些原因做的特殊决定。 @@ -113,7 +108,7 @@ CSS 不会管你使用哪种方式来进行格式化，我们自己的看法是 ```css .box { - background-color: red; /* fallback for older browsers that don't support gradients */ + background-color: red; /* 对不支持渐变的较老浏览器的回落 */ background-image: linear-gradient(to right, #ff0000, #aa0000); } ``` @@ -126,57 +121,76 @@ CSS 不会管你使用哪种方式来进行格式化，我们自己的看法是 - `body` - `p` -- `h1`, `h2`, `h3`, `h4`, `h5` -- `ul`和`ol` -- `table`属性 +- `h1`、`h2`、`h3`、`h4`、`h5` +- `ul` 和 `ol` +- `table` 属性 - 链接 在这段样式表里面，我们提供了用于站点类型的默认样式，为数据表格、列表等设立了一份默认的样式。 ```css -/* || GENERAL STYLES */ +/* || 通用样式 */ -body { ... } +body { + /* … */ +} -h1, h2, h3, h4 { ... } +h1, +h2, +h3, +h4 { + /* … */ +} -ul { ... } +ul { + /* … */ +} -blockquote { ... } +blockquote { + /* … */ +} ``` 在这段之后，我们可以定义一些实用类，例如一个用来移除默认列表样式的类，我们打算将其展示为灵活样式或者其他样式。如果你知道你想要在许多不同的元素上应用的东西，那么你可以把它们加到这里。 ```css -/* || UTILITIES */ +/* || 实用类 */ -.nobullets { +.no-bullets { list-style: none; margin: 0; padding: 0; } -... +/* … */ ``` 然后我们可以加上在整个站点都会用到的所有东西，这可能是像基础页面布局、抬头或者导航栏样式之类的东西。 ```css -/* || SITEWIDE */ +/* || 全站 */ -.main-nav { ... } +.main-nav { + /* … */ +} -.logo { ... } +.logo { + /* … */ +} ``` 最后我们可以在 CSS 里面加上特指的东西，将它们分成上下文、页面甚至它们使用的组件。 ```css -/* || STORE PAGES */ +/* || 商店页面 */ -.product-listing { ... } +.product-listing { + /* … */ +} -.product-box { ... } +.product-box { + /* … */ +} ``` 通过使用这种方式排布代码，我们至少能大致了解，我们能在样式表的哪个部分寻找想要更改的东西。 @@ -250,7 +264,7 @@ CSS 本身没有什么内置的组织方式，所以你需要自己完成建立 } ``` -在 OOCSS 中，你可以建立一个叫作`media`的排布，里面包含所有的两种排布所共有的 CSS——一个大致用于媒体对象的形状之类的基础类。然后我们再额外加入一个类，处理那些微小的区别，这样特定地扩展基础样式。 +在 OOCSS 中，你可以建立一个叫作 `media` 的模式，里面包含所有的两种模式所共有的 CSS——一个大致用于媒体对象的形状之类的基础类。然后我们再额外加入一个类，处理那些微小的区别，这样特定地扩展基础样式。 ```css .media { @@ -271,21 +285,21 @@ CSS 本身没有什么内置的组织方式，所以你需要自己完成建立 } ``` -在你的 HTML 里面，评论需要同时应用`media`和`comment`类： +在你的 HTML 里面，评论需要同时应用 `media` 和 `comment` 类： ```html
- +
``` -列表项应用了`media`和`list-item`： +列表项应用了 `media` 和 `list-item`： ```html
  • - +
@@ -295,12 +309,17 @@ Nicole Sullivan 在描述这种方式和推广上所做的工作导致，即使 #### BEM -BEM 即为块级元素修饰字符（Block Element Modifier）。在 BEM 中，一个块，例如一个按钮、菜单或者标志，就是独立的实体。一个元素就像一个列表项或者标题一样，被绑定到它所在的块。修饰字符是标记到一个块或者元素的标识，能够改变样式或者行为。你能认出使用 BEM 的代码，因为代码中在 CSS 的类里使用了多余的一个下划线和连字符。例如看看这个来自关于[BEM 命名常规](http://getbem.com/naming/)的页面里面的 HTML 所应用的类： +BEM 即为块级元素修饰字符（Block Element Modifier）。在 BEM 中，一个块，例如一个按钮、菜单或者标志，就是独立的实体。一个元素就像一个列表项或者标题一样，被绑定到它所在的块。修饰字符是标记到一个块或者元素的标识，能够改变样式或者行为。你能认出使用 BEM 的代码，因为代码中在 CSS 的类里使用了多余的一个下划线和连字符。例如看看这个来自关于 [BEM 命名常规](http://getbem.com/naming/)的页面里面的 HTML 所应用的类： ```html - - + + + +
``` @@ -308,11 +327,11 @@ BEM 即为块级元素修饰字符（Block Element Modifier）。在 BEM 中， BEM 在大些的 Web 项目中被广泛使用，许多人用这种方式写他们的 CSS。你可能会在没有提及为何 CSS 如此布局的时候，遇到 BEM 语法的例子，甚至是在教程中 -阅读[BEM 101](https://css-tricks.com/bem-101/) 中关于 CSS Tricks 的段落以了解更多和这个系统相关的信息。 +阅读 [BEM 101](https://css-tricks.com/bem-101/) 中关于 CSS Tricks 的段落以了解更多和这个系统相关的信息。 #### 其他常见体系 -应用中，有很多这样的体系。其他流行的方式包括 Jonathan Snook 创造的[Scalable and Modular Architecture for CSS (SMACSS)](http://smacss.com/)、Harry Roberts 的[ITCSS](https://itcss.io/)以及原本由 Yahoo! 创造的[Atomic CSS (ACSS)](https://acss.io/)。如果你遇到了使用这几种方式之一的项目，那么好处就是你可以搜索到许多文章和指导，帮你理解如何以同种方式写代码。 +应用中，有很多这样的体系。其他流行的方式包括 Jonathan Snook 创造的 [CSS 的可扩展模块化架构（SMACSS）](https://smacss.com/)、Harry Roberts 的 [ITCSS](https://itcss.io/) 以及原本由 Yahoo! 创造的[原子 CSS（ACSS）](https://acss.io/)。如果你遇到了使用这几种方式之一的项目，那么好处就是你可以搜索到许多文章和指导，帮你理解如何以同种方式写代码。 使用这样的体系的缺点是，它们会看起来过于复杂，尤其是对于小项目。 @@ -322,13 +341,13 @@ BEM 在大些的 Web 项目中被广泛使用，许多人用这种方式写他 使用这些工具的任何一部分都需要你的开发环境能运行进行处理工作的脚本。许多代码编辑器能为你做这项工作，或者你也可以安装一个命令行工具来辅助工作。 -最为流行的预处理工具是[Sass](https://sass-lang.com/)，这里不是 Sass 的教程，所以我只会简要地解释一些 Sass 能做的事情，在组织的时候真的会帮到你，即使你没有用到 Sass 的任何其他的独特功能。 +最为流行的预处理工具是 [Sass](https://sass-lang.com/)，这里不是 Sass 的教程，所以我只会简要地解释一些 Sass 能做的事情，在组织的时候真的会帮到你，即使你没有用到 Sass 的任何其他的独特功能。 #### 定义变量 CSS 现在有原生的[自定义属性](/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)，所以这个功能越来越没那么重要了，但是你使用 Sass 的可能原因之一为，能够作为设置定义用于一个项目的所有颜色和字体，之后这些变量在项目中可用。这意味着如果你意识到你用了错误的蓝色阴影，你只需要在一个地方修改。 -如果我们创建了在下面的第一行里面叫做`$base-color`的变量，我们之后可以在样式表的任何需要这一颜色的地方使用它。 +如果我们创建了在下面的第一行里面叫做 `$base-color` 的变量，我们之后可以在样式表的任何需要这一颜色的地方使用它。 ```css $base-color: #c6538c; @@ -357,7 +376,7 @@ $base-color: #c6538c; #### 后处理以进行优化 -如果你对加入例如许多额外的注释和空格，增大你的样式表大小有所关心的话，那么后处理会通过在生产版本中略去任何不必要的东西的方式，优化 CSS。后处理解决方案中，通过这种方式实现的一个例子是[cssnano](https://cssnano.co/)。 +如果你对加入例如许多额外的注释和空格，增大你的样式表大小有所关心的话，那么后处理会通过在生产版本中略去任何不必要的东西的方式，优化 CSS。后处理解决方案中，通过这种方式实现的一个例子是 [cssnano](https://cssnano.github.io/cssnano/)。 ## 结语 @@ -365,6 +384,6 @@ $base-color: #c6538c; 欲了解更多关于 CSS 布局的事情，查看[学习 CSS 布局](/zh-CN/docs/Learn/CSS/CSS_layout)这节课。 -你应该也有了探索[MDN CSS](/zh-CN/docs/Web/CSS)学习材料的剩余部分的技能。你可以查阅属性和值，探索我们的[CSS Cookbook](/zh-CN/docs/Web/CSS/Layout_cookbook)来了解可用的排布，在诸如[Guide to CSS Grid Layout](/zh-CN/docs/Web/CSS/CSS_grid_layout)的一些更加专门的指导里阅读更多。. +你应该也有了探索 [MDN CSS](/zh-CN/docs/Web/CSS) 学习材料的剩余部分的技能。你可以查阅属性和值，探索我们的 [CSS 指导手册](/zh-CN/docs/Web/CSS/Layout_cookbook)来了解可用的布局模式，或继续阅读如 [CSS 网格布局指南](/zh-CN/docs/Web/CSS/CSS_grid_layout)等更加专门的指南。 {{PreviousMenuNext("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks/Fundamental_CSS_comprehension", "Learn/CSS/Building_blocks")}} diff --git a/files/zh-cn/web/api/abortsignal/index.md b/files/zh-cn/web/api/abortsignal/index.md index d1eed4b8de7f39..1087a7b8384f83 100644 --- a/files/zh-cn/web/api/abortsignal/index.md +++ b/files/zh-cn/web/api/abortsignal/index.md @@ -1,88 +1,118 @@ --- title: AbortSignal slug: Web/API/AbortSignal +l10n: + sourceCommit: dcbb1d99185118360cc84b3a0e935e77fe0a03e3 --- -{{APIRef("DOM")}} +{{APIRef("DOM")}}{{AvailableInWorkers}} -**`AbortSignal`** 接口表示一个信号对象（signal object），它允许你通过 {{domxref("AbortController")}} 对象与 DOM 请求（如 Fetch）进行通信并在需要时将其中止。 +**`AbortSignal`** 接口表示一个信号对象，它允许你通过 {{domxref("AbortController")}} 对象与异步操作（如 Fetch 请求）进行通信并在需要时将其中止。 -## 属性 +{{InheritanceDiagram}} -_AbortSignal 接口还继承了其父接口 {{domxref("EventTarget")}} 的属性。_ +## 实例属性 + +_也继承了其父接口 {{domxref("EventTarget")}} 的属性。_ - {{domxref("AbortSignal.aborted")}} {{readonlyInline}} - - : 一个 {{domxref("Boolean")}}，表示与之通信的请求是否被终止（`true`）或未终止（`false`）。 + - : 一个 {{domxref("Boolean")}}，表示与之通信的请求是否被中止（`true`）或未中止（`false`）。 - {{domxref("AbortSignal.reason")}} {{readonlyInline}} - : 一旦信号被中止，提供一个使用 JavaScript 值表示的中止原因。 -## 方法 +## 静态方法 -_**`AbortSignal`** 接口继续它父接口 {{domxref("EventTarget")}} 的方法。_ +_也继承其父接口 {{domxref("EventTarget")}} 的方法。_ -- {{domxref("AbortSignal.throwIfAborted()")}} - - : 如果信号已经被中止，则抛出信号中止的 {{domxref("AbortSignal.reason", "reason")}}；否则没有任何用处。 +- {{domxref("AbortSignal/abort_static", "AbortSignal.abort()")}} + - : 返回一个已经被设置为中止的 `AbortSignal` 实例。 +- {{domxref("AbortSignal/any_static", "AbortSignal.any()")}} + - : 返回一个在任意给定的中止信号时中止时中止的 `AbortSignal` 实例。 +- {{domxref("AbortSignal/timeout_static", "AbortSignal.timeout()")}} + - : 返回一个在指定时间后自动中止的 `AbortSignal` 实例。 -## 静态方法 +## 实例方法 + +_也继承其父接口 {{domxref("EventTarget")}} 的方法。_ -- {{domxref("AbortSignal.abort()")}} - - : 返回一个已经被设置为中止的 **`AbortSignal`** 实例。 -- {{domxref("AbortSignal.timeout()")}} - - : 返回一个在指定时间后自动终止的 **`AbortSignal`** 实例。 +- {{domxref("AbortSignal.throwIfAborted()")}} + - : 如果信号已经被中止，则抛出信号中止的 {{domxref("AbortSignal.reason", "reason")}}；否则什么也不做。 -### 事件 +## 事件 -使用 [`addEventListener()`](/zh-CN/docs/Web/API/EventTarget/addEventListener) 或将事件监听器分配给该接口的 `oneventname` 属性。 +_也继承其父接口 {{domxref("EventTarget")}} 的事件。_ -- [`abort`](/zh-CN/docs/Web/API/AbortSignal/abort_event) - - : 当与 signal 通信 DOM 请求被中止时调用。也可以通过 `onabort` 属性调用。 +使用 {{domxref("EventTarget.addEventListener", "addEventListener()")}} 或将事件监听器分配给该接口的 `oneventname` 属性。 + +- {{domxref("AbortSignal/abort_event", "abort")}} + - : 当与信号通信的异步操作中止时调用。也可以通过 `onabort` 属性调用。 ## 示例 -### 使用显式的信号终止 fetch 操作 +### 使用显式的信号中止 fetch 操作 -以下片段展示了我们如何使用 signal 去中止使用 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 下载视频。 +以下片段展示了我们如何使用信号去中止使用 [Fetch API](/zh-CN/docs/Web/API/Fetch_API) 下载视频。 -我们首先使用 {{domxref("AbortController.AbortController", "AbortController()")}} 创建一个中止控制器，然后使用 {{domxref("AbortController.signal")}} 属性获取与它关联的 {{domxref("AbortSignal")}} 对象的引用。 +我们首先使用 {{domxref("AbortController.AbortController", "AbortController()")}} 创建一个中止控制器，然后使用 {{domxref("AbortController.signal")}} 属性获取与它关联的 `AbortSignal` 对象的引用。 当 [fetch 请求](/zh-CN/docs/Web/API/fetch)开始时，我们将 `AbortSignal` 作为一个选项传递进请求的 option 对象中（见下面的 `{signal}`）。这个将信号和控制器与 fetch 请求相关联，并且允许我们通过调用 {{domxref("AbortController.abort()")}} 中止它。你可以看见当中止按钮（`abortBtn`）被点击时，第二个事件监听器触发，使 fetch 操作被中止。 -```js -const controller = new AbortController(); -const signal = controller.signal; +当 `abort()` 被调用时，`fetch()` promise 将以名为 `AbortError` 的 `DOMException` 拒绝。 +```js +let controller; const url = "video.mp4"; + const downloadBtn = document.querySelector(".download"); const abortBtn = document.querySelector(".abort"); downloadBtn.addEventListener("click", fetchVideo); abortBtn.addEventListener("click", () => { - controller.abort(); - console.log("Download aborted"); + if (controller) { + controller.abort(); + console.log("下载已中止"); + } }); -function fetchVideo() { - fetch(url, { signal }) - .then((response) => { - console.log("Download complete", response); - }) - .catch((err) => { - console.error(`Download error: ${err.message}`); - }); +async function fetchVideo() { + controller = new AbortController(); + const signal = controller.signal; + + try { + const response = await fetch(url, { signal }); + console.log("下载完毕", response); + // 进一步处理请求 + } catch (err) { + console.error(`下载出现错误：${err.message}`); + } } ``` -> [!NOTE] -> 当调用 `abort()` 时，`fetch()` promise 会以“`AbortError`”`DOMException` 拒绝。 +如果在 `fetch()` 调用兑现后但在读取响应体之前中止了请求，那么尝试读取响应体时将出现 `AbortError` 异常。 + +```js +async function get() { + const controller = new AbortController(); + const request = new Request("https://example.org/get", { + signal: controller.signal, + }); + + const response = await fetch(request); + controller.abort(); + // 下一行代码将抛出 `AbortError` + const text = await response.text(); + console.log(text); +} +``` 你可以[在 GitHub 上找到一个完整、可运行的示例](https://github.com/mdn/dom-examples/tree/main/abort-api)；你也可以参见[在线演示](https://mdn.github.io/dom-examples/abort-api/)。 ### 中止超时的读取操作 -如果你需要中止一个超时的操作，你可以使用 {{domxref("AbortSignal.timeout()")}} 静态方法。该方法返回一个 `AbortSignal` 并在指定的毫秒时间后后自动超时。 +如果你需要中止一个超时的操作，你可以使用 {{domxref("AbortSignal/timeout_static", "AbortSignal.timeout()")}} 静态方法。该方法返回一个在指定的毫秒时间后后自动超时的 `AbortSignal`。 -以下代码片段展示了如何成功地下载一个文件或者在五秒钟后处理一个超时的错误。注意，当出现超时时，`fetch()` promise 会以“`TimeoutError`”`DOMException` 拒绝。这允许代码区分超时（可能需要通知用户）和用户中止。 +以下代码片段展示了如何成功地下载一个文件或者在五秒钟后处理一个超时的错误。注意，当出现超时时，`fetch()` promise 会以 `TimeoutError` `DOMException` 拒绝。这允许代码区分超时（可能需要通知用户）和用户手动中止操作。 ```js const url = "video.mp4"; @@ -93,48 +123,92 @@ try { // … } catch (err) { if (err.name === "TimeoutError") { - console.error("Timeout: It took more than 5 seconds to get the result!"); + console.error("超时：获取结果的事件超过了 5 秒！"); } else if (err.name === "AbortError") { - console.error( - "Fetch aborted by user action (browser stop button, closing tab, etc.", - ); - } else if (err.name === "TypeError") { - console.error("AbortSignal.timeout() method is not supported"); + console.error("Fetch 操作被用户中止（如浏览器停止按钮、关闭标签等）"); } else { - // A network error, or some other problem. - console.error(`Error: type: ${err.name}, message: ${err.message}`); + // 网络错误，或其他问题 + console.error(`错误：类型：${err.name}，消息：${err.message}`); } } ``` ### 超时或显式中止 fetch -`fetch()` 不是为了组合多个信号而设计的，所以你不能因为调用了 {{domxref("AbortController.abort()")}} 或者 `AbortSignal` 超时而"直接"中止下载（尽管在上面的例子中，超时信号中止由停止按钮等内置浏览器机制触发）。 - -为了触发多个 signal，它们必须是菊花链式连接。以下代码片段展示了在处理程序中如何为独立的计时器调用 {{domxref("AbortController.abort()")}}。 +如果要从多个信号中中止，可以使用 {{domxref("AbortSignal/any_static", "AbortSignal.any()")}} 将它们合并为一个信号。下面的示例使用 {{domxref("Window/fetch", "fetch")}} 进行了演示： ```js try { const controller = new AbortController(); - const timeoutId = setTimeout(() => controller.abort(), 5000); - const res = await fetch(url, { signal: controller.signal }); + const timeoutSignal = AbortSignal.timeout(5000); + const res = await fetch(url, { + // 任意一个信号中止时，整个操作会被中止 + signal: AbortSignal.any([controller.signal, timeoutSignal]), + }); const body = await res.json(); } catch (e) { if (e.name === "AbortError") { - // Notify the user of abort. - // Note this will never be a timeout error! + // 通知用户操作中止 + } else if (e.name === "TimeoutError") { + // 通知用户超时 } else { - // A network error, or some other problem. - console.log(`Type: ${e.name}, Message: ${e.message}`); + // 网络错误，或其他问题 + console.log(`类型：${e.name}，消息：${e.message}`); } -} finally { - clearTimeout(timeoutId); } ``` > [!NOTE] > 与使用 {{domxref("AbortSignal.timeout()")}} 不同，没有方法来判断最终中止是否由超时引起。 +### 实现可中止的 API + +需要支持中止的 API 可以接受一个 `AbortSignal` 对象，并在需要时使用其状态来触发中止信号处理。 + +基于 {{jsxref("Promise")}} 的 API 应对中止信号做出响应，拒绝任何未确定的承诺，并使用 `AbortSignal` 中止 {{domxref("AbortSignal.reason", "reason")}}。例如，请看下面的 `myCoolPromiseAPI`，它接收一个信号并返回一个 promise。如果信号已被中止，或检测到中止事件，则会立即拒绝该 promise。否则，它将正常完成，然后兑现 promise。 + +```js +function myCoolPromiseAPI(/* …, */ { signal }) { + return new Promise((resolve, reject) => { + // 如果信号已经被中止，立即抛出错误，以拒绝 promise + if (signal.aborted) { + reject(signal.reason); + } + + // 执行 API 主要的目标 + // 当完成时调用 resolve(result) + + // 监听 'abort' 信号 + signal.addEventListener("abort", () => { + // 停止主要任务 + // 以中止理由拒绝 promise + reject(signal.reason); + }); + }); +} +``` + +API 可能的用法如下。请注意在中止操作时调用了 {{domxref("AbortController.abort()")}}。 + +```js +const controller = new AbortController(); +const signal = controller.signal; + +startSpinner(); + +myCoolPromiseAPI({ /* …, */ signal }) + .then((result) => {}) + .catch((err) => { + if (err.name === "AbortError") return; + showUserErrorMessage(); + }) + .then(() => stopSpinner()); + +controller.abort(); +``` + +不返回 promise 的 API 接口可能会以类似的方式做出反应。在某些情况下，接收信号可能是有意义的。 + ## 规范 {{Specifications}} @@ -146,4 +220,4 @@ try { ## 参见 - [Fetch API](/zh-CN/docs/Web/API/Fetch_API) -- [可取消的 Fetch](https://developer.chrome.google.cn/blog/abortable-fetch/)，来自 Jake Archibald +- [可中止的 Fetch](https://developer.chrome.google.cn/blog/abortable-fetch/)，来自 Jake Archibald diff --git a/files/zh-cn/web/api/element/animationiteration_event/index.md b/files/zh-cn/web/api/element/animationiteration_event/index.md index c507e690484353..9f895ba19da55c 100644 --- a/files/zh-cn/web/api/element/animationiteration_event/index.md +++ b/files/zh-cn/web/api/element/animationiteration_event/index.md @@ -1,11 +1,11 @@ --- -title: GlobalEventHandlers.onanimationiteration +title: Element：animationiteration 事件 slug: Web/API/Element/animationiteration_event --- -{{APIRef("CSS3 Animations")}} +{{APIRef}} -[`animationiteration`](/zh-CN/docs/Web/API/Element/animationiteration_event)事件的处理器 . 当 [CSS Animation](/zh-CN/docs/Web/CSS/CSS_animations) 运动到最后一帧时触发。An iteration ends when a single pass through the sequence of animation instructions is completed by executing the last animation step. +**`animationiteration`** 事件会在一次 [CSS 动画](/zh-CN/docs/Web/CSS/CSS_animations)迭代的结束和另一次迭代的开始时触发。此事件不会与 {{domxref("Element/animationend_event", "animationend")}} 事件同时发生，因此其不会发生在 `animation-iteration-count` 为 1 的动画上。 ## 语法 diff --git a/files/zh-cn/web/html/attributes/minlength/index.md b/files/zh-cn/web/html/attributes/minlength/index.md new file mode 100644 index 00000000000000..2f72e23a8ebe27 --- /dev/null +++ b/files/zh-cn/web/html/attributes/minlength/index.md @@ -0,0 +1,60 @@ +--- +title: HTML 属性：minlength +slug: Web/HTML/Attributes/minlength +l10n: + sourceCommit: 067a40e4ed27ea6e1f3b8bbfec15cd9dc3078f4c +--- + +{{HTMLSidebar}} + +**`minlength`** 属性定义了用户可以在 {{htmlelement('input')}} 或 {{htmlelement('textarea')}} 中输入的[字符串长度](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/length)的最小值。该属性的值必须是非负整数。 + +字符串长度是以 UTF-16 码元为单位进行计算的，通常（[对大多数文本而言](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/length#长度不等于字符数的字符串)）等同于字符个数。如果未指定 `minlength`，或指定了无效值，则输入将没有最小长度限制。该值必须小于或等于 [maxlength](/zh-CN/docs/Web/HTML/Attributes/maxlength) 的值，否则该值将永远无效，因为不可能同时满足这两个条件。 + +如果字段文本值的长度小于 `minlength` 的 UTF-16 码元长度，输入将无法通过约束验证，{{domxref('validityState.tooShort')}} 将返回 `true`。只有当用户更改值时，才会应用限制验证。一旦提交失败，某些浏览器会显示错误信息，说明所需的最小长度和当前长度。 + +`minlength` 不意味着输入为 [`required`](/zh-CN/docs/Web/HTML/Attributes/required)；只有当用户输入了一个值时，输入才会违反 `minlength` 约束。如果输入不是 `required` 的，即使设置了 `minlength`，也可以提交空字符串。 + +{{EmbedInteractiveExample("pages/tabbed/attribute-minlength.html", "tabbed-shorter")}} + +## 示例 + +通过指定 `minlength="5"`，值要么为空，要么至少为 5 个字符时才为有效。 + +```html + + +``` + +我们可以使用伪类，根据值是否有效来设计元素样式。只要值为空或其长度大于等于 5，该值就是有效的。如 _Lime_ 是无效的，而 _lemon_ 是有效的。 + +```css +input { + border: 2px solid currentcolor; +} +input:invalid { + border: 2px dashed red; +} +input:invalid:focus { + background-image: linear-gradient(pink, lightgreen); +} +``` + +{{EmbedLiveSample('示例', '100%', 200)}} + +## 规范 + +{{Specifications}} + +## 浏览器兼容性 + +{{Compat}} + +## 参见 + +- [`maxlength`](/zh-CN/docs/Web/HTML/Attributes/maxlength) +- [`size`](/zh-CN/docs/Web/HTML/Attributes/size) +- [`pattern`](/zh-CN/docs/Web/HTML/Attributes/pattern) +- [约束验证](/zh-CN/docs/Web/HTML/Constraint_validation) +- [表单验证](/zh-CN/docs/Learn/Forms/Form_validation) +- {{htmlelement('input')}} diff --git a/files/zh-cn/web/http/proxy_servers_and_tunneling/index.md b/files/zh-cn/web/http/proxy_servers_and_tunneling/index.md index 555aa3a0fd0814..eb6f33d0781d7d 100644 --- a/files/zh-cn/web/http/proxy_servers_and_tunneling/index.md +++ b/files/zh-cn/web/http/proxy_servers_and_tunneling/index.md @@ -1,81 +1,77 @@ --- -title: Proxy servers and tunneling +title: 代理服务器与隧道 slug: Web/HTTP/Proxy_servers_and_tunneling +l10n: + sourceCommit: 83f30ecaaeb6227dc0d4551f71eb8be1cacb8e94 --- {{HTTPSidebar}} -当访问不同的网站时，代理服务器和 HTTP 管道帮助访问万维网 . 一个代理可以是用户的本地计算机，或者介于用户计算机和终端服务器之间的地方。本章节概述一些关于代理和相关配置选项的基础知识。 +当访问不同的网站时，代理服务器和 HTTP 隧道为访问万维网上的内容提供了便利。代理可以在用户的本地计算机上，也可以在用户计算机和互联网上的目标服务器之间的任何地方。本页概述了有关代理的一些基本知识，并介绍了一些配置选项。 -有两种代理：**正向代理** (如：管道、网关) 和**反向代理** (用于控制和保证服务器的负载均衡、认证、加密和缓存)。 +有两种代理：**正向代理**（隧道、网关）和**反向代理**（用于控制和保护对服务器的访问，以实现负载均衡、身份验证、解密或缓存）。 ## 正向代理 -正向代理，也可以叫“网关”或者仅仅为一个或多个客户端提供代理服务的“代理”。在互联网上像这样的代理不计其数。他们存储并转发网络服务（如 DNS，网页）以减少和控制大家所使用的带宽。 +正向代理或网关，或简称“代理”，可为一个或一组客户端提供代理服务。在互联网上像这样的代理不计其数。它们存储并转发网络服务（如 DNS，网页）以减少和控制大家所使用的带宽。 -正向代理可以是匿名代理，并允许用户在浏览 web 或者使用其他服务时隐藏自己的 IP。 [TOR](https://www.torproject.org/) (洋葱路由), 匿名地在多个代理间路由因特网。 +正向代理可以是匿名代理，并允许用户在浏览 web 或者使用其他服务时隐藏自己的 IP。例如，[TOR（洋葱路由）](https://www.torproject.org/)匿名地在多个代理间路由互联网流量。 ## 反向代理 -顾名思义，反向代理所做的事情与正向代理相反：正向代理代表客户端（或者发送请求的主机），而反向代理代表服务器。正向代理可以隐藏客户端的身份，而反向代理可以隐藏服务器的身份。反向代理的用处很多，例如： +顾名思义，反向代理所做的事情与正向代理相反：正向代理代表客户端（或者发送请求的主机）。正向代理可以隐藏客户端的身份，而反向代理可以隐藏服务器的身份。反向代理有多种用途，其中包括： -- 负载均衡：在多个服务器之间分发负载， -- 缓存静态内容：缓存图片等静态内容，为服务器分担压力， +- 负载均衡：在多个服务器之间分发负载； +- 缓存静态内容：缓存图片等静态内容，为服务器分担压力； - 压缩：压缩和优化内容以加快传输的速度。 ## 通过代理转发客户端消息 -代理可以将请求地址设置为自身的 IP，这可以隐匿客户端的身份。然而，这也会导致原始请求的部分信息丢失。发起请求的客户端的 IP 地址可以用来调试、统计或者生成基于位置的内容。通常使用如下 HTTP 头来暴露这部分信息： +代理可以将请求地址设置为自身的 IP，这可以隐匿客户端的身份。然而，这也会导致原始请求的部分信息丢失。发起请求的客户端的 IP 地址可以用来调试、统计或者生成基于位置的内容。通常使用如下 HTTP 标头来暴露这部分信息： -标准头部： +标准标头： - {{HTTPHeader("Forwarded")}} - - : Contains information from the client-facing side of proxy servers that is altered or lost when a proxy is involved in the path of the request. + - : 包含代理服务器面向客户端的信息，这些信息在代理参与请求路径时会被更改或丢失。 -Or the de-facto standard versions: +或使用事实上的标准版本： - {{HTTPHeader("X-Forwarded-For")}} {{non-standard_inline}} - - : Identifies the originating IP addresses of a client connecting to a web server through an HTTP proxy or a load balancer. + - : 标识通过 HTTP 代理或负载均衡器连接到 Web 服务器的客户端的源 IP 地址。 - {{HTTPHeader("X-Forwarded-Host")}} {{non-standard_inline}} - - : Identifies the original host requested that a client used to connect to your proxy or load balancer. + - : 标识客户请求的用来连接代理或负载均衡器的原始主机。 - {{HTTPHeader("X-Forwarded-Proto")}} {{non-standard_inline}} - - : identifies the protocol (HTTP or HTTPS) that a client used to connect to your proxy or load balancer. + - : 标识客户端连接代理或负载均衡器所用的协议（HTTP 或 HTTPS）。 -To provide information about the proxy itself (not about the client connecting to it), the `Via` header can be used. +要提供代理本身的信息（而不是连接到代理的客户端的信息），可以使用 `Via` 标头。 - {{HTTPHeader("Via")}} - - : Added by proxies, both forward and reverse proxies, and can appear in the request headers and the response headers. + - : 由代理（包括正向代理和反向代理）添加，可出现在请求标头和响应标头中。 -## HTTP tunneling +## HTTP 隧道 -Tunneling transmits private network data and protocol information through public network by encapsulating the data. HTTP tunneling is using a protocol of higher level (HTTP) to transport a lower level protocol (TCP). +隧道技术通过封装数据，在公共网络中传输专用网络数据和协议信息。HTTP 隧道传输是使用高级协议（HTTP）传输低级协议（TCP）。 -The HTTP protocol specifies a request method called {{HTTPMethod("CONNECT")}}. It starts two-way communications with the requested resource and can be used to open a tunnel. This is how a client behind an HTTP proxy can access websites using SSL (i.e. HTTPS, port 443). Note, however, that not all proxy servers support the `CONNECT` method or limit it to port 443 only. +HTTP 协议指定了一种名为 {{HTTPMethod("CONNECT")}} 的请求方法。该方法启动与请求资源的双向通信，并可用于打开隧道。这就是 HTTP 代理后的客户端如何使用 SSL（即 HTTPS，端口 443）访问网站的方法。但请注意，并非所有代理服务器都支持 `CONNECT` 方法，或仅限于 443 端口。 -See also the [HTTP tunnel article on Wikipedia](https://en.wikipedia.org/wiki/HTTP_tunnel). +参见维基百科上的 [HTTP 隧道](https://zh.wikipedia.org/wiki/HTTP隧道)。 -## Proxy Auto-Configuration (PAC) +## 代理自动配置（PAC） -A [Proxy Auto-Configuration (PAC)](/zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file) file is a [JavaScript](/zh-CN/docs/Web/JavaScript) function that determines whether web browser requests (HTTP, HTTPS, and FTP) go directly to the destination or are forwarded to a web proxy server. The JavaScript function contained in the PAC file defines the function: +[代理自动配置（PAC）](/zh-CN/docs/Web/HTTP/Proxy_servers_and_tunneling/Proxy_Auto-Configuration_PAC_file) 文件是一个 [JavaScript](/zh-CN/docs/Web/JavaScript) 函数，用于确定 web 浏览器请求（HTTP、HTTPS 和 FTP）是直接连接到目的地还是转发到 web 代理服务器。PAC 文件中包含的 JavaScript 函数定义了该函数： -The auto-config file should be saved to a file with a `.pac` filename extension: +自动配置文件应保存为扩展名为 `.pac` 的文件：`proxy.pac`。 -```plain -proxy.pac -``` - -And the MIME type set to: - -```plain -application/x-ns-proxy-autoconfig -``` +其 MIME 类型需要设置为 `application/x-ns-proxy-autoconfig`。 -The file consists of a function called `FindProxyForURL`. The example below will work in an environment where the internal DNS server is set up so that it can only resolve internal host names, and the goal is to use a proxy only for hosts that aren't resolvable: +该文件包含一个名为 `FindProxyForURL` 的函数。下面的示例将在内部 DNS 服务器设置为只能解析内部主机名的环境中运行，目标是只对无法解析的主机使用代理： ```js function FindProxyForURL(url, host) { - if (isResolvable(host)) return "DIRECT"; - else return "PROXY proxy.mydomain.com:8080"; + if (isResolvable(host)) { + return "DIRECT"; + } + return "PROXY proxy.mydomain.com:8080"; } ```