Miever - freeCodeCamp.org

图文详解 CSS Position 属性

Miever — Tue, 03 Aug 2021 09:00:00 +0000

今天我们将学习所有你需要知道的关于 CSS position 属性的例子，让我们开始吧 🎖️

CSS 中的 position 属性

如果你想要制作一个独特、漂亮、有艺术风格的网页，那么你绝对应该学习如何使用 CSS 的 position 属性。让我们来看看它是如何工作的。

使用 Flexbox 或者 Grid，你可以制作一个对称的网站，像这样：

使用 Flexbox 制作的网站

通过 position 属性，你可以制作一个非对称的网站，像这样：

使用 Grid 和 position 属性制作的网站

你不能使用 Flexbox 和 Grid 把你的内容放在所有你想要的地方。你会受限于 X 轴和 Y 轴。看看这幅图你就会明白我的意思了：

对称的内容布局显示元素分别放置在 x 轴和 y 轴

你的盒子会遵循这些衡量因素。

但是使用 position 属性时，你可以通过将元素与其他元素分离，来将内容放置到任何你想要的地方。

不对称的内容布局，不需要考虑 x 轴和 y 轴的位置

你可以用这种布局把你的盒子放在任何你想要的地方。换句话说，你可以在屏幕上将元素自由移动。

下面是另一个使用 position 属性的例子：

一个非对称的网页

你可以使用 position 属性在整个页面来放置或移动那些小点和波浪图案和甜甜圈图像至任何你想要的地方。

项目搭建

对于这个项目，你可以使用任何安装了 emmet 插件的代码编辑器。我将使用 CodePen.io.

HTML

body 标签内部，写如下代码：

CSS

清除默认浏览器设置并添加如下 CSS：

*{
   margin: 0px;
   padding: 0px;
   box-sizing: border-box;
}

设置 box-1 类样式：

.box-1{
   width: 120px;
   height: 120px;
   background-color: skyblue;
   border: 2px solid black;
}

position 属性有 5 个值：

relative
absolute
static
fixed
sticky

为了移动我们的容器，我们使用以下四个属性：

Top, Bottom
Left, Right

CSS 中的静态定位

这是每个元素定位的默认值。

每个元素的默认位置

CSS 中的相对定位和绝对定位

relative 属性和 absolute 属性的工作原理是一样的，不同在于，我们使用 relative 来标识父类，使用 absolute 来标识子类。

相对定位和绝对定位

看如下 2 个例子

我们先尝试一下 relative 值，写如下代码：

.box-1{
/* 在此写其他代码*/

   position: relative;
   left: 100px;
}

得到的结果如下：

我们可以使用 absolute 值得到相同的结果，例如：

.box-1{
/* 在此写其他代码*/

   position: absolute;
   left: 100px;
}

让我们研究一下相对定位和绝对定位的主要区别。

CSS 中的相对定位和绝对定位

HTML

在 HTML 中编写如下代码：

CSS

设置如下 CSS 样式：

.box-1{
	width: 300px;
	height: 300px;
	background-color: skyblue;
	border: 2px solid black;
    margin: auto;
}

.box-2{
	width: 100px;
	height:100px;
	background-color: pink;
	border: 2px solid black;
}

应该会是这样：

结果是左上方有一个蓝色盒子和一个较小的粉色盒子

现在，我们设置一下类样式：

body{ }

.box-1{ }

.box-2{ }

现在，在 CSS 中写如下类样式：

body{
	
}

.box-1{
/* 这是父元素  👇 */
	position: relative;
}
.box-2{
/* 这是子元素  👇 */
	position: absolute;
	left: 100px;
}

结果如下：

结果是粉色盒子右移了 100px

注意 .box-2 相对于 .box-1 移动了 100px。

这是因为 .box-1 是父元素，.box-2 是子元素。

再做一些改变，在 CSS 中写如下代码：

body{
/* 这是  👇 父元素 */
   position: relative;	
}

.box-1{

}
.box-2{
/* 这是  👇 子元素 */
   position: absolute;
    left: 100px;
}

结果是这样的：

结果是粉色盒子相对于 body 移动了100px。

注意是 .box-2 相对于 body 标签移动了 100px 。

这是因为 body 是 父元素，.box-2 是 子元素。

固定定位（Fixed）

这个值会将元素固定在屏幕上的某一位置，即使浏览器发生滚动。让我们看几个例子，看看它是如何工作的。

固定定位的例子

在 HTML 中写如下代码：


	
	lorem200
    
	 fixed 
    
	lorem200

CSS 如下：

.container{
	height: 3000px;
}

.box-1{
	height: 120px;
	width: 120px;
	background-color: skyblue;
	border: 2px solid black;
	
	display: grid;
	place-content: center;
}

在底部添加如下 CSS：

.box-1{

	position: fixed;
	top: 100px;
	left: 200px;
}

结果如下：

可以看到，即使在滚动浏览器时，该元素仍然是固定的。

粘性定位（Sticky）

当滚动到屏幕某个点后，这个值会将元素固定在屏幕上，不再移动。

粘性定位示例

无需改变你当前的 HTML 和 CSS 中的任何东西，只需改变这个值：

.box-1{
/*  使用这个值  👇 */
   position: sticky;
   top: 30px;
   left: 200px;
}

结果如下：

你会发现，当滚动到屏幕某一特定点后，该元素会仍然固定在浏览器屏幕的顶端。

你可以查看这些网站，看看粘性定位在实际网站上是如何工作的。

总结

现在，你可以自信地制作漂亮的网站，并使用 position 属性解决简单的布局问题。

这是你读到最后的奖章。❤️

欢迎提出建议和批评 ❤️

YouTube / Joy Shaheb

LinkedIn / JoyShaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

感谢

原文：How the CSS Position Property Works – Explained with Code Examples，作者：Joy Shaheb

CSS Background 属性完全指南

Miever — Mon, 05 Jul 2021 12:00:00 +0000

今天我们将学习 CSS 中 background 的各个属性及其对应的值。我们也会学习一些简写方法。让我们开始吧！🏅

所有属性

这是我们今天要讨论的所有属性的列表。末尾的红色文本是简写。

什么是 CSS 背景（background）属性?

CSS 背景（background）属性让我们可以控制图像的大小和属性，这样我们就可以为不同大小的屏幕制作响应性强的图像。它能帮助我们创建响应式网页。

例如，

background-size 属性允许我们根据屏幕大小重置图像的宽度和高度。
background-position 属性允许我们告诉浏览器将图像放在屏幕上的何处。

以及其他的一些功能！

如何设置项目

在编码之前，你需要知道一点 HTML、CSS的相关知识，以及如何使用 VS Code。

要测试属性及其值，请遵循以下步骤：

创建一个名为 'BACKGROUND-PROJECT' 的文件夹并在 VS Code 中打开
创建 index.html 和 style.css 文件
在 VS Code 中安装 'live server'
开启 live server

HTML

在 HTML文件的 body标签中创建一个类名为 'container' 的 div。

CSS

在 CSS 中，你必须为容器设置一个高度，否则将不会看到图像。在我们的例子中，我们将它设置为 100vh，像这样：

.container{
  height : 100vh;
}

下载项目的图像

图像在我的 GitHub repository 中。以下是获得它们的方法：

请复制并访问以上链接
点击 downgit，然后粘贴你复制的链接
按照视频中的步骤

然后我们就准备好了！

让我们开始编程吧😊

CSS 中的 background-image 属性

使用这个属性，我们可以为元素添加背景图像。

在写完类名之后写如下语法：

.container{
// 将图像 路径/URL 写到如下引号内
   background-image  :  url(' ');
}

我们可以通过两种方式使用 background-image 属性：

通过图像的路径
通过具体的图像URL

如何通过图像路径使用 `background-image` 属性

下面是使用图像路径时的 background-image 语法：

.container{
// 引号中填入的相对路径 👇
  background-image: url(' ');
}

当你想在 CSS 中指定一个图像路径时，有三种情况：

当 image 和 style.css 在同一文件夹下
当 image 在下一级文件夹中
当 image 在上一级文件夹中

当 image 和 style.css 在同一文件夹时, 它看起来像下面这样。

