recursal/MDN huggingface dataset:
Mozilla
=======

下面的文章中包含了下载和构建 Mozilla 程序代码的指引。此外，你也可以找到一些有助理解代码如何运作、如何构建 Mozilla 应用程序的附加组件之类的文章。

FirefoxFirefox（非正式中文名称“火狐”）是 Mozilla 的流行 Web 浏览器，适用于多种平台，包括 Windows、MacOS、Linux 等桌面版，以及所有的 Android 和 iOS 移动设备。得益于对最新的 Web 标准的广泛兼容性和强有力的开发工具，Firefox 是 Web 开发者和终端用户的绝佳选择。

附加组件附加组件允许开发者们去扩展和修改 Firefox 的功能。开发者们能使用标准的 Web 技术「JavaScript，HTML 以及 CSS」再加上一些专用的 JavaScript APIs 来开发附加组件。
游戏开发
====

游戏是最流行的计算机活动之一。新技术不断涌现，使得开发者有可能开发出更好、更强大、可以在任何符合标准的 web 浏览器运行的游戏。

开发网页游戏
------

欢迎来到 MDN 游戏开发中心！在网站的这一模块，我们为想要开发游戏的 web 开发者提供了资源。你可以在左侧主菜单中找到很多有用的教程和技术文档，尽情去探索吧。

我们同样提供了参考部分，因此你可以轻易地找到有关游戏开发所有常用的 API。

**备注：** 在创建一个网页游戏之前你至少需要掌握几种核心的 web 技术，例如 HTML、CSS 和 Javascript。你可以在学习区开始这些基础知识的学习。

将本地游戏移植到 web
------------

如果你是一个本地游戏开发者（例如使用 C++ 开发游戏），并且你对如何将这些游戏移植到 Web 感兴趣，你应该更多地了解 Emscripten 工具——这是一个 LLVM 转 JavaScript 编译器。它能接受 LLVM 字节码（例如用 Clang 编译 C/C++ 或者其他语言生成的字节码）输入并将它们编译成 asm.js (en-US) 以在 Web 上运行。

要入门相关知识，请参阅：

* 关于 Emscripten——简介和高级特性。
* 下载和安装——安装工具链。
* Emscripten 教程——指导你如何开始使用。
示例
--

有关网页游戏示例的列表，请参阅教程页面。此外，请访问 games.mozilla.org 以获得更多有用的资源！

参见
--

Build New Games

这是一个以大量开放式网页游戏开发教程为特色的协作网站。最近还不是很活跃，但还是拥有一些不错的资源。

Creative JS

一个令人印象深刻的 JavaScript 技术和实验的集合，并不全是游戏技术，但还是对开发有帮助。最近并不非常活跃，但仍然拥有一些不错的资源。

Game Programming Patterns

由 Bob Nystrom 撰写的在线书籍，其中讨论了游戏开发环境中的编程模式，旨在帮助游戏开发人员生成更有效、更高效的代码。

Gamedev.js Weekly

关于 HTML 游戏开发的每周新闻，每星期五发布。包含最新的文章、教程、工具和资源。

HTML5 游戏引擎

眼下最流行的 HTML5 游戏框架列表，包含评分、特色和案例。

JSBreakouts

比较不同的框架中的 JavaScript 打砖块游戏，以帮助你作出正确的选择。

Tuts+ 游戏开发

关于游戏开发的教程和案例。

HTML5 Gamedev Starter

面向游戏开发新手的入门工具，包含网上精选的各类有用资源的列表。

js13kGames

针对 HTML 游戏开发者的 JavaScript 编码竞赛，文件大小限制设置为 13 千字节。所有提交的游戏都以可读的形式在 GitHub 上提供。

Mozilla Hacks 博客

Mozilla Hacks 博客包含关于游戏类别的有趣的游戏开发的相关文章。

wiki.mozilla.org 上的游戏部分

一个包含有关 Mozilla 参与平台游戏的信息的维基页面。
MDN Web 文档项目
============

**MDN Web 文档**是免费使用的，且允许我们记录开放 web 平台的资源。我们的使命是为*开发者*提供*信息*，帮助他们*轻松地*在 *web 平台*上构建项目。

这是 MDN Web 文档项目的着陆页。在这里，你可以找到有关网站如何工作、如何编写文档、遵循哪些准则和惯例，以及你如何提供帮助的指南。

同时，我们邀请所有人来提供帮助！MDN Web 文档是一个开源的项目，并接受来自社区的贡献。这里有许多从简单（校对和纠正拼写错误）到复杂（撰写 API 文档）的任务，你可以通过这些任务为我们提供帮助。

如果要了解如何提供帮助，请访问我们的入门页面。如果你想与我们交谈并提出问题，请加入 Matrix 上的 MDN Web 文档聊天室进行讨论。

社区准则

这里的指南可以帮助你开始为 MDN Web 文档作贡献。它还涵盖了诸如如何帮助我们处理任务解决议题、开始一个讨论或建议内容等主题。如果你需要帮助或联系我们，你也可以在此处找到相关信息。

撰写指南

这里的指南提供了有关如何撰写 MDN Web 文档的所有信息。这里有我们收录内容的相关政策。你还可以在这里找到我们的文档写作规范、处理各类内容任务的指南，还有关于我们不同页面结构的相关信息。

MDN 产品咨询委员会

MDN 产品咨询委员会的使命是在 Mozilla、文档团队和帮助 MDN 社区共同维护 MDN Web 文档的主要协作组织之间建立协作关系。
WebAssembly
===========

WebAssembly 是一种新的编码方式，可以在现代的网络浏览器中运行 － 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C / C ++等语言提供一个编译目标，以便它们可以在 Web 上运行。它也被设计为可以与 JavaScript 共存，允许两者一起工作。

简而言之
----

