rubys007的博客

如果你的系统还不支持 Node.js 及 NPM 可以参考我们的 Node.js 教程。我们建议在 React 中使用 CommonJS 模块系统，比如 browserify 或 webpack，本教程使用 webpack。更多信息可以查阅：http://npm.taobao.org/。

字符串是一个包含一个或多个字符的序列，可以由字母、数字或符号组成。JavaScript 字符串中的每个字符都可以通过索引号访问，并且所有字符串都有可用的方法和属性。在本教程中，我们将学习字符串原始值和String对象之间的区别，字符串的索引方式，如何访问字符串中的字符，以及字符串常用的属性和方法。

NAT，即网络地址转换，是一个通用术语，用于篡改数据包以将其重定向到另一个地址。通常，这用于允许流量跨越网络边界。实现 NAT 的主机通常可以访问两个或两个以上的网络，并配置为在它们之间路由流量。端口转发是将特定端口的请求转发到另一个主机、网络或端口的过程。由于此过程修改了飞行中的数据包的目的地，因此被视为一种 NAT 操作。在本教程中，我们将演示如何使用iptables通过 NAT 技术将端口转发到防火墙后面的主机。

保持代码格式的一致性是一个挑战，但现代开发工具使得可以自动在团队的代码库中保持一致性成为可能。在本文中，您将设置 Prettier 来自动格式化您在 Visual Studio Code 中的代码，也被称为VS Code。${单引号和双引号混用。person对象的第一个属性应该单独占一行。函数内部的控制台语句应该缩进。您可能喜欢或不喜欢箭头函数参数周围的可选括号。

垃圾邮件发送者使用他们的邮件服务器发送电子邮件，但以您的“域”作为发送邮件的地址。受害者常常因此遭受后果，因为他们的声誉受损，他们不得不否认滥用的责任或浪费时间整理错误的退信消息。在为您的域创建 SPF 记录之前，重要的是要找出您的域将使用哪个服务器发送电子邮件。考虑所有可用的邮件服务器选项。SPF 记录的目的是防止垃圾邮件发送者使用您的域伪造的“发件人地址”发送消息。收件人可以参考 SPF 记录来确定声称来自您的域的消息是否来自授权的邮件服务器。这将允许域的 MX 发送邮件，同时禁止所有其他邮件。

数据库会随着时间的推移而增长，有时会超出文件系统的空间。当它们位于操作系统的同一分区时，您还可能遇到 I/O 冲突。RAID、网络块存储和其他设备可以提供冗余和其他理想的功能。无论您是添加更多空间、评估性能优化的方法，还是希望利用其他存储功能，本教程将指导您完成重新定位 MariaDB 的数据目录。

opacity是一个 CSS 属性，允许你改变元素的不透明度。默认情况下，所有元素的值为1。通过将这个值更接近0，元素将会变得越来越透明。一个常见的用例是将图像作为背景的一部分。调整不透明度可以提高文本的可读性或实现所需的外观。然而，目前没有办法只针对元素的使用opacity而不影响子元素。在本文中，我们将介绍两种方法来解决具有不透明度的背景图像的限制。

JavaScript，简称 JS，是一种用于网页开发的编程语言。作为 Web 的核心技术之一，JavaScript 与 HTML 和 CSS 一起用于使网页具有交互性并构建 Web 应用程序。现代 Web 浏览器遵循通用的显示标准，通过内置引擎支持 JavaScript，无需额外的插件。在处理 Web 文件时，JavaScript 需要与 HTML 标记一起加载和运行。这可以通过两种方式实现：要么内联在 HTML 文档中，要么作为浏览器将与 HTML 文档一起下载的单独文件运行。

在了解 DOM 树和节点中，我们已经知道 DOM 是由称为节点的对象树结构组成的，节点可以是文本、注释或元素。通常情况下，当我们访问 DOM 中的内容时，会通过 HTML 元素节点进行访问。为了能够自信地访问 DOM 中的元素，最好具备对 CSS 选择器、语法和术语的工作知识，以及对 HTML 元素的理解。在本教程中，您将学习几种访问 DOM 中元素的方法：通过 ID、class、tag 和查询选择器。

在了解 DOM 树和节点中，我们已经知道 DOM 是由称为节点的对象树结构组成的，节点可以是文本、注释或元素。通常情况下，当我们访问 DOM 中的内容时，会通过 HTML 元素节点进行访问。为了能够自信地访问 DOM 中的元素，最好具备对 CSS 选择器、语法和术语的工作知识，以及对 HTML 元素的理解。在本教程中，您将学习几种访问 DOM 中元素的方法：通过 ID、class、tag 和查询选择器。

网站上的字体很容易成为浏览器在显示页面最终外观和形式之前必须下载的总捆绑大小的一部分。此外，我们还需要担心各种问题，比如臭名昭著的未样式文本闪烁（FOUT）。可以说，整个问题的一部分已经得到解决，多亏了font-display属性。另外，网站上的文本几乎总是最重要的部分，因此我们不希望出现外观不佳或难以阅读的文本。那么，一个精明的网页设计师应该怎么做才能既满足性能又满足外观和感觉呢？一个解决方案是实际上使用用户设备上已安装的字体。过去，这不是一个非常优雅的解决方案，因为一些流行的系统没有内置美丽的字体。

占位符文本将自动继承常规输入文本的字体系列和字体大小，但您可能会遇到需要更改占位符文本颜色的情况。您可以通过 ::placeholder 伪元素来实现这一点。在我们的示例中，让我们为占位符文本定义一个自定义颜色，并且还要覆盖继承的字体大小，以便有更小的占位符文本。不幸的是，您可以看到 ::placeholder 目前需要一系列的供应商前缀。

2018年9月，W3C CSS滚动条定义了使用CSS自定义滚动条外观的规范。截至2020年，96%的互联网用户使用支持CSS滚动条样式的浏览器。但是，您需要编写两套CSS规则来覆盖Blink和WebKit以及Firefox浏览器。在本教程中，您将学习如何使用CSS自定义滚动条以支持现代浏览器。

了解 CSS 的:root伪类选择器，以及在项目中可能想要如何使用它！CSS 的:root伪类选择器用于选择给定规范的最高级父级。在 HTML 规范中，：root本质上等同于html选择器。在下面的 CSS 片段中，:root和html如果你注意到我说:root本质上等同于html选择器。事实上，：root选择器比html具有更高的优先级。这是因为它实际上被视为伪类选择器（就像或:hover一样）。尽管html选择器出现在后面，:root选择器仍然胜出，这要归功于它更高的优先级！

现代 CSS 是一个强大的工具，您可以使用它来创建许多高级用户界面（UI）功能。在过去，这些功能依赖于 JavaScript 库。在本指南中，您将设置一些 CSS 行来在网页上创建一个滚动视差效果。您将使用上的图片作为占位符背景图像。完成本教程后，您将拥有一个具有纯 CSS 滚动视差效果的网页。

开发人员通常喜欢在网页上对文本进行换行。换行会以某种方式限制文本，防止设计问题。文本换行还可以防止水平滚动。但有时候，您希望文本块保持在同一行，不考虑长度。您可以使用 CSS 的属性来防止特定元素的换行和文本换行。在本教程中，您将以四种不同的方式对相同的文本块进行样式设置，首先是带有换行，然后是三次不带换行：

在本文中，您将了解 CSS属性以及如何使用它来创建视觉上愉悦、易读的文本。您可能以前见过但它是如何工作的，以及在 CSS 中扮演着什么角色呢？

font-face是一个 CSS at-rule，用于定义自定义字体。通过@font-face，您可以提供一个路径到与您的 CSS 文件托管在同一服务器上的字体文件。这个规则已经存在了相当长的时间，但是有一个更新的属性，它带来了新的加载选项。在本教程中，我们将下载流行的开源字体 Roboto Mono，并使用@font-face在一个示例网页上加载该字体。为了创建最佳的用户体验，我们将使用属性来自定义加载字体的方式和时间。

该项目从名称为 col 的第 2 行开始，结束于同样被命名为 col 的第 7 行。类似地，它从名称为 content 的第 6 行开始，结束于同样被命名为 content 的第 10 行。如果你使用 grid-column 或 grid-row 将项目放置到其父网格上，你可以使用 span 关键字来避免在项目跨越多列或多行时指定结束线。span 也可以与 grid-area 属性一起使用。

在处理图片时，你可能会遇到需要保持原始宽高比的情况。保持宽高比可以防止图片被拉伸或压缩而出现失真。解决这个问题的常见方法是使用CSS 属性。更现代的方法是使用object-fitCSS 属性。在本文中，你将探索object-fitCSS 属性中可用的fillcovercontainnone和scale-down值的效果，以及它们如何裁剪和缩放图片。你还将探索CSS 属性以及它如何偏移图片。

本文将向您介绍 Angular 的ViewChild装饰器。在某些情况下，您可能希望从父组件类中访问指令、子组件或 DOM 元素。ViewChild装饰器返回与给定指令、组件或模板引用选择器匹配的第一个元素。

Renderer2 类是 Angular 提供的一个抽象服务，允许在不直接操作 DOM 的情况下操纵应用程序的元素。这是推荐的方法，因为它使得更容易开发可以在没有 DOM 访问权限的环境中渲染的应用程序，比如在服务器上、在 Web Worker 中或在原生移动端。在这个例子中，我们创建一个新的 div 和一个文本节点。然后我们将文本节点放入我们的新 div 中，最后将我们的。😄 这就结束了我们的概述。现在，您可以在模板中向元素添加该指令，渲染时将添加。我们的模板在渲染后将如下所示，假设我们在一个。

Jasmine spy 用于跟踪或存根函数或方法。spy 是一种检查函数是否被调用或提供自定义返回值的方法。我们可以使用spy 来测试依赖于服务的组件，并避免实际调用服务的方法来获取值。这有助于保持我们的单元测试专注于测试组件本身的内部而不是其依赖关系。在本文中，您将学习如何在 Angular 项目中使用 Jasmine spy。

Angular 处理取消订阅可观察对象的操作，比如从 HTTP 服务返回的可观察对象或者使用 async 管道时。然而，对于其他情况，管理所有订阅并确保取消长期存在的订阅可能会变得困难。而且，取消大部分订阅的策略也会带来自己的问题。在本文中，您将看到一个依赖于手动订阅和取消订阅的 Angular 应用示例。然后，您将比较它与使用takeUntil操作符来声明性地管理订阅的 Angular 应用示例。

在 Angular 2 模板中绑定内联样式很容易。

WebSocket 是一种允许服务器和客户端之间进行全双工通信的互联网协议。该协议超越了典型的 HTTP 请求和响应范式。通过 WebSocket，服务器可以向客户端发送数据，而无需客户端发起请求，因此可以实现一些非常有趣的应用程序。在本教程中，您将构建一个实时文档协作应用程序（类似于 Google Docs）。我们将使用 Socket.IO Node.js 服务器框架和 Angular 7 来实现这一目标。您可以在 GitHub 上找到此示例项目的完整源代码。

Angular 路由的导航守卫允许授予或移除对导航的某些部分的访问权限。另一个路由守卫，守卫，甚至允许您防止用户意外离开具有未保存更改的组件。：控制是否可以激活路由。：控制是否可以激活路由的子路由。CanLoad：控制是否可以加载路由。对于懒加载的特性模块来说，这变得非常有用。如果守卫返回 false，它们甚至不会加载。：控制用户是否可以离开路由。请注意，此守卫不会阻止用户关闭浏览器选项卡或导航到不同的地址。它只会阻止应用程序内部的操作。

Angular 路由的导航守卫允许授予或移除对导航的某些部分的访问权限。另一个路由守卫，守卫，甚至允许您防止用户意外离开具有未保存更改的组件。：控制是否可以激活路由。：控制是否可以激活路由的子路由。CanLoad：控制是否可以加载路由。对于懒加载的特性模块来说，这变得非常有用。如果守卫返回 false，它们甚至不会加载。：控制用户是否可以离开路由。请注意，此守卫不会阻止用户关闭浏览器选项卡或导航到不同的地址。它只会阻止应用程序内部的操作。

单一职责原则是指应用程序的各个部分应该只有一个目的。遵循这个原则可以使您的 Angular 应用程序更容易测试和开发。在 Angular 中，使用而不是创建特定组件，可以使组件在不修改组件本身的情况下轻松修改为各种用例。在本文中，您将接受一个现有组件并重写它以使用。

请注意，在初始化表单后，我们在 ngOnInit 生命周期钩子中调用了一个 onChanges 方法。在这里，我们将创建一个非常简单的示例，每当表单中的值发生更改时，就会更新模板字符串。方法，该方法返回一个可观察对象，用于发出最新的值。返回一个可观察对象，因此您可以根据发出的值做任何操作。来更新实例变量或执行操作。

Angular 提供了两种处理表单的方式：模板驱动表单和响应式表单（也称为模型驱动表单模板驱动表单是在 Angular 中处理表单的默认方式。使用模板驱动表单时，模板指令被用来构建表单的内部表示。而使用响应式表单时，你需要在组件类中构建自己的表单表示。使用自定义验证器动态改变验证规则动态添加表单字段在本文中，你将探索如何将响应式表单应用到一个示例 Angular 应用程序中。

Angular 的包提供了一个Validators类，支持诸如requiredminLengthmaxLength和pattern等有用的内置验证器。然而，可能存在需要更复杂或自定义规则进行验证的表单字段。在这种情况下，您可以使用自定义验证器。在 Angular 中使用响应式表单时，您可以使用函数定义自定义验证器。如果验证器不需要被重复使用，它可以直接存在于组件文件中作为一个函数。否则，如果验证器需要在其他组件中重复使用，它可以存在于一个单独的文件中。

Angular 中的查询参数允许在应用程序的任何路由之间传递可选参数。查询参数与常规路由参数不同，常规路由参数仅在一个路由上可用，并且是不可选的（例如在本文中，您将参考一个显示产品列表的应用程序示例。您将提供可选的order和值，接收组件可以读取并对其进行操作。提供的值将影响产品列表的排序和过滤。

您还可以为以下导出值设置局部变量：index、first、last、even 和 odd。index 将返回当前循环索引，而其他值将提供一个布尔值，指示该值是 true 还是 false。

是 Angular 2+ 中可用的一个元素，可以作为结构指令的宿主。在本文中，您将探讨可以使用解决的场景。

在 Angular 中，RouterLink是一个用于以声明方式导航到不同路由的指令。和是Router类中可用的两种方法，用于在组件类中以命令方式导航。让我们来探讨如何使用RouterLink和。

延迟加载是一种限制加载用户当前需要的模块的方法。这可以提高应用程序的性能并减小初始捆绑包大小。默认情况下，Angular 使用急切加载来加载模块。这意味着在应用程序运行之前必须加载所有模块。虽然这对许多用例可能是足够的，但在某些情况下，这种加载时间开始影响性能。在本文中，您将在 Angular 应用程序中使用延迟加载路由。

Angular 2+ 支持使用属性绑定来渲染 HTML。如果你使用插值，它会被视为字符串。本文将介绍如何使用以及一些注意事项。

Angular 4.3 带来了一个更简单的处理 http 请求的新方法，使用了 HttpClient 库。为了避免对当前 Http 库造成破坏性改变，它以新的名称提供。还为我们提供了高级功能，比如能够监听进度事件和拦截器来监视或修改请求或响应。

和是 Angular 中两个在自定义指令中非常有用的装饰器。允许你在承载指令的元素或组件上设置属性，而则允许你监听宿主元素或组件上的事件。在本文中，你将会在一个示例指令中使用和来监听宿主上的keydown事件。!输入文本后，动画显示每个字符更改颜色。消息拼写出：一种彩虹般的颜色。它将把文本和边框颜色设置为一组可用颜色中的随机颜色。