注意 kitty.png 和 style.css 在同一父级文件夹 Background-project 中：

要设置 kitty.png 的文件路径，在 style.css 中要编写以下代码：

 .container{
   background-image : url("kitty.png");
   
   height: 100vh;
// 设置大小和停止图像拉伸
   background-repeat : no-repeat;
   background-size : contain;
 }

当图像在下一级文件夹，style.css 在上一级文件夹时，注意，下图中的kitty.png 在 Assets 文件夹中，而 style.css 在上一级文件夹中。

要设置 kitty.png 的文件路径，我们需要在 style.css 中的引号后面写一个点和斜杠，就像这样（./）。然后我们写入文件夹的名称，然后斜杠（/），最后我们写入 image 的名称，像这样：

 .container{
   background-image : url("./Assets/kitty.png");

   height: 100vh;
// 设置大小和停止图像拉伸
   background-repeat : no-repeat;
   background-size : contain;
 }

如果图像是在上一级文件夹中，我们需要返回。注意，在下图中，style.css 在 src 文件夹中，kitty.png 在 src 文件夹外。

要设置 kitty.png 的文件路径，我们要在 style.css 中的引号后面写两个点和一个斜杠（../）。然后我们写下图像的名称，像这样：

 .container{
   background-image : url("../kitty.png");

   height: 100vh;
// 设置大小和停止图像拉伸
   background-repeat : no-repeat;
   background-size : contain;
 }

如何通过链接使用 `background-image` 属性

这个非常简单，将正确的链接插入到 url() 中即可。

要使用一个是链接的图像，我们需要写以下代码：

//example ->
 .container{
    background-image : url("https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szxp3jqyjyksrep1ep82.png");

  height: 100vh;
// 设置大小和停止图像拉伸
   background-repeat : no-repeat;
   background-size : contain;
 }

休息一下

CSS 中的 background-size 属性

我们可以通过调整图像的 background-size 来调整图像大小。

在写完类名之后写如下语法：

.container{
// 我们将在这里写下值 👇
  background-size  : cover;
}

你可以通过 3 种方式使用 background-size 属性：

使用 Cover/Contain 值
设置图像宽度和高度
使用 auto

让我们从讨论 cover 和 contain 值开始

Bear 大小 : [718px X 614px]

Cover 值

为此，我们必须包含一个图像，为其设置高度，并禁止图像重复。我们在 CSS 中这样做：

.container{
  background-image : url('cute-bear.png');
  background-repeat: no-repeat;
  background-size : cover;

// 我们必须包含一个图像，设置它的高度，并像这样停止图像重复：👇
  height : 100vh;
}

当我们使用这个属性时，当我们调整窗口大小的时候，它也会将图像拉伸到整个屏幕。请看下面的视频: 👇

contain 值

步骤相同 - 我们必须包含一个图像，设置它的高度，并禁止图像重复，如下：

.container{
  background-image : url('cute-bear.png');
  background-repeat: no-repeat;
  background-size : contain;

// 在此必须设置高度
  height : 100vh;
}

即使我们调整窗口的大小，它的值也不会发生改变。请看下面的视频：

图像宽度和高度

通过 background-size 属性我们可以调整图像的宽度和高度。

以下是 CSS 中的语法：

.container{
// 这我们可以看到宽度 👇  和  👇 高度
  background-size : 200px   200px;
}

当然，不要忘记插入一张图像，设置其高度，禁止重复。代码如下：

.container{
  background-image : url('cute-bear.png');
  background-repeat: no-repeat;

// 这我们可以看到宽度 👇  和  👇 高度
  background-size : 200px  200px;

// 必须包含高度
  height : 100vh;
}

Auto sizing

当我们使用这个值的时候，图像会保持其原来的大小，不会随着我们调整窗口大小而改变。如下：

CSS 中的 background-repeat 属性

这个属性会使对应图像重复多次。

我们在写完类名之后编写如下 CSS 语法：

.container{
// 在这里改变值 👇
  background-repeat : repeat;
}

这个属性有 6 个值：

repeat
repeat-x
repeat-y
no-repeat
space
round

下面是这 6 个值中每个值的结果。注意在这个例子中 kitty 的大小是 [200px X 200px]。

现在，我们来研究一下每个值会发生什么。但在此之前，我们需要插入一张图像并使用 background-image 属性，像这样：

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat :  ; // 我们在这里写对应属性值

   height : 100vh;
}

repeat 值

通过使用这个值，我们可以沿着 X 轴和 Y 轴 重复对应图像多次，直到容器被填充满。在这，kitty 的大小是 200px x 200px。

为此，我们可以这么写：

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : repeat;

   height : 100vh;
}

repeat-x 值

顾名思义，我们可以使用这个值在容器 X 轴上重复对应图像，直到容器 X 轴被填充满。Kitty 的大小：200px X 200px。

为了实现这一点，我们这么写：

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : repeat-x;

   height : 100vh;
}

repeat-y 值

与 “repeat-x” 同理，但是是作用在 Y 轴上 的。Kitty 的大小：200px X 200px。

为了实现这一点，我们可以这么写：

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : repeat-y ;

   height : 100vh;
}

no-repeat 值

我们使用这个值可以禁止图像重复，Kitty 大小：200px X 200px。

为了实现这一点，我们可以这么写：

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : no-repeat ; 

   height : 100vh;
}

space 值

这个值在 X 轴和 Y 轴都会起作用。当我们调整窗口大小时，我们可以看到值 space 和 round 之间的主要区别。注意，当我们调整窗口大小时，我们有 空的空间：

为了测试这个值，我们可以这么写：

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : space ;

   height : 100vh;
}

round 值

这个值在 X 轴和 Y 轴都起作用。在调整窗口大小时注意图像拉伸。

跟着写 ->

.container{
   background-image : url('kitty.png');
   background-size : 200px 200px;
   background-repeat : round ; 

   height : 100vh;
}

CSS 中的 background-position 属性

此属性用于更改图像在屏幕上的位置。

语法如下：

.container{
// 这是       X 轴👇  和  👇 Y 轴
background-position : 300px  200px;
}

当然不要忘记插入一张图像，设置高度，禁止图像重复。我们使用 background-size 属性设置 kitty 的大小到 200px X 200px：

.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// 这是       X 轴👇  和  👇 Y 轴
  background-position : 300px 200px;
  height: 100vh;
}

结果如下：

你也可以使用这些值的组合：

top
left
right
bottom
percentage values

例如，让我们将 kitty 设置到屏幕右下侧。代码如下：

.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// 这是       X 轴👇  和  👇 Y 轴
  background-position : bottom right;
  height: 100vh;
}

结果如下：

计算屏幕的可用空间，% 值决定了图像的位置。代码如下：

.container{
  background-image: url("kitty-idea.png");
  background-size: 200px 200px;
  background-repeat: no-repeat;

// 这是       X 轴👇  和  👇 Y 轴
  background-position : 25% 15%;
  height: 100vh;
}

结果如下：

CSS 中的 background-origin 属性

这个属性允许我们在 CSS 盒子模型中设置图像的原点。

我们在写完类名之后编写如下语法：

.container{
// We'll write values   👇 here
  background-origin: border-box;
}

它的四个值分别是：

border-box
padding-box
content-box
inherit

在标准 CSS 盒子模型中，最外侧是 border，然后是 padding，最后是在中间的内容（content）。

下面是每个属性的结果：

为了重现这些结果：

首先我们需要一张图像，禁止重复，为容器及图像设置宽度和高度。
完成后，设置 40px 的 padding，否则我们无法看到 padding box 和 content box 的区别。
然后设置 25px 的红色边框，设置边框样式为虚线，这样我们就可以在屏幕中看到虚线边框。
设置 background-size 到 400px & 400px

代码像下面这样：

.container{
  background-image: url('cute-girl.png');
  background-repeat: no-repeat;
  background-size: 400px 400px;

// 在这里改变值来看有何不同 👇
  background-origin: border-box;
  padding: 40px;
  border: 25px solid red;
  border-style: dashed;

// 容器的宽度和高度 👇
  width : 400px;
  height : 400px;
}

休息一下