对于网络平台而言，WebAssembly 具有巨大的意义——它提供了一条途径，以使得以各种语言编写的代码都可以以接近原生的速度在 Web 中运行。在这种情况下，以前无法以此方式运行的客户端软件都将可以运行在 Web 中。

WebAssembly 被设计为可以和 JavaScript 一起协同工作——通过使用 WebAssembly 的 JavaScript API，你可以把 WebAssembly 模块加载到一个 JavaScript 应用中并且在两者之间共享功能。这允许你在同一个应用中利用 WebAssembly 的性能和威力以及 JavaScript 的表达力和灵活性，即使你可能并不知道如何编写 WebAssembly 代码。

而且，更棒的是，这是通过 W3C WebAssembly Community Group 开发的一项网络标准，并得到了来自各大主要浏览器厂商的积极参与。

指南
--

WebAssembly 概念

通过阅读 WebAssembly 后面的高层概念开始——也就是说，它为什么如此有用，它是如何适应网络平台的（以及其他）和如何使用它。

从 C/C++ 编译为 WebAssembly

当你使用 C/C++ 编写了代码后，你可以使用诸如 Emscripten 的工具把它编译为.wasm 文件。让我们看看这是如何工作的。

加载运行 WebAssembly 代码

本文介绍如何通过把 Fetch 或者 XHR API 与 WebAssembly JavaScript API 结合在一起来获取、编译和实例化.wasm 文件。

缓存编译后的 WebAssembly 模块

就提升应用启动速度而言，在客户端缓存大的 WebAssembly 模块是有用的。本文解释了如何使用 IndexedDB 来实现这一点。

使用 WebAssembly 的 JavaScript API

当加载了一个.wasm 模块之后，你就想要使用它。在本文中，我们向你展示了如何通过 WebAssembly 的 JavaScript API 来使用 WebAssembly。

导出的 WebAssembly 函数

导出的 WebAssembly 函数是 WebAssembly 函数的 JavaScript 表现形式，并且允许从 JavaScript 中调用 WebAssembly 代码。本文描述它们。

理解 WebAssembly 的文本格式

本文介绍了 wasm 的文本格式。这是在进行调试的时候浏览器开发者工具中展现出来的.wasm 模块的一种低级文本表示。

把 WebAssembly 文本格式转换为 wasm

本文提供了一个如何把编写的文本格式的 WebAssembly 模块转换为 wasm 二进制的指南。

API 参考
------

`WebAssembly`

本对象是所有与 WebAssembly 相关功能的命名空间。

`WebAssembly.Module`

一个`WebAssembly.Module`对象包括了无状态的 WebAssembly 代码。该代码已经被浏览器编译并且能够通过 Workers 高效地共享，缓存到 IndexedDB 中以及多次实例化。

`WebAssembly.Instance`

一个`WebAssembly.Instance`对象是一个有状态的、可执行的模块的实例。实例对象包含所有的能够从 JavaScript 调用到 WebAssembly 代码的导出的 WebAssembly 函数。

`WebAssembly.instantiate()`

`WebAssembly.instantiate()` 函数是编译和实例化 WebAssembly 代码的主要的 API，它返回一个`Module`及其第一个实例。

`WebAssembly.Memory()`

一个`WebAssembly.Memory` 对象是一个可变长的`ArrayBuffer`。它拥有能够被实例存取的原始字节内存。

`WebAssembly.Table()`

`WebAssembly.Table`对象是一个可变长类型数组。它存储诸如函数引用之类的不透明值并且能够被实例存取。

`WebAssembly.CompileError()`

创建一个新的 WebAssembly `CompileError`对象。

`WebAssembly.LinkError()` (en-US)

创建一个新的 WebAssembly `LinkError`对象。

`WebAssembly.RuntimeError()`

创建一个新的 WebAssembly `RuntimeError`对象。

示例
--

* WASMSobel
* 参考我们的 WebAssembly 示例库来获取一些其他的例子。
规范
--

| Specification |
| --- |
| WebAssembly JavaScript Interface  |

浏览器兼容性
------

{{Compat}}参见
--

* WebAssembly on Mozilla Research
* webassembly.org
* WebAssembly articles on Mozilla Hacks blog
* W3C WebAssembly Community Group
* Large-Allocation HTTP header
Web 开发技术
========

开放的 Web 为开发者提供了巨大的机遇，为了充分利用这些技术，你需要知道如何使用它们。在下方你可以找到相关 Web 技术的文档链接。

面向 Web 开发者的文档
-------------

Web 开发者指导

Web 开发者指导提供手把手教学，帮助你实际使用 Web 技术做你想做或需要做的。

面向 Web 开发者的教程

这些教程帮助你一步一步地学习 API、技术或更广泛的主题。

无障碍

让更多人能够使用你的网站，即使他们的某些能力受限。

性能

让网站上的内容尽可能快地发挥可用性和交互性。

安全

保护用户免受数据泄露和偷窃、侧信道攻击、跨站脚本、内容注入和点击劫持之害。

Web 技术参考
--------

Web API 接口

所有 Web API 的参考资料，包括 DOM、所有相关的 API 以及用于构建 Web 应用的相关接口。

HTML

超文本标记语言用来描述和定义网页的内容。

CSS

层叠样式表用来描述 Web 内容的外观。

JavaScript

JavaScript 是一种用于为网站增加交互特性的编程语言。

WebAssembly

WebAssembly 技术允许使用 C、C++、Rust、Swift、C#、Go 等语言编写的程序在 Web 上运行。

事件

事件是 Web 应用的反馈；例如，当一个网页完成加载，或者用户选择什么，按下一个键，调整一个窗口的大小，提交一个表单，或者暂停一个视频。

HTTP

HTTP 是一种基本的互联网协议，用于在网络上获取文档、样式表、脚本、图像、视频、字体和其他资源，并将数据送回到网络服务器。

媒体技术

在 Web 文档和应用程序中嵌入和流式传输视频、音频和图像内容的格式、编解码器、协议、API 和技术。

