Skip to content

Commit

Permalink
Merge branch 'main' into web/glossary/bounding_box
Browse files Browse the repository at this point in the history
  • Loading branch information
@IMHOJEONG
IMHOJEONG authored Sep 5, 2023
2 parents 50f0783 + 4631a5f commit d7867e7
Show file tree
Hide file tree
Showing 5 changed files with 176 additions and 146 deletions.
37 changes: 14 additions & 23 deletions files/zh-cn/web/api/htmlinputelement/webkitdirectory/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,21 @@
---
title: HTMLInputElement.webkitdirectory
title: HTMLInputElement：webkitdirectory 属性
slug: Web/API/HTMLInputElement/webkitdirectory
---

{{APIRef("HTML DOM")}}{{non-standard_header}}
{{APIRef("File and Directory Entries API")}}

**`HTMLInputElement.webkitdirectory`**是属于{{HTMLElement("input")}}元素的一个 HTML 属性[`webkitdirectory`](/zh-CN/docs/Web/HTML/Element/input#webkitdirectory)，它指示`<input>`元素应该允许用户选择文件目录，而不是文件。当一个文件目录被选中，该目录及其整个内容层次结构将包含在所选项目集里面。可以使用{{domxref("HTMLInputElement.webkitEntries",
"webkitEntries")}}属性获取选定的文件系统条目。
**`HTMLInputElement.webkitdirectory`** 是一个反应了 HTML 属性 [`webkitdirectory`](/zh-CN/docs/Web/HTML/Element/input/file#webkitdirectory) 的属性，其指示 {{HTMLElement("input")}} 元素应该让用户选择文件目录而非文件。在选择文件目录后，该目录及其整个内容层次结构将包含在所选项目集内。可以使用 {{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} 属性获取选定的文件系统条目。

## 语法
> **备注：** 该属性在规范中被称为 `webkitEntries` 的原因是，其起源于 Google Chrome 特定的 API。它有可能会被重命名。
```js
HTMLInputElement.webkitdirectory = boolValue;
```

### 值
## 值

一个布尔值; 如果设置为`true`，则{{HTMLElement("input")}}元素只允许选择目录；如果设置为`false`，则只允许选择文件。
一个布尔值；如果设置为 `true`，则 {{HTMLElement("input")}} 元素只允许选择目录；如果设置为 `false`，则只允许选择文件。

## 了解结果
## 理解结果

在用户进行选择后，`files`里的每个{{domxref("File")}}对象都会将其拥有的{{domxref("File.webkitRelativePath")}}属性设置为所选目录内文件所在的相对路径。例如，考虑以下文件系统：
在用户进行选择后，`files` 里的每个 {{domxref("File")}} 对象都会将其 {{domxref("File.webkitRelativePath")}} 属性设置为所选目录内文件所在的相对路径。例如，考虑以下文件系统：

- PhotoAlbums

Expand Down Expand Up @@ -49,13 +44,13 @@ HTMLInputElement.webkitdirectory = boolValue;
- PIC5684.jpg
- PIC5712.jpg

如果用户选择了`PhotoAlbums`，则文件列表上将会包含上面列出的每个文件的{{domxref("File")}}对象，而不是文件目录。条目`PIC2343.jpg`的`webkitRelativePath`属性将会得到`PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg`的值。即使{{domxref("FileList")}}是扁平的，这也使得知道层次结构成为可能。
如果用户选择了 `PhotoAlbums`，则文件列表上将会包含上面列出的每个文件（而不包含目录）的 {{domxref("File")}} 对象。条目 `PIC2343.jpg` 的 `webkitRelativePath` 属性值将会是 `PhotoAlbums/Birthdays/Don's 40th birthday/PIC2343.jpg`。即使 {{domxref("FileList")}} 是扁平的，这也使得知道层次结构成为可能。

> **备注：** 在 _Chromium < 72_ 里，`webkitRelativePath` 的行为表现有所不同。有关更多详细信息，请参见[此 bug](https://bugs.chromium.org/p/chromium/issues/detail?id=124187)。
> **备注：** 在 _Chromium < 72_ 的版本中，`webkitRelativePath` 的行为表现有所不同。有关更多详细信息，请参见[此 bug](https://crbug.com/124187)。
## 示例

在这个例子中，提供了一个目录选择器，它使用户可以选择一个或多个目录。当[`change`](/zh-CN/docs/Web/API/HTMLElement/change_event)事件被触发的时候，将生成并显示所选目录层次结构中包含的所有文件的列表。
这个示例提供了一个目录选择器，它允许用户选择一个或多个目录。当触发 {{domxref("HTMLElement/change_event", "change")}} 事件时，将生成并显示所选目录层次结构中包含的所有文件的列表。

### HTML

Expand All @@ -69,13 +64,11 @@ HTMLInputElement.webkitdirectory = boolValue;
```js
document.getElementById("filepicker").addEventListener(
"change",
function (event) {
(event) => {
let output = document.getElementById("listing");
let files = event.target.files;

for (let i = 0; i < files.length; i++) {
for (const file of event.target.files) {
let item = document.createElement("li");
item.innerHTML = files[i].webkitRelativePath;
item.textContent = file.webkitRelativePath;
output.appendChild(item);
}
},
Expand All @@ -91,8 +84,6 @@ document.getElementById("filepicker").addEventListener(

{{Specifications}}

这个 API 没有官方的 W3C 或者 WHATWG 规范。

## 浏览器兼容性

{{Compat}}
Expand Down
24 changes: 4 additions & 20 deletions files/zh-cn/web/html/viewport_meta_tag/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,29 +30,17 @@ slug: Web/HTML/Viewport_meta_tag
"viewport" `<meta>` 标签的基本属性如下所示：

- `width`

- : 控制视口的大小。这可以设置为特定像素数（如'width=600'），也可以设置为特殊值`device-width`，即 [100vw](/zh-CN/docs/Web/CSS/length#视口_viewport_比例的长度)，100% 的视口宽度。最小值为 `1`。最大值为 `10000`。负值会被忽略。

- `height`

- : 控制视口的大小。这可以设置为特定像素数（如 `width=600`），也可以设置为特殊值 `device-height`，即 [100vh](/zh-CN/docs/Web/CSS/length#视口_viewport_比例的长度)，100% 的视口高度。最小值为 `1`。最大值为 `10000`。负值会被忽略。

- `initial-scale`

- : 控制页面首次加载时显示的缩放倍数。最小值是 `0.1`。最大值是 `10`。默认值为 `1`。负值会被忽略。

- `minimum-scale`

- : 控制页面允许缩小的倍数。最小值是 `0.1`。最大值是 `10`。默认值为 `1`。负值会被忽略。

- `maximum-scale`

- : 控制页面允许放大的倍数。设置一个低于 `3` 的值将不具备无障碍访问性。最小值是 `0.1`。最大值是 `10`。默认值为 `1`。负值会被忽略。

- `user-scalable`

- : 控制是否允许页面上的放大和缩小操作。有效值为 `0`、`1`、`yes` 或 `no`。默认值为 `1`，与 `yes` 相同。将值设置为 `0`（即与 `no` 相同）将违反 Web 内容无障碍指南（WCAG）。

- `interactive-widget`
- : 指定交互式 UI 组件（如虚拟键盘）对页面视口的影响。有效值：`resizes-visual`、`resizes-content` 或 `overlays-content`。默认值：`resizes-visual`。

Expand Down Expand Up @@ -85,17 +73,13 @@ slug: Web/HTML/Viewport_meta_tag
允许的值为：

- `resizes-visual`

- : [虚拟视口](/zh-CN/docs/Glossary/Viewport)被交互式组件调整大小。

- : {{Glossary("visual viewport", "可视视口")}}会被交互式组件调整大小。
- `resizes-content`

- : [视口](/zh-CN/docs/Glossary/Viewport)被交互式组件调整大小。

- : {{Glossary("viewport", "视口")}}会被交互式组件调整大小。
- `overlays-content`
- : [虚拟视口](/zh-CN/docs/Glossary/Viewport)和[视口](/zh-CN/docs/Glossary/Viewport)都不会被交互式组件调整大小。
- : {{Glossary("viewport", "视口")}}和{{Glossary("visual viewport", "可视视口")}}都不会被交互式组件调整大小。

当[视口](/zh-CN/docs/Glossary/Viewport)的大小被调整时，初始[布局和包含块](/zh-CN/docs/Web/CSS/Containing_block)的大小也会被调整，从而影响[视口单位](/zh-CN/docs/Web/CSS/length)的计算所得的大小。
当{{Glossary("viewport", "视口")}}的大小被调整时，初始[布局和包含块](/zh-CN/docs/Web/CSS/Containing_block)的大小也会被调整，从而影响[视口单位](/zh-CN/docs/Web/CSS/length)的计算所得的大小。

## 移动和平板电脑设备的常见视口大小

Expand Down
128 changes: 56 additions & 72 deletions files/zh-cn/web/javascript/reference/global_objects/function/call/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,127 +5,109 @@ slug: Web/JavaScript/Reference/Global_Objects/Function/call

{{JSRef}}

**`call()`** 方法使用一个指定的 `this` 值和单独给出的一个或多个参数来调用一个函数。

> **备注：** 该方法的语法和作用与 {{jsxref("Function.apply", "apply()")}} 方法类似，只有一个区别，就是 `call()` 方法接受的是**一个参数列表**，而 `apply()` 方法接受的是**一个包含多个参数的数组**。
{{jsxref("Function")}} 实例的 **`call()`** 方法会以给定的 `this` 值和逐个提供的参数调用该函数。

{{EmbedInteractiveExample("pages/js/function-call.html")}}

## 语法

```plain
function.call(thisArg, arg1, arg2, ...)
```js-nolint
call(thisArg)
call(thisArg, arg1)
call(thisArg, arg1, arg2)
call(thisArg, arg1, arg2, /* …, */ argN)
```

### 参数

- `thisArg`
- : 可选的。在 _`function`_ 函数运行时使用的 `this` 值。请注意，`this`可能不是该方法看到的实际值：如果这个函数处于[非严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下，则指定为 `null` 或 `undefined` 时会自动替换为指向全局对象，原始值会被包装。
- `arg1, arg2, ...`
- : 指定的参数列表。
- : 在调用 `func` 时要使用的 `this` 值。如果函数不在[严格模式](/zh-CN/docs/Web/JavaScript/Reference/Strict_mode)下，[`null`](/zh-CN/docs/Web/JavaScript/Reference/Operators/null) 和 [`undefined`](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined) 将被替换为全局对象，并且原始值将被转换为对象。
- `arg1, …, argN` {{optional_inline}}
- : 函数的参数。

## 返回值

使用调用者提供的 `this` 值和参数调用该函数的返回值。若该方法没有返回值，则返回 `undefined`。
使用指定的 `this` 值和参数调用函数后的结果。

## 描述

`call()` 允许为不同的对象分配和调用属于一个对象的函数/方法。
> **备注：** 这个函数几乎与 {{jsxref("Function/apply", "apply()")}} 相同，只是函数的参数以列表的形式逐个传递给 `call()`，而在 `apply()` 中它们被组合在一个对象中，通常是一个数组——例如，`func.call(this, "eat", "bananas")` 与 `func.apply(this, ["eat", "bananas"])`。
通常，在调用函数时，函数内部的 [`this`](/zh-CN/docs/Web/JavaScript/Reference/Operators/this) 值是访问该函数的对象。使用 `call()`，你可以在调用现有函数时将任意值分配给 `this`，而无需首先将函数附加到对象上作为属性。这样可以将一个对象的方法用作通用的实用函数。

`call()` 提供新的 **this** 值给当前调用的函数/方法。你可以使用 `call` 来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。
> **警告：** 不要使用 `call()` 来链式调用构造函数（例如，实现继承）。这会将构造函数作为普通函数调用，这意味着 [`new.target`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new.target) 的值为 `undefined`，而类会抛出错误，因为它们不能在没有 [`new`](/zh-CN/docs/Web/JavaScript/Reference/Operators/new) 的情况下被调用。请改用 {{jsxref("Reflect.construct()")}} 或 [`extends`](/zh-CN/docs/Web/JavaScript/Reference/Classes/extends)。
## 示例

### 使用 `call` 方法调用父构造函数
### 使用 call() 调用函数并指定 this 值

在一个子构造函数中，你可以通过调用父构造函数的 `call` 方法来实现继承，类似于 `Java` 中的写法。下例中，使用 `Food` 和 `Toy` 构造函数创建的对象实例都会拥有在 `Product` 构造函数中添加的 `name` 属性和 `price` 属性，但 `category` 属性是在各自的构造函数中定义的。
在下面的示例中，当我们调用 `greet` 时，`this` 的值将绑定到对象 `obj`，即使 `greet` 不是 `obj` 的方法。

```js
function Product(name, price) {
this.name = name;
this.price = price;
}

function Food(name, price) {
Product.call(this, name, price);
this.category = "food";
function greet() {
console.log(this.animal, "的睡眠时间一般在", this.sleepDuration, "之间");
}

function Toy(name, price) {
Product.call(this, name, price);
this.category = "toy";
}
const obj = {
animal: "猫",
sleepDuration: "12 到 16 小时",
};

var cheese = new Food("feta", 5);
var fun = new Toy("robot", 40);
greet.call(obj); // 猫 的睡眠时间一般在 12 到 16 小时 之间
```

### 使用 `call` 方法调用匿名函数
### 使用 call() 在不指定第一个参数的情况下调用函数

在下例中的 `for` 循环体内，我们创建了一个匿名函数，然后通过调用该函数的 `call` 方法，将每个数组元素作为指定的 `this` 值执行了那个匿名函数。这个匿名函数的主要目的是给每个数组元素对象添加一个 `print` 方法，这个 `print` 方法可以打印出各元素在数组中的正确索引号。当然，这里不是必须得让数组元素作为 `this` 值传入那个匿名函数（普通参数就可以），目的是为了演示 `call` 的用法。
如果省略第一个 `thisArg` 参数，则默认为 `undefined`。在非严格模式下，`this` 值将被替换为 {{jsxref("globalThis")}}（类似于全局对象）。

```js
var animals = [
{ species: "Lion", name: "King" },
{ species: "Whale", name: "Fail" },
];

for (var i = 0; i < animals.length; i++) {
(function (i) {
this.print = function () {
console.log("#" + i + " " + this.species + ": " + this.name);
};
this.print();
}).call(animals[i], i);
globalThis.globProp = "Wisen";

function display() {
console.log(`globProp 的值是 ${this.globProp}`);
}
```

### 使用 `call` 方法调用函数并且指定上下文的 '`this`'
display.call(); // 输出“globProp 的值是 Wisen”
```

在下面的例子中，当调用 `greet` 方法的时候，该方法的`this`值会绑定到 `obj` 对象。
在严格模式下，`this` 的值不会被替换，因此它保持为 `undefined`。

```js
function greet() {
var reply = [this.animal, "typically sleep between", this.sleepDuration].join(
" ",
);
console.log(reply);
}
"use strict";

var obj = {
animal: "cats",
sleepDuration: "12 and 16 hours",
};
globalThis.globProp = "Wisen";

function display() {
console.log(`globProp 的值时 ${this.globProp}`);
}

greet.call(obj); // cats typically sleep between 12 and 16 hours
display.call(); // 抛出 TypeError: Cannot read the property of 'globProp' of undefined
```

### 使用 **`call`** 方法调用函数并且不指定第一个参数（`argument`）
### 将方法转换为实用函数

`call()` 几乎等同于普通函数调用，只是将 `this` 作为普通参数传入，而不是作为函数所在的对象值。这类似于通用的实用函数的工作方式：你可以使用 `map(array, callback)` 来代替 `array.map(callback)`，这样可以避免对 `Array.prototype` 进行修改，还可以将 `map` 用于不是数组的类数组对象（例如 [`arguments`](/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments)）。

在下面的例子中，我们调用了 `display` 方法，但并没有传递它的第一个参数。如果没有传递第一个参数，`this` 的值将会被绑定为全局对象。
以 {{jsxref("Array.prototype.slice()")}} 为例，你想要将类数组对象转换为真正的数组。你可以创建一个类似这样的快捷方式：

```js
var sData = "Wisen";
const slice = Array.prototype.slice;

function display() {
console.log("sData value is %s ", this.sData);
}
// ...

display.call(); // sData value is Wisen
slice.call(arguments);
```

> **备注：** 在严格模式下，`this` 的值将会是 `undefined`。见下文。
请注意，你不能将 `slice.call` 保存并将其作为普通函数调用，因为 `call()` 方法也会读取它的 `this` 值，而这个值应该是它要调用的函数。在这种情况下，你可以使用 {{jsxref("Function/bind", "bind()")}} 来绑定 `call()` 的 `this` 值。在下面的代码片段中，`slice()` 是一个绑定了 `this` 值为 {{jsxref("Array.prototype.slice()")}} 的 {{jsxref("Function.prototype.call()")}} 的版本。这意味着额外的 `call()` 调用可以被省略：

```js
"use strict";
// 与前面示例中的“slice”相同
const unboundSlice = Array.prototype.slice;
const slice = Function.prototype.call.bind(unboundSlice);

var sData = "Wisen";

function display() {
console.log("sData value is %s ", this.sData);
}
// ...

display.call(); // Cannot read the property of 'sData' of undefined
slice(arguments);
```

## 规范
Expand All @@ -136,8 +118,10 @@ display.call(); // Cannot read the property of 'sData' of undefined

{{Compat}}

## 相关链接
## 参见

- {{jsxref("Function.prototype.bind()")}}
- {{jsxref("Function.prototype.apply()")}}
- [JavaScript 面向对象入门](/zh-CN/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript)
- {{jsxref("Reflect.apply()")}}
- [展开语法](/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
- [JavaScript 对象入门](/zh-CN/docs/Learn/JavaScript/Objects)
Loading

0 comments on commit d7867e7

Please sign in to comment.