CSS 中的 background-clip 属性

这个属性与 background-origin 属性类似，最主要的区别就是 background-clip 会将图像剪切，使其适应对应的 box，然而 background-origin 会将 content 推到 box 中。

我们在写完类名之后编写如下语法：

.container{
// We'll write values   👇 here
  background-clip  : border-box;
}

其四个值分别为：

border-box
padding-box
content-box
inherit

下面是每个值的结果:

为了重现这些结果:

首先我们需要一张图像，禁止重复，为容器及图像设置宽度和高度。
完成后，我们设置 40px 的 padding，否则我们无法看到 padding box 和 content box 的区别。
然后我们设置 25px 的红色边框，设置边框样式为虚线，这样我们就可以在屏幕中看到虚线边框。
设置 background-size 到 400px & 400px

代码像下面这样：

.container{
  background-image: url('cute-girl.png');
  background-repeat: no-repeat;
  background-size: 400px 400px;

// 改变这里的值来看其变化
  background-clip: border-box;
  padding: 40px;
  border: 25px solid red;
  border-style: dashed;

// 容器宽度和高度 👇
  width : 400px;
  height : 400px;
}

CSS 中的 background-attachment 属性

这个属性允许我们在滚动时控制内容和图像的行为。

我们在写完类名之后编写如下语法：

.container{
// 我们在这里改变其值 👇
background-attachment: scroll;
}

其三个值如下：

scroll
fixed
local

当我们使用 scroll 时，图像会随着页面的滚动而滚动（这是默认的）。使用 fixed 时图像不会随着页面其余部分的滚动而移动，在屏幕中是固定的。而 local 会随着元素内容的滚动而滚动，直到滚动到内容结束。

你可以在这里看到结果。

Here's where I got this pen.

CSS 中的 background-color 属性

你可以使用这个属性填充背景颜色。

我们在写完类名之后编写如下语法：

.container{
// we'll change values 👇  here
   background-color :  red;
}

在众多值中，最受欢迎的是：

通过名称或者十六进制值对应的颜色
使用 RGB() 颜色函数
使用 linear-gradient() 函数

如何通过名称或者十六进制获得一个纯的背景颜色？

你可以使用颜色的名称来设置背景颜色，像这样：

.container{
   background-color : red;

   height : 100vh;
}

或者，你也可以使用十六进制来设置颜色，像这样：

.container{
   background-color : #ff0000; //red color

   height : 100vh;
}

你可以查看这些链接来获得更多颜色：

如何使用 RBG() 函数来设置背景颜色

我们使用 RGB() 颜色函数来设置背景颜色，像这样：

.container{
// 颜色名称是 "American River"
   background-color : rgb(99, 110, 114);

   height : 100vh;
}

或者你也可以使用 RGBA() 来设置颜色和透明度，像这样：

.container{
// 0.5 代表50%的透明度 👇 
   background-color :  rgba(99, 110, 114, 0.5);

   height : 100vh;
}

这是一个用颜色命名为 'Eton blue' 的不同不透明度的测试：

如何通过 linear-gradient() 函数来设置背景颜色？

你可以使用此函数创建一个不少于一种颜色的渐变颜色。以下是一些渐变颜色的例子：

你可以浏览这个网站来获得更多颜色相关的 CSS 代码。

让我们重新创建这个背景色：

'#22c1c3' 表示左边的颜色，'#fdbb2d'表示右边的颜色。'90deg' 告诉我们如何通过这两种颜色的梯度创建一个渐变。

代码如下：

.container{
 
   background: linear-gradient(90deg, #22c1c3, #fdbb2d);  

   height : 100vh;
}

CSS 属性的简写

下面是 background 属性的简写顺序：

对于这个案例，我们将图像 kitty.png 放在长和宽都为 200px，蓝色背景的容器中。代码如下所示：

.container{
 
   background-color : skyblue;
   background-image : url('kitty.png);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: 200px 200px;

   height : 100vh;
}

下面是使用简写的代码：

.container{
 
   background: skyblue url('kitty.png) no-repeat fixed 200px 200px;

   height : 100vh;
}

这个简写确实节省了我们的时间。如果你想要跳过某个属性，你只需要保证其余属性的顺序即可。

总结

这是你读到最后的奖励 ❤️

欢迎提出建议和批评 ❤️

Credits

YouTube / Joy Shaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

原文：Every CSS Background Property Illustrated and Explained with Code Examples 🎖️，作者：Joy Shaheb

JavaScript Async/Await 教程——通过制作冰淇淋来学习 JavaScript 异步编程

Miever — Sat, 19 Jun 2021 10:00:00 +0000

今天我们将通过建立并运行一个冰淇淋店来学习异步 JavaScript。在此过程中，你将学习如何使用：

Callbacks
Promises
Async / Await

我们将在本文中介绍以下内容：

什么是异步 JavaScript
JavaScript 中的同步与异步
Callbacks 如何在 JavaScript 中运行
Promises 如何在 JavaScript 中运行
Async/Await 如何在 JavaScript 中运行

让我们开始吧！

如果你喜欢，也可以在 YouTube 上观看本教程。

什么是异步 JavaScript？

如果你想高效地构建项目，那么这个概念很适合你。

异步 JavaScript 理论可以帮助你将大型复杂的项目分解为较小的任务。

然后你可以使用 callbacks、promises 或 Async/await 中的任何一种来运行这些小任务，获得最好的结果。

让我们开始吧!🎖️

JavaScript 中的同步和异步

什么是同步系统？

在同步系统中，任务一个接一个地完成。

想象一下，如果你只有一只手去完成十项任务，那么在同一个时间你只能做一个任务。

看看这个动图 – 这里会发生一件事：

你将看到，直到第一个图像完全加载，第二个图像才开始加载。

JavaScript 默认是同步的 [单线程]。你可以这样想 ——— 单线程意味着一次只能做一件事。

什么是异步系统?

在这个系统中，任务是独立完成的。

假设你有十个任务以及十只手，那么在同一时间，每只手都可以同时独立完成每一项任务。

看看这张动图 - 你可以看到每个图像都是同时加载的。

同样，所有的图像都以自己的速度加载，它们都不会等待其他任务先完成。

总结一下同步 JS 和异步 JS

想象三张图片在跑马拉松，在一个：

同步系统，三张图片在同一条跑道上，一个不能超过另外一个，比赛得一个接一个地完成，如果 2 号图像停止，后续的图片也会停止。

异步系统，这三张图片在不同的跑道上，它们会在自己的跑道上完成比赛，不会受其他图片的影响：

同步和异步代码示例

在开始我们的项目之前，让我们看一些例子来消除一些疑问。

同步的代码示例

为了测试同步系统，用 JavaScript 写以下代码：

console.log(" I ");

console.log(" eat ");

console.log(" Ice Cream ");

控制台的结果如下：

异步代码示例

我们假设吃冰淇淋需要两秒钟。现在，让我们测试一个异步系统。用 JavaScript 编写下面的代码。

注意： 不用担心，我们将在本文后面讨论 setTimeout() 函数。

console.log("I");

// 这将会在 2 秒钟之后显示

setTimeout(()=>{
  console.log("eat");
},2000)

console.log("Ice Cream")

控制台的结果如下：

既然我们已经了解了同步操作和异步操作之间的区别，那么让我们来创建一个冰淇淋商店。

如何设置我们的项目

对于这个项目，你只需要打开 Codepen.io 直接开始编码。或者，你可以用 VS Code 编辑器来做。

打开 JavaScript 部分，然后打开开发人员控制台，我们将编写代码并在控制台中查看结果。

JavaScript 中的回调函数是什么？

当你将一个函数作为参数嵌套到另一个函数中时，这叫作回调。

下面是一个回调的说明:

一个回调的例子

别担心，我们马上就会看到一些回调的例子。

为什么要使用回调?

在做一个复杂的任务时，我们把它分解成更小的步骤。为了根据时间（可选）和顺序在这些步骤之间建立关系，我们会使用回调。

看看这个例子：

图表包含制作冰淇淋的步骤

这些是制作冰淇淋需要的小步骤。还要注意，在本例中，步骤的顺序和计时是至关重要的，你不能只把水果切了就端上冰淇淋。

同时，如果前一个步骤没有完成，我们就不能进入下一个步骤。

为了更详细地解释这一点，让我们开始做冰淇淋店的生意。

等等......

该店将分为两部分：

储藏室里有所有的配料 - 后台
我们将在厨房里制作冰淇淋 - 前端

让我们存储数据

现在，我们要把配料存储在一个对象中。

你可以像这样在对象中存储成分：

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"]
 }

我们的其他食材在这里：

你可以像这样将这些其他成分存储在 JavaScript 对象中：

let stocks = {
    Fruits : ["strawberry", "grapes", "banana", "apple"],
    liquid : ["water", "ice"],
    holder : ["cone", "cup", "stick"],
    toppings : ["chocolate", "peanuts"],
 };

整个业务取决于客户的订单。一接到订单，我们就开始生产，然后供应冰淇淋。因此我们将创建两个函数 ->

order
production

这就是它的工作原理：

从客户那里获取订单，取得食材，开始生产，然后上桌。

我们来写一下函数。在这里我们使用箭头函数:

let order = () =>{};

let production = () =>{};

现在，让我们使用回调建立这两个函数之间的关系，如下所示：

let order = (call_production) =>{

  call_production();
};

let production = () =>{};

让我们做个小测试

我们将使用 console.log() 函数进行测试，以消除关于如何建立这两个函数之间的关系的疑问。

let order = (call_production) =>{

console.log("Order placed. Please call production")

// function 👇 is being called 
  call_production();
};

let production = () =>{

console.log("Production has started")

};

为了运行测试，我们将调用 order 函数。我们将添加第二个函数名为 production 作为它的参数。

// name 👇 of our second function
// 将第二个函数命名为 👇
order(production);

下面是控制台中的结果：

休息一下

到目前为止一切都很好，休息一下吧!

清除 console.log 日志

保留这段代码并删除所有的东西，不要删除我们的 stocks 变量。在我们的第一个函数中，传递另一个参数，以便我们可以接收订单，即水果名：

// 函数 1

let order = (fruit_name, call_production) =>{

  call_production();
};

// 函数 2

let production = () =>{};


// 触发 👇

order("", production);

下面是我们的步骤，以及执行每个步骤所需的时间。

图表包含制作冰淇淋的步骤

在这个图表中，你可以看到第一步是下订单，这需要 2 秒。第二步是切水果（2秒），第三步是加水和冰（1秒），第四步启动机器（1秒），第五步是选择容器（2秒），第六步是选择配料（3秒），以及第七步，也就是最后一步，端上冰淇淋，这需要 2 秒。

要建立计时，函数 setTimeout() 非常好，因为它也使用一个回调函数作为参数。

setTimeout() 函数的语法

现在，让我们使用这个函数来选择水果：

// 函数 1

let order = (fruit_name, call_production) =>{

  setTimeout(function(){

    console.log(`${stocks.Fruits[fruit_name]} was selected`)

// Order placed. Call production to start
   call_production();
  },2000)
};

// 函数 2

let production = () =>{
  // blank for now
};

// 触发 👇
order(0, production);

下面是控制台中的结果：

注意： 2秒后才会显示结果。

如果你想知道我们是如何从 stock 变量中采摘草莓的，下面是代码：

不删除任何代码。现在，我们将使用以下代码开始编写生产函数。我们将使用箭头函数。

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
  },0000)

};