SVG

可缩放矢量图形（Scalable Vector Graphics）使你能够使用一组矢量与形状来描述图片，在显示时可提供无关大小的零失真的平滑缩放。

MathML

Mathematical 标记语言让显示复杂的数学公式或语法成为可能。

Web Component

Web Components 允许你在自己的应用中创建和复用自定义元素。

WebDriver

WebDriver 是一种浏览器自动化机制，通过模拟真实的人使用浏览器的动作来远程控制浏览器。它被广泛用于网络应用的跨浏览器测试。

Web 扩展

Web 扩展是一种在浏览器中为用户提供增强功能的方式——用于阻止广告和其他内容、定制页面的外观以及更多行为。

Web App 清单

Web 应用清单让你能够让用户将网络应用安装到他们的设备主屏幕上，并预先设置屏幕方向（纵向或横向）和显示模式（如全屏）等方面。

渐进式 Web 应用（PWA）

渐进式 Web 应用是使用新兴 Web 浏览器 API 和功能以及运用传统渐进增强策略的 Web 应用，为跨平台 Web 应用带来类似原生应用的用户体验。

开发者工具文档
-------

Firefox 开发者工具

Firefox 内置的网络开发者工具的文档。

Chrome 开发者工具

Chrome 内置的网络开发者工具的文档。

Safari Web 监视器

Safari 内置的网络开发者工具的文档。

Edge 开发者工具

Edge 内置的网络开发者工具的文档。
学习 Web 开发
=========

欢迎来到 MDN 学习区。本系列文章旨在为零基础 Web 开发初学者提供指导和开始编写网站代码所需的所有内容。

该教程并不是“从入门到精通”类型的教程，只能让你做到“从入门到适应”。在此之后，你应该能够以你自己的方式学习 MDN 的其他内容，并接触到其他中、高级资源。

从零开始学习 Web 开发极具挑战性，该教程将为你提供详细的资料，手把手帮助你轻松愉快地学习。无论你是正在学习 Web 开发的学生（自学或参与课程）、寻找材料的老师、编程爱好者，亦或是仅仅想了解一点点 Web 技术，我们都希望你能感到宾至如归。

#### 想要成为一名前端工程师？

我们汇总了一门课程，其中包含你实现成为前端工程师目标所需要的所有基本信息。

**点击开始**

学习起点
----

零基础的初学者

如果你完全没有 Web 开发经验，那么我们推荐从 Web 入门部分开始，该部分教程通过实践的方式向你介绍 Web 开发。

有一定基础

如果你已经具备了一定的开发知识，下一步就是深入学习 HTML 和 CSS。先学习 HTML 入门，再学习 CSS 初步。

学习脚本编写

如果你已经完成了 HTML 和 CSS 入门课程，或是主要对编写代码感兴趣，可以继续学习 JavaScript 或服务端开发。可通过 JavaScript 初步和服务端编程的第一步开始学习。

框架与工具

在掌握了原生 HTML、CSS、JavaScript 的要领后，就可以继续学习前端开发工具课程，并考虑开始研究 JavaScript 前端框架，以及网站服务端编程了。


**备注：** 可在术语表中查询术语。此外，如果你对 Web 开发有具体问题，可以尝试在常见问题寻找答案。

涵盖的主题
-----

以下列表包含了 MDN 学习区涵盖的所有主题：

Web 入门

为零基础初学者提供实用的 Web 开发入门简介。

HTML 构建网站

HTML 是用于构建网页的内容并定义其含义或目的的语言。该专题将详细讲解 HTML。

CSS 风格化站点

CSS 是用于对网页内容进行设计、布局或添加动画等行为的语言。该专题对 CSS 进行了全面介绍。

JavaScript - 动态客户端脚本语言

JavaScript 是用于向网页添加动态功能的脚本语言。该专题涵盖有关编写和理解 JavaScript 代码所需的所有重点。

Web 表单 - 操作用户数据

Web 表单是用于进行用户交互的强大工具——其常用于收集用户数据和控制用户界面。该专题将对 Web 表单的结构、样式、交互要点进行介绍。

无障碍 - 让每个人都能畅游网络

“无障碍”（Accessibility）是开发人员对让更多的人能够不受残疾、设备、地区等因素的限制访问 Web 内容做出的努力。该专题包含一切所需了解的信息。

Web 性能优化 - 让网站更快做出响应

Web 性能是确保网络应用的快速下载并对用户操作进行快速响应的艺术，而无论用户的带宽大小、屏幕尺寸、网络状态好坏或是设备性能高低。

工具与测试

该专题涵盖了开发人员常用的效率工具，如跨浏览器测试工具、代码检查工具、代码格式化工具、转换工具、版本控制系统、部署工具、客户端 JavaScript 框架等。

服务器端网站编程

即使你专注于客户端的 Web 开发，了解服务器和服务端代码的运行机制仍然很有用。该专题简单介绍了服务端的运作机制，并包含了两份分别有关使用 Django（Python）和 Express（node.js）两个流行框架构建服务器端应用的教程。

获取代码示例
------

学习区的所有代码示例都可以在 GitHub 上的 MDN 学习区示例中文版 上寻得。如果你想把获取所有代码示例的副本，直接 包含最新 master 分支内容的压缩文件 即可。

如果你希望以更灵活的方式复制代码仓库并随时更新本地副本，可参考以下更复杂的步骤：

1. 在电脑上安装 Github 底层使用的版本控制系统 Git。
2. 打开操作系统的命令提示符（Windows）或终端（Linux、macOS）。
3. 在命令提示符 / 终端中输入以下命令，即可将 `roy-tian/learning-area` 仓库拷贝到本地的 `learning-area` 文件夹：

```bash
git clone https://github.com/roy-tian/learning-area
```

4. 然后即可使用访达（macOS）、文件资源管理器（Windows/Linux）或 `cd` 命令) 进入该目录，查找所需文件。