结果如下：

我们将在现有的 setTimeout 函数中嵌套另一个 setTimeout 函数来切水果：

let production = () =>{
  
  setTimeout(()=>{
    console.log("production has started")


    setTimeout(()=>{
      console.log("The fruit has been chopped")
    },2000)


  },0000)
};

结果如下：

如果你还记得，这是我们的步骤：

图表包含制作冰淇淋的步骤

让我们通过在另一个函数中嵌套一个函数来完成我们的冰淇淋生产 - 这也叫作回调，还记得吗？

let production = () =>{

  setTimeout(()=>{
    console.log("production has started")
    setTimeout(()=>{
      console.log("The fruit has been chopped")
      setTimeout(()=>{
        console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} Added`)
        setTimeout(()=>{
          console.log("start the machine")
          setTimeout(()=>{
            console.log(`Ice cream placed on ${stocks.holder[1]}`)
            setTimeout(()=>{
              console.log(`${stocks.toppings[0]} as toppings`)
              setTimeout(()=>{
                console.log("serve Ice cream")
              },2000)
            },3000)
          },2000)
        },1000)
      },1000)
    },2000)
  },0000)

};

控制台结果如下：

感到疑惑吗？

这叫作回调地狱，它看起来像这样（还记得上面的代码吗）：

回调地狱图解

解决方案是什么?

如何使用 Promise 来避免回调地狱

Promises 的发明是为了解决回调地狱的问题和更好地处理我们的任务。

休息一下

先休息一下!

这就是 promise 的样子

promise 的格式说明

让我们一起来剖析 promise。

promise 周期的图解

如上图所示，一个 promise 有三种状态：

Pending： 这是初始阶段，这里什么也没有发生。你可以这样想，你的客户正在慢慢地给你下订单，但是他们还没有点任何东西。
Resolved： 这意味着你的顾客已经收到了他们的食物并且很高兴
Rejected： 这意味着你的顾客没有收到他们点的单并离开了冰激凌店

让我们将 promise 应用到我们的冰淇淋生产案例研究中。

等等

首先，我们需要了解另外四件事 ->

时间和工作的关系
Promise 链
错误处理
.finally 函数

让我们开始我们的冰淇淋店，一步一步地理解这些概念。

时间和工作的关系

如果你还记得，这就是我们制作冰淇淋的步骤和时间

图表包含制作冰淇淋的步骤

为了实现这一点，让我们在 JavaScript 中创建一个变量：

let is_shop_open = true;

现在创建一个名叫 order 的函数，然后传两个名叫 time, work的参数：

let order = ( time, work ) =>{

  }

现在，我们要向客户发起 promise，"我们将给献上冰淇淋"，如下 ->

let order = ( time, work ) =>{

  return new Promise( ( resolve, reject )=>{ } )

  }

我们的 promise 有两个部分：

Resolved - 用户拿到了冰激凌
Rejected - 用户没有拿到冰激凌

let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      resolve( )

    }

    else{

      reject( console.log("Our shop is closed") )

    }

  })
}

让我们在 if 语句中使用 setTimeout() 函数在 promise 中添加时间和工作因素。

注意: 在现实生活中，你也可以避免时间因素，这完全取决于你的工作性质。

let order = ( time, work ) => {

  return new Promise( ( resolve, reject )=>{

    if( is_shop_open ){

      setTimeout(()=>{

       // work is 👇 getting done here
        resolve( work() )

// Setting 👇 time here for 1 work
       }, time)

    }

    else{
      reject( console.log("Our shop is closed") )
    }

  })
}

现在，我们要用新创建的函数开始制作冰淇淋。

// Set 👇 time here
order( 2000, ()=>console.log(`${stocks.Fruits[0]} was selected`))
//    pass a ☝️ function here to start working

2 秒后的结果是：

很棒！

Promise 链

在这个方法中，我们使用 .then 处理后续的程序：

使用 .then 处理函数的 promise 链说明

当我们的 promise 被 resolve 时, .then 处理函数返回一个 promise。

例子如下:

让我说得简单点：这类似于给某人指示，你告诉别人“先做这个，然后做那个，然后做其他的事情，然后…”，然后……，然后……”等。

他的首要任务是我们原始 promise
一旦完成了一小部分工作，剩下的任务就返回了新的 promise

让我们在项目中实现这一点。在代码的底部编写以下代码行。

注意: 不要忘记在 .then 函数中写 return 。否则，它将不能正常工作。如果你很好奇，试着在我们完成这些步骤后去掉返回值：

order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

结果如下：

使用相同的系统，让我们完成我们的项目：

// step 1
order(2000,()=>console.log(`${stocks.Fruits[0]} was selected`))

// step 2
.then(()=>{
  return order(0000,()=>console.log('production has started'))
})

// step 3
.then(()=>{
  return order(2000, ()=>console.log("Fruit has been chopped"))
})

// step 4
.then(()=>{
  return order(1000, ()=>console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`))
})

// step 5
.then(()=>{
  return order(1000, ()=>console.log("start the machine"))
})

// step 6
.then(()=>{
  return order(2000, ()=>console.log(`ice cream placed on ${stocks.holder[1]}`))
})

// step 7
.then(()=>{
  return order(3000, ()=>console.log(`${stocks.toppings[0]} as toppings`))
})

// Step 8
.then(()=>{
  return order(2000, ()=>console.log("Serve Ice Cream"))
})

结果如下：

错误处理

当出现错误时，我们需要一种处理错误的方法。但首先，我们需要了解 promise 周期。

promise 周期说明

为了捕获错误，让我们将变量改为 false。

let is_shop_open = false;

也就是说我们的店关门了，我们不再卖冰淇淋给顾客了。

为了处理这种情况我们使用 .catch 函数，类似 .then，它也返回一个promise，但只有当我们最初的 promise 被 reject 时才会执行。

这里有一个小提示：

.then 在 promise resolved 时候被执行
.catch 在 promise rejected 时候被执行

到代码最底部，编写以下代码：

记住在.then 和 .catch之间不能有任何东西。

.catch(()=>{
  console.log("Customer left")
})

结果如下：

关于这段代码，有两点需要注意：

第一个信息是从 reject() 部分来的
第二个信息是从 catch() 部分来的

如何使用 .finally() 函数

有一个叫作 “finally” 的函数，不管我们的 promise 是被 resolve 了还是被 reject 了，它都会被执行。

例如: 不管我们是没有顾客还是有 100 个顾客，我们的店都会在一天结束的时候关门。

如果您想对此进行测试，请在最下面编写以下代码：

.finally(()=>{
  console.log("end of day")
})

结果如下：

请大家欢迎 Async/Await~

Async/Await 如何在 JavaScript 中运行

这应该是编写 promise 的更好方式，它可以帮助我们保持代码的简单和干净。

你所要做的就是在任何常规函数之前写 async 关键字，它就变成了一个 promise。

先休息一下

让我们来看一看：

JavaScript 中 Promises vs Async/Await

在 async/await 之前，为了写一个 promise，我们这样写:

function order(){
   return new Promise( (resolve, reject) =>{

    // Write code here
   } )
}

现在使用 async/await，我们可以这么写：

//👇 神奇的关键字
 async function order() {
    // Write code here
 }

等等...

你必须理解->

如何使用 try 和 catch 关键字
如何使用 await 关键字

如何使用 Try 和 Catch 关键字

我们使用 try 关键字来运行代码，同时使用 catch 来捕获错误。这和我们看 promise 时看到的概念是一样的。

让我们来比较一下。我们来看一个小 demo，然后开始编码。

JS 中的 Promise -> resolve 和 reject

我们在 resolve 中这样使用 resolve 和 reject：

function kitchen(){

  return new Promise ((resolve, reject)=>{
    if(true){
       resolve("promise is fulfilled")
    }

    else{
        reject("error caught here")
    }
  })
}

kitchen()  // run the code
.then()    // next step
.then()    // next step
.catch()   // error caught here
.finally() // end of the promise [optional]

JS 中的 Async/Await -> try, catch

当我们使用 async/await 时，可以这么写:

//👇 神奇的关键字
async function kitchen(){

   try{
// 我们来制造一个假问题     
      await abc;
   }

   catch(error){
      console.log("abc does not exist", error)
   }

   finally{
      console.log("Runs code anyways")
   }
}

kitchen()  // 调用

不要慌，我们接下来将讨论 await 关键字。

现在希望你理解了 promise 和 async/await 之间的区别了。

如何使用 JavaScript 的 Await 关键字

关键字 await 使 JavaScript 等待，直到一个 promise reslove 时才会返回它的结果。

如何在 JavaScript 中使用 await 关键字

我们回冰淇淋店去吧。我们不知道顾客更喜欢哪种配料，巧克力还是花生，所以我们需要停止机器，然后去问顾客他们想在冰淇淋上加什么。

注意这里只有我们的厨房被停止了，但是我们在厨房外的员工仍然会做这样的事情:

洗餐具
清洁桌子
点单，等等

一个 Await 关键字代码示例

让我们创建一个小 promise 来询问要使用那种配料，这个过程需要 3 秒。

function toppings_choice (){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{

      resolve( console.log("which topping would you love?") )

    },3000)
  })
}

现在，让我们首先使用 async 关键字来创建 kitchen 函数。

async function kitchen(){

  console.log("A")
  console.log("B")
  console.log("C")
  
  await toppings_choice()
  
  console.log("D")
  console.log("E")

}

// 触发函数

kitchen();

让我们在 kitchen() 调用下面添加其他任务。

console.log("doing the dishes")
console.log("cleaning the tables")
console.log("taking orders")

结果如下：

我们走出厨房问我们的顾客，“你想要哪种配料？”，与此同时，还有其他事情要做。

一旦他们选好了配料，我们就进入厨房，完成任务。

注意

当使用 Async/Await 时，你也可以使用 promise 的核心部分 .then、.catch 和 .finally函数。

我们再开一家冰淇淋店吧

我们要创建两个函数 ->

kitchen: 制作冰激凌
time: 分配好每一项小任务所需要的时间

让我们开始吧！先创建时间函数:

let is_shop_open = true;

function time(ms) {

   return new Promise( (resolve, reject) => {

      if(is_shop_open){
         setTimeout(resolve,ms);
      }

      else{
         reject(console.log("Shop is closed"))
      }
    });
}

现在，让我们创建我们的厨房：

async function kitchen(){
   try{

     // instruction here
   }

   catch(error){
    // error management here
   }
}

// Trigger
kitchen();

让我们来做个小说明，看看我们的厨房函数是否正常：

async function kitchen(){
   try{

// 执行这 1 个任务所花费的时间
     await time(2000)
     console.log(`${stocks.Fruits[0]} was selected`)
   }

   catch(error){
     console.log("Customer left", error)
   }

   finally{
      console.log("Day ended, shop closed")
    }
}

// 触发
kitchen();

当商店开门时，结果是这样的：

当商店关门时，结果是这样的：

到目前为止一切顺利。

让我们完成我们的项目。

下面是我们的任务列表：

图表包含制作冰淇淋的步骤

首先，开张：

let is_shop_open = true;

现在在 kitchen() 函数中编写步骤：

async function kitchen(){
    try{
	await time(2000)
	console.log(`${stocks.Fruits[0]} was selected`)

	await time(0000)
	console.log("production has started")

	await time(2000)
	console.log("fruit has been chopped")

	await time(1000)
	console.log(`${stocks.liquid[0]} and ${stocks.liquid[1]} added`)

	await time(1000)
	console.log("start the machine")

	await time(2000)
	console.log(`ice cream placed on ${stocks.holder[1]}`)

	await time(3000)
	console.log(`${stocks.toppings[0]} as toppings`)

	await time(2000)
	console.log("Serve Ice Cream")
    }

    catch(error){
	 console.log("customer left")
    }
}

结果如下：

总结

恭喜你读完了本文！在本文中，你可以了解到：

同步和异步系统之间的区别
异步 JavaScript 使用 3 种机制（callbacks、promises 和 Async/Await）

这是你阅读到最后的奖励。❤️

欢迎提出建议和批评

YouTube / Joy Shaheb

LinkedIn / JoyShaheb

Twitter / JoyShaheb

Instagram / JoyShaheb

致谢

原文：JavaScript Async/Await Tutorial – Learn Callbacks, Promises, and Async/Await in JS by Making Ice Cream 🍧🍨🍦，作者：Joy Shaheb

初入职场的开发者如何自我提升

Miever — Fri, 30 Oct 2020 01:38:00 +0000

前言

如果你正在阅读这篇文章，你可能刚刚开始做第一份工作——祝贺你，获得第一份工作是你在技术路上遇到的最为困难的事情之一，你一定为此付出了很多努力。

或许你还没有工作，但是你想了解可以从第一份工作中期待些什么。