你可以随时对本地 `learning-area` 目录与 GitHub 仓库中的 master 分支进行同步，具体步骤如下：

1. 在命令提示符 / 终端中使用 `cd` 指令进入 `learning-area` 文件夹。例如，当你在父目录时：

```bash
cd learning-area
```

2. 执行以下命令以更新仓库：

```bash
git pull
```

联系我们
----

如果你想就任何事宜联系我们，最好的方式是在论坛上留言。如果你认为网站上有任何错误或遗漏、请求新的学习主题、针对你不理解的部分请求帮助、或提出任何其他问题，我们都期待听到你的意见。

如果你有兴趣帮助我们开发或改进社区内容，请阅读如何做出贡献部分并联系我们！无论你是学生、老师、经验丰富的 Web 开发者、还是其他有兴趣通过帮助我们以提升自学经验的人，我们都不胜荣幸！

参见
--

Mozilla 开发者新闻通讯

我们为 Web 开发者编写的新闻报，对各水平开发者而言都是优秀的资源。

学习 JavaScript

为有进取心的 Web 开发人员准备的优秀资源——在互动环境中学习 JavaScript，其包含由自动评估系统提供指引的简短的课程和互动测试。前 40 节课为免费课程，而想要购买完整的付费课程只需一次性支付少量费用。

揭开 Web 的面纱

面向 Web 开发的零基础教学视频系列，由 Jérémie Patonnier 出品。

Codecademy

用于从零学习编程语言的优秀交互式网站。

BitDegree

用游戏的方式学习基础编程理论。主要针对初学者。

Code.org

基本的编程理论和实践，主要针对儿童与完全的初学者。

EXLskills

免费开放的学习技术技能的课程，由导师指导和基于项目的学习。

freeCodeCamp.org

用于学习 Web 开发的交互式网站，带有教程和项目。

Web 学习路线图

用于学习入门级 Web 开发素养与新时代常用技能，另分门别类地提供教学活动。

Edabit

上千个 JavaScript 交互式编程挑战。
MDN Web 文档术语表：Web 相关术语的定义
=========================

Web 技术文档和代码中含有大量的术语和缩写。本术语表给出了可以帮助你正确理解并运用于 Web 开发所需要的名词与缩写，以及它们的定义。

你可以从侧边栏中选择术语表中的词汇。

**备注：** 编辑术语表是一项永无止境的工作，你可以添加新的条目或改进、完善现有条目。
Instance
========

一个对象，由构造函数所创建的实例

参见
--

* 实例 - 维基百科
Head
====

**Head**是HTML文档的一部分，包含了关于文档的metadata，比如作者、描述以及应用于 HTML 的CSS 或者 JavaScript 文件的链接。

参见
--

* MDN 里的 `<head>` 元素参考
* MDN 学习区域里的The HTML <head>
类型转换
====

类型转换（Type conversion/typecasting）是指将数据由一种类型变换为另一种类型。在编译器（对于编译语言）或运行时（像 JavaScript 等脚本语言）自动转换数据类型时，会发生*隐式转换*。你也可以在源码中*显式*要求进行转换。

例如，给定表达式 `"foo" + 1`，那么数字 `1` 会被隐式转换成字符串并且表达式返回 `"foo1"`。给定指令 `Number("0x11")`，字符串 `"x11"` 显式转换为数字 `17`。

参见
--

* 类型转换
* 术语
    + 类型
    + 强制类型转换
HTML5
=====

HTML 的最新稳定版本，HTML5 将 HTML 从用于构造一个文档的一个简单标记，到一个完整的应用程序开发平台。除其他功能外，HTML5 还包括新元素和用于增强存储、多媒体和硬件访问的JavaScript APIs 。

更多相关内容
------

* our HTML5 guide
混入
==

*混入*（mixin）是一个类（WebAPI 规范中的术语为接口），其中部分或全部的方法与属性尚未实现，需要另一个类或者接口来提供这些缺失的实现。

新的类或者接口包括混入的以及自身定义的属性和方法。所有方法和属性的使用方法在混入或实现混入的接口/类中保持一致。

混入的优点在于：可用于简化多个接口需要包含相同的方法与属性的 API 的设计。

例如，`WindowOrWorkerGlobalScope` 混入用于提供需要在 `Window` 与 `WorkerGlobalScope` (en-US) 接口上都可用的方法和属性。该混入由这两个接口实现。

参见
--

* 维基百科上的混入
CMS
===

**CMS**（内容管理系统）是一个允许用户发布、组织、修改、删除多种类型的内容的软件。**CMS** 不仅支持文本，还可以嵌入图片、视频、音频和互动的代码。

参见
--

* 在维基百科上的 CMS（内容管理系统）
XML
===

可扩展标记语言（XML）是由 W3C 指定的一种通用标记语言。信息技术（IT）行业使用许多基于 XML 的语言作为数据描述性语言。

XML 标签 类似 HTML 标签，但由于 XML 允许用户定义他们自己的标签，所以 XML 更加灵活。从这个层面来看，XML 表现的像一种元语言——也就是说，它可以被用来定义其他语言，例如 RSS。不仅如此，HTML 是陈述性语言，而 XML 是数据描述性语言。这意味着 XML 除了 Web 之外有更远更广的应用。例如，Web 服务可以利用 XML 去交换请求和响应。

参见
--

* XML 介绍
禁止修改的标头
=======

**禁止修改的标头**指的是不能在代码中通过编程的方式进行修改的 HTTP 标头，具体指 HTTP **请求**标头（和禁止修改的响应标头形成对比）。

因为用户代理保留对此类标头的完全控制，所以它们被禁止修改。保留以 `Sec-` 开头的名称，以用于在使用 fetch 算法的请求中创建安全的新标头，这些 API 授予开发人员对标头的控制权，例如：`XMLHttpRequest`。

禁止修改的标头包括以 `Proxy-` 和 `Sec-` 开头的标头，以及下面列出的标头：