不管怎么样，在这篇文章中我将阐述一些常见的担忧和问题，比如在工作中应该期待什么，以及怎样在事业上成为一名成功的开发者。

以下是我们将要讲的内容：

在工作中可以期望什么（前几天/几周）
你的短期到中期计划
成功的心态
如何成为一名优秀的初级开发者

在工作中可以期待什么

这一天终于到来了，你第一次作为一名新的开发者走进办公室（或者参加早会）。即使你很紧张，也要记住和适应你的第一天。这是非常激动人心的时刻！

你工作的第一天很可能做流程上的事情：配置电脑，适应和培训，和一些人力资源方面的事情（如银行信息，保险等）。

让新开发者在第一天就向产品中 push 一个小实践是一种常见的做法。通常是一些小的任务，比如在公司网页上添加自己的名字和照片，或者修复网页中的一个错字。这会测试你的计算机环境是否配备良好，给你一点成就感，以及让你参与到开发团队中。

你的公司希望你成功

对于一名新入职的开发者，录用你的公司知道你目前的知识和技能的局限，他们知道为了你的成长，他们需要投入大量的时间去教你和训练你。

记住，公司想要你成长！他们站在你这边，会投入大量的精力来发现、面试、录用你。对公司来讲，无论是在时间和金钱上都是一个昂贵的过程。他们不会把你晾到一边——那将是他们投资你的一种糟糕的方式。有些技能你一开始就能掌握，但是有些技能在专业环境之外获取是非常困难的（也不是不可能）。

既然这是你的第一份工作，可能你从来没有与使用源代码管理工具或者维护生产应用程序的大团队合作过——没有关系！这些技能在生产环境中是很容易学到的。

你的第一天/周

当你的电脑设置好了，你可以使用所有你所需要的工具。你的第一个任务可能是改进一个小功能或者处理一个小 bug，这些只是让你在不同的项目中试水。

除了纯粹的技术知识之外，每个公司都有你需要掌握的领域知识或者“业务逻辑”（公司做什么产品或服务，以及是如何做的）。

如果公司有多种产品，他们可能会在每个源代码中给你一些小任务让你去探索这些产品。可能他们会在团队中给你分配一个带你或者至少在前几周为你解答问题的导师。

在最初的几周里，你只有一个目标：学习，学习，再学习。

学习你正在使用的技术，学习公司是如何运转的，学习怎样和你团队的成员协作。在这一阶段你的工作产出不重要，重要的是你的成长速度。

接触生产源代码

当你开始接触公司的代码库，你可能会觉得非常困难。这是非常正常的——写代码比读代码容易得多。

生产代码跟你学过的教程或者练手的项目有很大不同。

首先，生产代码可能存在了数年，期间由不同的人进行开发，他们有自己的编程风格并且犯过不同的错误。

此外，软件依赖或者插件可能比你以前遇到的更多，你可能需要处理一些教程文档中没有讲过的不常发生的事例（比如错误处理）——这是一个真正的应用程序。

一开始你可能会不知所措，但是阅读别人的代码是你必须提升的技能，你会在你的整个职业生涯中用到它（在文章末尾，我会给你一些关于此技能的建议和帮助）。

最后，不要害怕寻求帮助！你的同事会支持你，在过去的某一个时候，他们可能也在问相同的问题。

对于新开发者的期待

首先，公司并不会指望你能够迅速适应，去开发新功能。他们知道你需要时间去学习你还没有掌握好的技术，比如熟悉源代码，如何有效进行团队合作。

你的领导可能会与你碰面来制定 30/60/80 天计划，如果他们不这样做，你可以主动询问！任何领导都会欣赏你拥有自己的工作规划。

在起初 30 天，你可能通过写一个小需求或者处理一些小 bug 来熟悉公司产品和代码。60 天的时候，你可能会做稍微大一点的功能以及 bug 修复。到 90 天的时候，范围会扩大一点，但是他们还是不会期望你独自负责大的功能。

公司希望你能不断学习和吸收身边的信息。你不可能什么都知道，也不可能在 90 天后都知道，没关系，一天天慢慢来。

新开发者的思维模式

进入一家新的公司，有很多东西你没法控制，但是有一个你可以控制的非常重要的事情，那就是你的心态。 你每天所想、实践以及你如何内化发生在你身边的事情将决定你的成功。

有时候你会困惑，有时候你会感到不知所措，有时候你甚至会怀疑你是否能做到（我确实这么想过）。你如何消化这些想法很重要。记住，这些问题不仅只有你会遇到，所有新开发者都要面对。保持冷静，你会成功的。当你遇到令你困惑或沮丧的事情时，端正你的想法：这个障碍是一个学习的机会。

这是一个了解新事物和成长的机会。在这个过程中你可能会很痛苦，但不久之后，你会成为一名好的开发者。这就是在面对新事物时需要面对的现实。

不要说：

“我今天被困住了 10 次”

而应该尝试说：

“今天我有 10 次学习的机会”

这是非常有力的转变，你的同事会看到，你的工作表现也会证明。

保持头脑清醒，不要让失败的感觉悄悄潜入，这不仅能帮助你在这种情况下表现得更好，而且还能在你摆脱这种情况时增加你的知识和技能。深呼吸，放轻松，寻求帮助并坚持下去。

在一天结束的时候，轻松地耸耸肩。在当天你离开办公室或者关闭电脑的时候，把它忘了。开始全新的第二天，准备迎接新一天的挑战。

还有，记住庆祝一路走来的小的成功！随着时间的推移，这些小成功会积累成为巨大的成功之山。

还有一件重要的事情你要记住：给你自己犯错误的空间。你会搞乱代码，你会做一些糟糕的数据库更新（我就犯过这种错）——这些都是可以恢复的，不是世界末日，也不是你工作的结束。任何有经验的开发人员都会犯这些错误，这只是过程的一部分。

新开发者最好的技能

你可能没有意识到，作为一名新的开发人员，最好的技能是学习如何去学习。

你已经学会了如何处理困难、复杂、模糊的问题，并将它分成块，一步一步地解决。

无论你学 JavaScript、React、Ruby 或者其他任何东西，你学到最好的事情是如何自学。多利用你掌握的这个技能并每天都实践它。

拥抱自己的成长

对于处于职业生涯任何阶段的开发人员来说，这可能是最重要的：你的事业是你自己的，你必须拥抱它，你必须管理自己的成长。

有时你的公司、职位或老板会帮助促进你成长，但最终还是取决于你。大多数公司都有某种固定的审查程序，可能是季度或年度。如果他们有，那很好。如果没有，管理自己的成长！定期征求上司的意见，并按他们说的去做。如果有人提到了你从未听说过的东西，问问他们，或者自己去研究一下。

“微小收益的力量”

https://jamesclear.com/marginal-gains

我最喜欢的书之一—— James Clear 的《Atomic Habits》，有一个非常棒的图表标题叫 “微小收益的力量”。这是一个简单的图表，它显示了每天 1% 的提高和 1% 的下降之间的差异。

如果你每天都有 1% 的提高，一年之后，你会比年初好 38 倍！这就是“微小收益”的力量，对于成为一名伟大的软件开发人员来说也是如此。

每天你都有机会学习新东西，不管它有多小，也许是一个你不知道的数组上的新函数，一种不同的 CSS 结构化方法，一个新的文本编辑器快捷方式，或者是一些全新的东西，比如学习 SQL 以及如何在数据库级别存储数据。

无论如何，每天提高 1%（大多数日子你会做得更多），你职业生涯最初几年的成长将是惊人的。

每天一页

我曾经在一档程序员播客上听说过一个故事，讲的是一位为 Ruby 维护pg gem 的人。pg gem 是 Ruby 和 Postgresql 之间的一个接口。这是一个相当严肃的事情，因为大多数 Ruby 开发人员每天都在使用它。

他如何成为 gem 的维护者的故事非常有趣。他说刚开始的时候，他会打开 Postgresql 文档并阅读一页——每天只读一页。

随着时间的推移，他对 Postgresql 有了广泛的了解，并开始为 pg gem 做贡献。过了一段时间，他成为了 gem 的维护者。

这是积累点滴的完美例子——每天一页就够了。我们每个人都可以做到这一点，我鼓励你将同样的理念应用到你正在使用的任何语言或系统中。

实践出真知

你以前可能听说过这个短语：实践出真知。

我的钢琴老师使用了不同的短语：正确的实践出真知。

我认为他说得对，我可能会用错误的方式练习钢琴，如：用糟糕的技术，马虎，没有稳定的节奏，结果就是马虎的钢琴演奏。

重要的不只是实践，而是你如何实践。我可以一遍又一遍地练习一首歌曲的第一小节，并把它写得很完美。但如果我只关注第一小节，我就永远学不会这首歌。我可能可以以世界级钢琴家的水平演奏这首歌的第一小节，但我想弹钢琴，所以我不得不学习整首歌。

这对于开发来说是一个完美的对比。你实践开发的方式（你的日常习惯、开发方法以及路线）决定了你将成为什么样的开发人员。

一开始你会犯很多错误（每个人都会犯），但是如果你对你的工作上心，你就会发现你有可以改进的地方。这些都是完美的练习时刻，是学习新东西或以更好的方式做某事的机会。

当你从现在开始回顾十年的职业生涯时，你想要的应该是十年的成长、实践和学习，而不是一年的成长、实践和学习，经历十次。

所以去问那些愚蠢的问题，问那些可能显而易见的问题。当别人提到一些你不知道的事情时，大胆地问“那是什么”，我希望他们能以一种和蔼可亲的方式回应。无论如何，你都要做好学习的准备。

这一切都会见证你的成长。

T 字型的人

一个 T 字型的人

在你的开发生涯开始时，你可以从了解许多方向中获益，因此你希望努力学习多个学科的知识。

如果你立志成为一名全栈工程师，你可能需要掌握 HTML、CSS、JS、一种你想使用的后端语言、SQL、Git 等。在每一个方向中都有比较容易获取的知识，你可以慢慢进行吸收。

随着时间的推移，你会发现你最喜欢哪种开发，可能是前端、后端、数据库、运维、设计或者这些和其他的一些组合。

随着你事业的发展，你会开始成为 T 字型人才。T 字型人才，就像字母 “T”，指对很多事物有广泛而浅显的了解，而在一些领域有丰富的知识和经验。

这种深刻的认识需要一段时间来建立，每一步都要比前一步付出更多的努力，这正是你在精通一门学科时的事实。在开始的时候，在广泛的学科领域里，掌握所有那些初学者容易掌握的东西。

拥有 T 字型的能力将帮助你成为一个更好的开发者了解数据库模式的前端开发人员，或者了解如何在前端将数据库表用作模型的后端开发人员，将比那些只局限于自己领域的人更有见识，也更能成为好的团队成员。

在开始阶段，对开发的各个方面的小尝试也有助于找到吸引你的东西，并给你一个软件世界中更大的蓝图。

追随你的兴趣，保持求知欲!

给新开发者的一个建议

现在我们已经介绍了你的期望以及如何考虑它们，这里有一些实用的技巧可以帮助你成为一名优秀的开发人员，一名团队成员喜欢与之共事的开发人员。

#1 沟通是非常非常重要的

第一天上班时，你可能没有令人惊讶的开发知识和技能，但你可以有令人惊讶的沟通技巧。

作为一名新开发人员，你将需要大量的帮助和指导。没关系，这里有一个如何有效地寻求帮助的小窍门。

被困住是令人沮丧的（对我来说就是这样）。这种挫败感很容易将你压倒，你可以向旁边的同事请教（或者通过电子邮件和聊天应用）。

类似：

“我困住了”

“显示错误”

“页面不能加载”

现在退一步，从你请求帮助的那个人的角度来看待这个问题。像“页面无法加载”这样的信息对这个人毫无帮助。没有上下文，没有信息可以让他们继续。事实上，他们还得向你获取更多的信息。这样做效率非常低，而且会让试图帮助你的人非常沮丧。

寻求帮助的一个更好的方式是像填词游戏一样思考（如果你还记得 freeCodeCamp 课程中有一道这样的题目的话）：

我正在做 _____，但是在我尝试_____的时候，却发生了____。

我试着_____，_____和_____，我发现_____ 和 _____。

举个例子：

我正在处理用户密码重置错误的 bug，但是当我尝试生成密码重置链接时，用户的令牌已经为空。

我看过令牌是在哪设的，我发现令牌在数据库中，但是这个令牌在文件 Y 的 X 行上丢失了。

如果你给别人发了上面的信息，他们可以理解:

你在做什么
问题是什么
你已经试过了什么
问题发生在哪

对于你寻求帮助的人来说，这是一个丰富的信息。他们会非常感激你给了他们如此清晰的信息，并且你已经尝试自己去解决它，这让他们知道你尊重他们的时间，而不是你在等待他们简单的施舍。

寻求帮助并没有错，但是如果有人只是帮你解决问题，他们实际上是在剥夺你学习和成长的机会。

这并不是说你必须解决这十个问题，然后你就再也不会遇到问题了。作为一名开发人员，你每天都会遇到问题。所以最好的结果是，他们给你足够的帮助让你摆脱困境，但允许你自己独自解决问题。

#2 用好谷歌

就像在武术中施展技能一样，作为一名开发人员，随着时间的推移，你将施展谷歌的才能，这就是用谷歌搜索答案的艺术。这是每个有经验的开发人员都拥有的一项真正的技能，它是随着时间的推移而开发出来的。

有时，你只需要直接键入你所遇到的问题（这对报错非常有效）：

有时粘贴整个报错信息就可以解决

有时，搜索准确的错误信息将产生正确的结果，正如上面所做的。你遇到了一个技术问题，其他人也遇到过完全相同的问题。

但有时你需要对搜索信息进行一些编辑，以删除特定项目的信息：

有太多特定于项目的信息你不会得到一个满意的结果

如上图，谷歌从未在 gotta_catchem_all.rb 文件中见过 whos_that_pokemon_its_pikachu() 这个函数（但是我仍然还在搜索它）。删除特定项目的信息并添加通用信息将会返回更好的结果。

基本的通用错误

#3 尝试使用计时器

作为一名新开发人员，你会遇到很多困难。可能会出现以前你从未见过的错误消息，如何处理这些情况将决定你作为开发人员的成长速度。

尽管这可能是非常令人沮丧的时刻，这些是你学习和成长的时刻。你不能通过一遍又一遍地做同样的工作来学习，只有在经历坎坷的过程中才能成长。

当你遇到其中一个问题时，请花些时间尝试并自己解决它。有些公司会把这句话作为培训的一部分来告诉你，比如“30 分钟后再寻求帮助”。在其他一些公司，虽然没有这么明确，但这个提示依然适用：尽你所能。如果你还是卡住了，那就寻求帮助。

这不仅让你有机会弄清楚，而且也是尊重在专注于自己的工作的团队成员的时间。因为一些你本可以很快意识到的事情而去打断别人，这将对团队来说是一种净损失。

所以好好尝试一下，然后再寻求帮助!

下面是成为一名优秀的新开发人员的秘诀：总是重置计时器。

假设你被困住了，尝试了 30 分钟，然后再去寻求帮助。下次你被困住的时候，去寻求帮助之前，再试 30 分钟。

显而易见，当你觉得你遇到了一个又一个问题的时候，你会感到沮丧，你会想要在遇到下一个问题之前寻求帮助，这是很自然的。

深呼吸，去快走一会儿，用全新的视角来看待每一个问题。

（当然，说起来容易做起来难！）

#4 记住放松和休息

记住，当事情开始让你感到难以承受时，要休息一下。

去散个步，接杯水，如果可以的话，放一个晚上。有时候仅仅睡一觉或者动一动就可以帮助你重新调整自己。

请记住，每个开发人员都曾经历过你这种情形，你会度过难关的。

在某种程度上来讲，开发总是令人沮丧，你永远不会停止犯错或者不再遇到问题。但随着时间的推移，你会越来越擅长处理这些问题，你解决这些问题的信心也会增强，所以这些问题对你的困扰会越来越少。

#5 小黄鸭调试法

你是否曾向某人发邮件或短信描述你遇到的一个问题，然后在你点击发送之前你已经知道了解决方法？在软件世界里有这样一个短语：小黄鸭调试法。