* `Accept-Charset`
* `Accept-Encoding`
* `Access-Control-Request-Headers`
* `Access-Control-Request-Method`
* `Connection`
* `Content-Length`
* `Cookie`
* `Date`
* `DNT`
* `Expect`
* `Permissions-Policy`
* `Host`
* `Keep-Alive`
* `Origin`
* `Proxy-`
* `Sec-`
* `Referer`
* `TE`
* `Trailer`
* `Transfer-Encoding`
* `Upgrade` (en-US)
* `Via`

**备注：** 根据规范中的禁止修改的标头列表（Firefox 43 中实现了它），`User-Agent` 标头不再被禁止，现在可以设置在 Fetch 的 Headers 对象中，或者通过 `XMLHttpRequest` 的 setRequestHeader() 方法设置。但是，Chrome 会不做提示地从 Fetch 请求中丢弃这个标头（请参阅 Chromium bug 571722）。

参见
--

禁止修改的响应标头（术语表）
抽象编程（Abstraction）
=================

在计算机编程领域中，抽象编程指在研发大型复杂软件系统时，通过抽象的方法来降低编程复杂度，实现系统快速高效设计和开发的编程模式。它将系统各功能实现的技术细节隐藏在相对简单的 API 接口之后。

数据抽象的好处
-------

* 使用户避免撰写低等级代码。
* 避免代码重复，增加代码的复用性。
* 在不影响用户的前提下可以独立修改类的内部实现。
* 有效提升应用程序的安全性，因为只向用户提供重要的细节。
示例
--


```js
class ImplementAbstraction {
  // 设置一系列内部成员的值的方法
  set(x, y) {
    this.a = x;
    this.b = y;
  }
  display() {
    console.log(`a = ${this.a}`);
    console.log(`b = ${this.b}`);
  }
}
const obj = new ImplementAbstraction();
obj.set(10, 20);
obj.display();
// a = 10
// b = 20
```

参见
--

* 维基百科上的抽象化
Serialization（序列化）
==================

序列化是将一个对象或数据结构转换为适合网络传输或存储的格式（如数组缓冲区或文件格式）的过程。

例如在 JavaScript 中，你可以通过调用 `JSON.stringify()` 函数将某个值序列化为 JSON 格式的字符串。

CSS 值可以通过调用 `CSSStyleDeclaration.getPropertyValue()` 函数来序列化。

参见
--

* 维基百科的序列化词条
UX
==

UX(User eXperience) 是用户体验的首字母缩写。它是研究用户和系统之间的交互。其目标是使系统易于从用户的角度进行交互。

该系统可以是用户最终可以交互的任何类型的产品或应用程序。例如，在网页上进行的 UX 研究可以证明用户是否容易理解页面，引导到不同的页面并完成一般操作，以及减少这些过程中用户的操作步骤。

参见
--

* 维基百科User experience
密文
==

在密码学中，密文是被打乱的信息，在由正确的密码和正确的密文（通常是密钥）解密生成原始的明文之前处于不可读状态。密文的安全性及其包含信息的保密性依赖于加密算法和密钥的安全性。

参见
--

* 维基百科上的密文介绍
不可变的（Immutable）
===============

不可变值指的是，如果不创建一个全新的值替换它，它的内容是无法更改的。

在 JavaScript 中，原始值是不可变的——一旦创建了原始值，它就不能被改变，尽管持有它的变量可以被重新分配另一个值。相比之下，对象和数组默认是可变的——它们的属性和元素可以在不重新分配新值的情况下更改。

由于以下几个原因，使用不可变的对象可能是有益的：

* 提高性能（不计划将来更改对象）
* 为了减少内存使用（进行对象引用 (en-US)，而不是克隆整个对象）
* 线程安全（多个线程可以引用同一对象，而不会相互干扰）
* 降低开发人员的精神负担（对象的状态不会改变，其行为始终是一致的）

注意，你可以很容易证明可变性：只要对象提供一种方式来更改其属性，它就是可变的。另一方面，如果没有语言语义来保护它，就很难证明*不可变性*——这是一个开发人员约定俗成的问题。例如，`Object.freeze()` 是一种语言层面的方法，用于使对象在 JavaScript 中不可变。

参见
--

* 在维基百科中的不可变对象
* 可变
Grid Lines
==========

使用Grid 布局在显式网格中定义轨道的同时会创建**网格线**。在下面的例子中，有一个三列两行的网格。它给了我们 4 条列线和 3 条行线。

示例
--
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```



```html
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```



```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}
```


网格线可以用它们的编号来寻址。在从左到右的语言比如英语中，列线 1 将位于网格的左侧，行线 1 将位于其顶部。线编号遵循文档的写入模式，因此在从右到左的语言中，列线 1 行将位于网格的右侧。下面的图片展示了该网格的线编号，假设语言是从左到右的。

![Diagram showing the grid with lines numbered.](/zh-CN/docs/Glossary/Grid_Lines/1_diagram_numbered_grid_lines.png)

当创建隐式轨道去支持显式网格外的内容时，网格线也会在隐式网格中被创建，但是这些网格线不能通过编号来寻址。

按网格线编号将项目放置到网格上
---------------

创建一个网格后，可以通过网格线编号将项目放置到该网格上。在下面的例子中，项目定位从列线 1 到列线 3，从行线 1 到行线 3。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```



```html
<div class="wrapper">
  <div class="item">Item</div>
</div>
```



```css
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 100px;
}
.item {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}
```

命名网格线
-----

在显式网格中创建的网格线可以被命名，在轨道大小信息之前或之后的方括号中命名。当放置一个项目时，你可以使用这些名称代替编号，如下所示。
```

\* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
}

.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}
```



```html
<div class="wrapper">
  <div class="item">Item</div>
</div>
```



```css
.wrapper {
  display: grid;
  grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [cols-end];
  grid-template-rows: [row1-start] 100px [row2-start] 100px [rows-end];
}
.item {
  grid-column-start: col1-start;
  grid-column-end: col3-start;
  grid-row-start: row1-start;
  grid-row-end: rows-end;
}
```

参见
--

### 属性参考

* `grid-template-columns`
* `grid-template-rows`
* `grid-column-start` (en-US)
* `grid-column-end` (en-US)
* `grid-column`
* `grid-row-start` (en-US)
* `grid-row-end` (en-US)
* `grid-row`
### 扩展阅读

* CSS Grid Layout Guide: *Basic concepts of grid layout*
* CSS Grid Layout Guide: *Line-based placement with CSS Grid*
* CSS Grid Layout Guide: *Layout using named grid lines*
* CSS Grid Layout Guide: *CSS Grids, Logical Values and Writing Modes*
* Definition of Grid Lines in the CSS Grid Layout specification
FTP
===

**FTP**（File Transfer Protocol，文件传输协议）曾在过去许多年里是在 Internet 上主机（host）之间传输文件的标准协议（protocol）。现在越来越多的组织和主机账户不允许使用 FTP，而是使用诸如 Git 那样的版本控制系统。你仍可以在一些旧的主机系统上看到它，但可以肯定地说，使用 FTP 不再被认为是最好的做法。

**FTP** 是 TCP/IP 协议组中的协议之一。FTP 协议包括两个组成部分，其一为FTP 服务器，其二为 FTP 客户端。其中 FTP 服务器用来存储文件，用户可以使用 FTP 客户端通过 FTP 协议访问位于 FTP 服务器上的资源。在开发网站的时候，通常利用 FTP 协议把网页或程序传到Web 服务器上。此外，由于 FTP 传输效率非常高，在网络上传输大的文件时，一般也采用该协议。

参见
--

* 通过 FTP 上传文件的初学者教程
* 维基百科上的 FTP
Accessibility（无障碍）
==================

*无障碍网页*（Web Accessibility，缩写：**A11Y**）指在物理条件和技术条件限制下，保证网站达到最佳可用性的实践。W3C (en-US) 组织的 Web 无障碍倡议 (en-US)（WAI）正式定义和论述了 Web 无障碍技术。

参见
--

* MDN 上的无障碍资源
* 维基百科的 Web 无障碍词条
* 学习无障碍
* Web Accessibility In Mind
* MDN 上的 ARIA 文档
* Web 无障碍倡议主页
* WAI-ARIA 推荐
JPEG
====

**JPEG**（联合图像专家小组）是一个广泛用于数字图像有损压缩的方法。

**JPEG**（Joint Photographic Experts Group）是 JPEG 标准的产物，该标准由国际标准化组织（ISO）制订，是面向连续色调静止图像的一种压缩标准。JPEG 格式是最常用的图像文件格式，后缀名为.jpg 或.jpeg

简介
--

**JPEG**（Joint Photographic Experts Group）即联合图像专家组，是用于连续色调静态图像压缩的一种标准，文件后缀名为，jpg 或，jpeg，是最常用的图像文件格式。其主要是采用预测编码（DPCM）、离散余弦变换（DCT）以及熵编码的联合编码方式，以去除冗余的图像和彩色数据，属于有损压缩格式，它能够将图像压缩在很小的储存空间，一定程度上会造成图像数据的损伤。尤其是使用过高的压缩比例，将使最终解压缩后恢复的图像质量降低，如果追求高品质图像，则不宜采用过高的压缩比例。

然而，JPEG 压缩技术十分先进，它可以用有损压缩方式去除冗余的图像数据，换句话说，就是可以用较少的磁盘空间得到较好的图像品质。而且 JPEG 是一种很灵活的格式，具有调节图像质量的功能，它允许用不同的压缩比例对文件进行压缩，支持多种压缩级别，压缩比率通常在 10；1 到 40；1，压缩比越大，图像品质就越低；相反地，压缩比越小，图像品质就越高。同一幅图像，用 JPEG 格式存储的文件是其他类型文件的 1/10~1/20，通常只有几十 KB，质量损失较小，基本无法看出。JPEG 格式压缩的主要是高频信息，对色彩的信息保留较好，适合应用于互联网；它可减少图像的传输时间，支持 24 位真彩色；也普遍应用于需要连续色调的图像中。

JPEG 格式可分为标准 JPEG、渐进式 JPEG 及 JPEG2000 三种格式。

1. 标准 JPEG 格式；此类型在网页下载时只能由上而下依序显示图像，直到图像资料全部下载完毕，才能看到图像全貌。
2. 渐进式 JPEG；此类型在网页下载时，先呈现出图像的粗略外观后，再慢慢地呈现出完整的内容，而且存成渐进式 JPG 格式的文档比存成标准 JPG 格式的文档要来得小，所以如果要在网页上使用图像，可以多用这种格式。
3. JPEG2000；它是新一代的影像压缩法，压缩品质更高，并可改善在无线传输时，常因信号不稳造成马赛克现象及位置错乱的情况，改善传输的品质。
性能
--

JPEG 的性能，用质量与比特率之比来衡量，是相当优越的。

**JPEG 的优点是：**

* 它支持极高的压缩率，因此 JPEG 图像的下载速度大大加快。
* 它能够轻松地处理 16.8M 颜色，可以很好地再现全彩色的图像。
* 在对图像的压缩处理过程中，该图像格式可以允许自由地在最小文件尺寸（最低图像质量）和最大文件尺寸（最高图像质量）之间选择。
* 该格式的文件尺寸相对较小，下载速度快，有利于在带宽并不“富裕”的情况下传输。

**JPEG 的缺点是：**

* 并非所有的浏览器都支持将各种 JPEG 图像插入网页。
* 压缩时，可能使图像的质量受到损失，因此不适宜用该格式来显示高清晰度的图像。