这个名字是引用了《实用程序员》一书中的一个故事。在这个故事中，一个程序员带着一只橡皮鸭，通过强迫自己一行一行地向橡皮鸭解释代码来调试他的代码。

通过写电子邮件或与另一个人交谈，你被迫整理整个上下文逻辑，以便让另一个人理解发生了什么。

用这种方式解释这个问题， 你自己必须有逻辑地思考和整理。仅仅是试着为别人准备上下文的行为就会让你从不同的角度来思考问题，很多时候你自己就会找到解决方案。

回到尝试使用计时器，在你寻求帮助之前，试着用你没有发送的邮件解释问题的概要。你很有可能在不打扰别人的情况下对这个问题有了新的见解，最糟糕的情况是，你有一封很好的邮件或聊天信息要发送给他们（我也见过很多人把真正的橡皮鸭放在桌子上！）

#6 记笔记

这个建议可能看起来很明显!

当你第一次加入一家公司的时候，你会接触到很多不同的东西：源代码、产品、人、业务逻辑，不可能把这些全部记住，所以把这些东西写下来。

当我开始我的第一份工作时，我的老板告诉我他可以向我解释任何事情，但是他不想解释两次。那时候我明白，但 8 年后的今天我真才真正明白，这是在尊重你的团队成员以及他们的时间。

如果他跟我解释了某件事情，我却忘了，我们就浪费了彼此的时间，所以只能再问他一遍。在他的建议下，我甚至开始在我的显示器上贴物理便利贴，记下我想经常遇到和需要记住的事情，就像：

尝试 30 分钟
在请求 PR 评审之前，检查构建是否通过
确保你有最新的代码

#7 每天与冒名顶替综合症作斗争

如果你不知道什么是冒名顶替综合症，你的脑海里这样想:

我不属于这里，我是一个冒名顶替者。除了我，其他人都知道这一点。

这是一种你每天都要与之抗争的心态。作为一名开发人员，会有令人沮丧的时候，但是你已经面对过挫折并努力克服了它。每个开发人员都有这种感觉，而且这种感觉也会过去的。

实际上，冒名顶替综合症看起来更像这样:

冒名顶替综合症

“高级”和“初级”开发者之间的一个关键区别

当然，高级开发人员比新开发人员有更多的知识和经验，但这并不是他们的根本区别。一个高级开发人员有一个解决问题体系。

当我第一次开发时，我想我最终会停止犯错误——停止遇到报错。

相反，我每天仍然会犯很多错误：错误的语法，错误的文件，错误的函数。

我没有停止犯错误——我只是很快就修复了。

这是一种随着时间发展而来的技能，需要有意识地解决问题。

这里有一些关于如何构建这个体系的提示。

5个调试技巧

#1 不要盲目敲代码

我看到许多新开发人员遇到问题时会开始疯狂的开始改代码（我是新开发者的时候也这么做过）。他们没有系统的代码评估过程，只是对代码做大量的修改，看看这样是否能解决问题。

这是一个很坏的习惯，这样做只会犯更多的错误。你应该做的是:

#2 读错误信息

这个建议似乎很明显，但实际上是在读取信息。错误是什么？发生这个错误的文件是什么？错误产生在哪一行？这些都是至关重要的信息。

如果你不愿意快速更改代码的话，你可以直接跳到错误产生的地方。

这是有经验的开发人员的方式：读取消息然后直接找到问题所在。

这样做会为你节省大量的时间和精力。

#3 不要把时间浪费在不可能的事情上（或者是至少不可能的事情）

我看到的新开发人员会经常做这样一件事：他们在代码中遇到错误，然后在代码中发现了一些他们认为是问题的东西，然后不相信这有问题。举个例子：

"我发现问题出现在第 14 行，它会检查 is_admin" 变量是否为真，但是它不是真，然而用户确实是管理员！

他们是这么思考这个问题，“这怎么可以！” ，而不是 “为什么会这样？”

有时候你会遇到核心语言或框架的 bug，但在 99.9% 的情况下， 你可能是做错了什么，或者情况并不像看上去的那样。

有些事并不像看上去的那样，被不可能的事情吓到只是在浪费时间。开始解决问题吧，不要在眼前不可能展开的事情上花时间，质疑你对情况的假设。

#4 “当有疑问时，打印更多的信息”

我不知道最初是谁说的，但这是最有效的调试技术之一。当你不知道发生了什么情况时，开始在你认为发生问题的地方打印程序的相应信息。

user 变量中有什么？HTTP 请求的响应是什么？在这种情况下，我们使用了 if 或 else 分支吗？我们调用过这个函数吗？是否在此页面？

我见过无数的开发人员尝试调试和修复一个问题的时候（我自己也做过很多次），他们甚至没有在正确的文件中进行调试。快速打印或者在“控制台”中可以显示你实际上正在查看实际运行的代码。

#5 一次只做一件事

每个新开发人员都会犯的一个常见错误是：一次做的事情太多了。

他们想要编写 30 分钟的代码，单击运行，然后查看结果。他们发现，花了 30 分钟来编写 bug 和错误，现在修复起来简直是一场噩梦。

当我在应用程序中新建一个页面时，我做的第一件事就是把

hi

标签放到页面上。我想确定我所有内部代码设置是正确的，以至我可以在页面上看到hi。我一次只做一件事。

一次只做一件事。在页面上看到 “hi” 显示。接下来获取用户输入，接下来保存输入。如果你一步一步来，你就知道问题发生在哪里，该如何解决。

即使在从事开发工作 8 年后，我仍然是一步一步来。我知道我将会犯很多错误，而且我想立即知道这些错误在何时何处发生的。

总结

读完这篇文章，你已经了解了很多，但是你还有很多知识得学，很多技能需要提升，也有很多乐趣和有益的工作在等着你。

抬头挺胸，记得要休息。每天提高 1%，一年之后你就会对结果感到惊讶。

感谢阅读！

原文：How to Become an Outstanding Junior Developer，作者：John Mosesman

Miever - freeCodeCamp.org

图文详解 CSS Position 属性

目录

你可以在 YouTube 上观看本教程。

CSS 中的 position 属性

项目搭建

HTML

CSS

CSS 中的静态定位

CSS 中的相对定位和绝对定位

看如下 2 个例子

CSS 中的相对定位和绝对定位

HTML

CSS

固定定位（Fixed）

固定定位的例子

粘性定位（Sticky）

粘性定位示例

总结

欢迎提出建议和批评 ❤️

感谢

CSS Background 属性完全指南

目录

所有属性

什么是 CSS 背景（background）属性?

如何设置项目

HTML

CSS

下载项目的图像

CSS 中的 background-image 属性

如何通过图像路径使用 background-image 属性

如何通过链接使用 background-image 属性

休息一下

CSS 中的 background-size 属性

Cover 值

contain 值

图像宽度和高度

Auto sizing

CSS 中的 background-repeat 属性

repeat 值

repeat-x 值

repeat-y 值

no-repeat 值

space 值

round 值

CSS 中的 background-position 属性

CSS 中的 background-origin 属性

休息一下

CSS 中的 background-clip 属性

CSS 中的 background-attachment 属性

CSS 中的 background-color 属性

如何使用 RBG() 函数来设置背景颜色

CSS 属性的简写

总结

Credits

JavaScript Async/Await 教程——通过制作冰淇淋来学习 JavaScript 异步编程

我们将在本文中介绍以下内容：

如果你喜欢，也可以在 YouTube 上观看本教程。

什么是异步 JavaScript？

JavaScript 中的同步和异步

什么是同步系统？

什么是异步系统?

总结一下同步 JS 和异步 JS

同步和异步代码示例

同步的代码示例

异步代码示例

如何设置我们的项目

JavaScript 中的回调函数是什么？

为什么要使用回调?

等等......

让我们存储数据

让我们做个小测试

休息一下

清除 console.log 日志

如何使用 Promise 来避免回调地狱

休息一下

等等

时间和工作的关系

Promise 链

例子如下:

如何通过图像路径使用 `background-image` 属性

如何通过链接使用 `background-image` 属性