JPEG 的复杂度之低和使用时间之长，给人以深刻的印象。以下是对于 8 位/像素的中等复杂画面的图像，JPEG 所给出的几个等级作为衡量压缩编码效果的准则：

* 0.25 位/像素~0.5 位/像素；中~好，足以满足一些应用。
* 0.5 位/像素~0.75 位/像素；好~很好，足以满足许多应用。
* 0.75 位/像素~1.5 位/像素；优秀，足以满足大多数应用。
* 1.5 位/像素~2.0 位/像素；难于与原图像区别，足以满足绝大多数应用。
* >2.0 位/像素；近乎完美，满足几乎全部的应用。

其中位/像素（bit/pixel）定义为压缩图像（包括色度分量）的总位数除以亮度分量的样本数。

参见
--

* 在维基百科上的 JPEG
可缓存
===

**可缓存**的响应是可以缓存的 HTTP 响应，它被存储起来以便后续的检索和使用，省去了对服务器的新的请求。并非所有的 HTTP 响应都可以被缓存，以下是 HTTP 响应被缓存的约束条件：

* 请求中使用的方法本身就是*可缓存的*，即 `GET` 或 `HEAD` 方法。如果指示了有效期并且设置了 `Content-Location` 标头，`POST` 或 `PATCH` 请求的响应也可以被缓存，但是这很少被实现。例如，Firefox 就不支持它（Firefox bug 109553）。其他方法，如 `PUT` 或 `DELETE` 是不可缓存的，其结果也不能被缓存。
* 响应的状态码对应用程序的缓存可知，且被认为是*可缓存的*。以下状态代码是可缓存的：`200`、`203`、`204`、`206`、`300`、`301`、`404`、`405`、`410`、`414` 和 `501`。
* 响应中有一些*特定的标头*，如可以防止缓存的 `Cache-Control`。

请注意，对特定 URI 的一些不可缓存的请求/响应可能会使同一 URI 上先前缓存的响应失效。例如，对 pageX.html 的 `PUT` 将使所有对同一 URI 的 `GET` 或 `HEAD` 的缓存请求失效。

当请求的方法和响应的状态码都是可缓存的，对请求的响应就可以被缓存：


```http
GET /pageX.html HTTP/1.1
(…)

200 OK
(…)
```


`PUT` 请求不能被缓存。此外，通过 `HEAD` 或 `GET` 对同一 URI 的请求，其缓存数据也会失效：


```http
PUT /pageX.html HTTP/1.1
(…)

200 OK
(…)
```


响应中的特定 `Cache-Control` 标头可以阻止缓存：


```http
GET /pageX.html HTTP/1.1
(…)

200 OK
Cache-Control: no-cache
(…)
```

参见
--

* HTTP 规范中提供了有关方法和缓存的详细说明。
* 常见可缓存方法的描述：`GET`、`HEAD`
* 常见不可缓存方法的描述：`PUT`、`DELETE`，最常见的是 `POST`
线程
==

计算机科学中的线程是同时运行多个任务或程序的执行。每个能够执行代码的单元称为**线程**。

**主线程** 是浏览器用来处理用户事件、渲染和绘制显示以及运行组成典型网页或应用程序的大部分代码的线程。因为这些事情都发生在一个线程中，一个缓慢的网站或者应用程序脚本会减低整个浏览器的速度；更糟糕的是，如果一个网站或者应用程序脚本进入无限循环，整个浏览器将会挂起。这导致了令人沮丧、迟缓（或更糟）的用户体验。

然而，现代 JavaScript 提供了创建额外线程的方式，每个线程独立执行，同时可能相互通信。这是使用例如 **`web workers`** 等技术实现的，这些技术可以用来衍生出一个在自己的线程中与主线程同时运行的子程序。这允许缓慢、复杂或者长时间运行的任务独立于主线程执行，以保护网站或者应用程序的整体性能，以及浏览器的整体性能。这也允许个人利用现代多核处理器。

可以创建一种称为 **`service worker`** 的特殊类型的 `worker`，可以在即使用户当前不使用该网站的情况下在网站背后运行（在用户许可的情况下）。这用于创建在用户与网站交互不活跃的情况下当发生事情时能够通知用户的网站。例如通知用户收到了电子邮件，即使他们当前没有登录邮箱服务。

总体而言，可以观察到，我们的操作系统中的这些线程非常有帮助。它们有助于最大限度地减少上下文切换时间，实现更高效的通信，并允许进一步使用多处理器体系结构。

参见
--

* 异步 JavaScript
* Web worker API
* Service worker API
* 术语表
    + 主线程
Call stack（调用栈）
===============

调用栈是解释器（比如浏览器中的 JavaScript 解释器）追踪函数执行流的一种机制。当执行环境中调用了多个函数时，通过这种机制，我们能够追踪到哪个函数正在执行，执行的函数体中又调用了哪个函数。

* 每调用一个函数，解释器就会把该函数添加进调用栈并开始执行。
* 正在调用栈中执行的函数还调用了其他函数，那么新函数也将会被添加进调用栈，一旦这个函数被调用，便会立即执行。
* 当前函数执行完毕后，解释器将其清出调用栈，继续执行当前执行环境下的剩余的代码。
* 当分配的调用栈空间被占满时，会引发“堆栈溢出”错误。


```js
function greeting() {
  // [1] Some codes here
  sayHi();
  // [2] Some codes here
}
function sayHi() {
  return "Hi!";
}

// 调用 `greeting` 函数
greeting();

// [3] Some codes here
```


上面的代码会按照如下流程这样执行：

1. 忽略前面所有函数，直到 `greeting()` 函数被调用。
2. 把 `greeting()` 添加进调用栈列表。
3. 执行 `greeting()` 函数体中的所有代码。

> 
> 
>  调用栈列表：
>  - greeting
>  
> 
> 
>
4. 代码执行到 `sayHi()` 时，该函数被调用。
5. 把 `sayHi()` 添加进调用栈列表。
6. 执行 `sayHi()` 函数体中的代码，直到全部执行完毕。

> 
> 
>  调用栈列表：
>  - sayHi
>  - greeting
>  
> 
> 
>
7. 返回来继续执行 `greeting()` 函数体中 `sayHi()` 后面的代码。
8. 删除调用栈列表中的 `sayHi()` 函数。
9. 当 `greeting()` 函数体中的代码全部执行完毕，返回到调用 `greeting()` 的代码行，继续执行剩下的 JS 代码。

> 
> 
>  调用栈列表：
>  - greeting
>  
> 
> 
>
10. 删除调用栈列表中的 `greeting()` 函数。

一开始，我们得到一个空空如也的调用栈。随后，每当有函数被调用都会自动地添加进调用栈，执行完函数体中的代码后，调用栈又会自动地移除这个函数。最后，我们又得到了一个空空如也的调用栈。

参见
--

* Wikipedia 上的 调用栈
* MDN Web 文档中的术语
    + Call stack
    + Function
变量
==

变量是值的具名引用。这样，不可预测的值可以通过预定的名称来访问。

参见
--

* 维基百科上的变量（程序设计）词条
* 在 JavaScript 中声明变量
* JavaScript 的 `var` 语句
Fork
====

“派生”（Fork）是在某一时刻对现有的软件项目进行复制，并在项目加上某人的修改。基本上，如果原软件的许可证允许，你就可以复制软件的代码，开发自己的版本，附加上自己的补充，这就是一个 Fork。

Fork 在自由和开源软件的开发中很常见。因为使用 Git 或 Github 平台的贡献模式，Fork 是现在比较流行的术语。

参见
--

* 维基百科上的分叉
* 在 Git 上下文中：如何分叉 GitHub 仓库
* 各种“知名的”fork
    + Linux distributions
    + Node.js and io.js (which have been merged together back)
    + LibreOffice, a fork of OpenOffice
属性
==

**属性**（Attribute）可扩展 HTML 或 XML 元素，改变其行为或提供元数据。

属性的形式总是 `name="value"`（属性的标识符后跟相关的值）。

你可能会看到没有等号或值的属性。这是在 HTML 中提供空字符串或在 XML 中提供属性名称的简写。


```html
<input required />
<!-- 与 -->
<input required="" />
<!-- 或 -->
<input required="required" />
<!-- 相同 -->
```

属性的反射
-----

属性可以*反射*到特定接口的特定属性中。这意味着属性的值可以通过访问该属性来读取，并可通过将属性设置为不同的值来修改属性。

例如，下面的 `placeholder` 反射为 `HTMLInputElement.placeholder`。

考虑这段 HTML 代码：


```html
<input placeholder="原始占位符" />
```


我们可以使用 `HTMLInputElement.placeholder` 检查属性与 `HTMLInputElement.placeholder` 之间的反射性：


```js
const input = document.querySelector("input");
const attr = input.getAttributeNode("placeholder");
console.log(attr.value);
console.log(input.placeholder); // 与 `attr.value` 打印的值相同

// 更改占位符的值也会更改反射属性的值。
input.placeholder = "修改过的占位符";
console.log(attr.value); // 打印出 `修改过的占位符`
```

参见
--

* HTML 属性参考
* 关于 HTML 的全局属性的信息
Crawler
=======

网络爬虫是一种能有条理并且系统化地浏览Web，以便收集网页数据的程序（通常也被称作“机器人”）。搜索引擎（例如谷歌，必应）利用爬虫来创建索引是网络爬虫最典型的使用案例。

参见
--

* 维基百科上的 Web 爬虫
* MDN Web 文档术语表
    + Search engine (en-US)
Grid container
==============

通过设置 CSS 属性 `display:grid;` 或 `display:inline-grid;` 可以将一个元素定义为**网格容器**(**grid container**)，并且它的所有直接子元素都会成为网格项。

网格容器会创建一个**网格化环境**(**grid firmatting context**) 。它的直接子元素通过定义 `grid-template-columns` 和 `grid-template-rows` 属性可以将自己变为*显式网格*，当某个元素不在显示网格内时，它就会变为*隐式网格*。

参见
--

### 属性参考

* `grid-template-columns`
* `grid-template-rows`
* `grid-auto-columns`
* `grid-auto-rows`
* `grid`
* `grid-template`
### 扩展阅读

* CSS 网格布局：*网格布局基本概念*
Protocol（协议）
============

**协议**是定义了数据如何在计算机内和之间进行交换的规则的系统。设备之间通信要求设备接受正在交换的数据的格式。定义格式的一组规则称之为协议。

参见
--

* 在维基百科中的 通信协议
* RFC 官方互联网协议标准
* HTTP 概述
* 术语库：
    + TCP
    + Packet (en-US)
Syntax error(语法错误)
==================

因为使用了未定义或错误的语法（syntax (en-US)）而引发的异常（exception）。语法错误会在编译或者解析源码的过程中被检测出来。

例如，如果在定义一个 JavaScript 函数时遗漏了闭合花括号 (`}`)，则触发了一个语法错误。浏览器的开发者工具会在控制台输出 JavaScript 和 CSS 语法错误。

参见
--

### 基础知识

* 语法错误 - 维基百科
* `SyntaxError` - JavaScript 对象
输入法编辑器
======

输入法编辑器（IME）是一种程序，可为文本输入提供专门的用户界面。输入法编辑器在许多情况下使用：

* 使用拉丁键盘输入中文，日文或韩文文本
* 使用数字键盘输入拉丁文字
* 使用手写识别在触摸屏上输入文本
参见
--

* 输入法
* 术语
    + 国际化
CIA
===

CIA（机密性 Confidentiality、完整性 Integrity、可用性 Availability，也称作 CIA 三要素或 AIC 三要素）是一个指导组织的信息安全政策的模型。

参见
--

* 维基百科上的 CIA 部分