
Hey guys, it's Sam Zhang.

如果你看过一些开源项目的源码，或深入研究过 Python 基础，就会发现在 Python 中，下划线无处不在。不仅如此，它的形式还五花八门，让人摸不着头脑。

这期视频，我们就来探讨一下 Python 下划线的那些事。

## 双下划线 —— 私有？

让我们先来讲一讲最有趣的双下划线吧。例如，下面这段代码：

```python
class SampleClass(object):
    def __init__(self):
        super().__init__()
        self.__private_method()

    def __private_method(self):
        print("I'm private!")

if __name__ == "__main__":
    obj = SampleClass()  # works!
    # obj.__private_method()  # AttributeError
    print(dir(SampleClass))
    obj._SampleClass__private_method()  # works!
```

定义了一个 SampleClass 类，并在其中定义了一个名叫 `__private_method` 的方法。

你尝试在 SampleClass 中通过 `self.__private_method` 来访问这个方法，一切正常运行。

但是，如果在已经实例化后的 SampleClass 对象中调用该方法，就会报错 AttributeError ，并不存在这样一个方法。

于是，我们可以提出一个合理猜测：双下划线开头的方法就是 Python 里的私有方法。

但是其实不然。原因很简单，如果你用 `dir(SampleClass)` 来查看这个类的所有成员函数的话，就会发现在其中有一个名叫 `_SampleClass__private_method()` 的方法：

```python
['_SampleClass__private_method', '__class__', '__delattr__', '__dict__', '__dir__', '__doc__', '__eq__', '__format__', '__ge__', '__getattribute__', '__gt__', '__hash__', '__init__', '__init_subclass__', '__le__', '__lt__', '__module__', '__ne__', '__new__', '__reduce__', '__reduce_ex__', '__repr__', '__setattr__', '__sizeof__', '__str__', '__subclasshook__', '__weakref__']
```

如果你尝试从外部调用它，就会发现调用的就是之前定义的私有方法。

同样的，如果你定义了一个类继承自 SampleClass ，会发现它无法调用 `__private_method()` 。但是，如果你调用 `self._SampleClass__private_method()` ，就能够正常调用私有方法：

```python
class SampleClass(object):
    def __init__(self):
        super().__init__()
        self.__private_method()

    def __private_method(self):
        print("I'm private!")

class SampleClass2(SampleClass):
    def __init__(self):
        super().__init__()
        # self.__private_method()  # AttributeError
        self._SampleClass__private_method()  # works!

if __name__ == "__main__":
    obj = SampleClass()  # works!
    # obj.__private_method()  # AttributeError
    print(dir(SampleClass))
    obj._SampleClass__private_method()  # works!
    obj2 = SampleClass2()  # works!
```

值得一提的是，Python 中所谓的“私有方法”并不是其他语言中私有方法的概念。

在 Python 中，前置双下划线的标准说法叫做 **名称修饰** ，或 *name mangling* 。解释器会在运行过程中自动将前置双下划线的方法转换为 `_CurrentClassName__method_name` 的形式，且子类无法直接通过 `self.__method_name` 访问父类方法。但是，子类仍然可以通过上面所说的 `self._CurrentClassName__method_name` 访问父类的双下划线方法，其中 CurrentClassName 为父类名称。

所以，Python 中以双下划线开头命名的成员函数，从某种意义上讲只是被解释器替换了名字，并没有真正“私有化”。如果你想要在子类中复写、调用这些经过命名修饰后的方法的话，也是完全可行的。但是，在一般情况下来说，你可能并不想这么干 —— 如果你复写了别人写的内部方法，很可能会导致意料之外的后果。

## 单下划线 —— 只是命名规范？

讲了这么多双下划线，来看看单下划线吧。在 Python 中，单下划线更倾向于一种命名规范，指明当前方法为私有方法，不建议进行改动且随时可能进行 API 更新。它并没有像双下划线那样有着解释器自动的名称修饰，意味着子类仍然可以直接复写或调用单下划线开头的方法。

但是，单下划线与普通方法还是有区别的。如果你在一个文件顶层定义了一个单下划线开头的方法，类或变量，当其他模块使用 `from xxx import *` 这种导入方式导入该文件中的成员的时候，将不会导入单下划线开头的成员。例如：

```python
_radius = 100
PI = 3.14

def _calc():
    return PI * _radius * _radius
```

然后，你在另一个文件中尝试导入这些变量：

```python
from my_file import *

print(PI)  # 3.14
print(_radius)  # NameError
print(_calc())  # NameError
```

你无法通过 `import *` 这个语法糖导入单下划线开头的对象。

也就是说，解释器自动将单下划线开头的对象从模块的 `__all__` 中移除了。但是，如果你手动定义 `__all__` 的话，仍然可以覆盖解释器的默认操作：

```python
# 手动复写 __all__
__all__ = ["PI", "_radius", "_calc"]

_radius = 100
PI = 3.14

def _calc():
    return PI * _radius * _radius
```

再进行导入的话：

```python
from my_file import *

print(PI)  # 3.14
print(_radius)  # 100
print(_calc())  # 31400.0
```

就可以正常运行啦！

## 后缀下划线 —— 规避重名

在 Python 中，你也许还见到过类似 `variable_` 这种命名方法，以单下划线结尾。一个最常见的例子就是 BeautifulSoup 中 `find()` 方法里 `class` 参数的命名被改成了 `class_ `。

这种单下划线后缀的命名方法通常是用来规避与内置关键词重名导致语法错误。常见的还有 `float_` ，`int_` ，`str_` 等。

当然，能不用这种命名方法就不用，尽量规避内置关键词，以免造成代码可读性降低。

## 两侧双下划线 —— 魔法函数

最后，在 Python 的类中还有一种奇特的下划线命名，形式如 `__method__` 。这种双前导双末尾下划线的形式在 Python 中通常为语言内置的魔法方法，例如 `__init__` ，`__add__` 等。

通常来讲，我们不建议将自己写的函数以这种形式命名，以免造成不必要的误解。当然，在需要自定义这些方法的时候，复写还是非常有必要的。

一些常见的魔法方法如 `__init__` ，`__del__` ，`__repr__` ，`__getattr__` 等。如果你想要了解更多魔法函数相关内容，可以去看一看 [这篇文章](https://segmentfault.com/a/1190000040286979) 。

## 写在最后

说了这么多，下划线的作用其实主要就是规范代码命名。这样，当你发布的包被其他人使用时，别人就能很轻松地知道这个方法能不能复写，该不该直接调用等等。

写好 Python 代码，从遵循 PEP8 开始。

那么以上就是本期视频的全部内容了，如果你觉得还不错的话，也请三连转发关注我，这对我创作都会是很大的动力。如果你发现了本期视频中的错误，也欢迎私信或者在评论区中留言，我也会及时改正。

我是 Sam Zhang ，我们下期再见！

## 参考资料

- Aggarwal, N. (2019, November 26). Private Methods in Python. Geeks for Geeks. https://www.geeksforgeeks.org/private-methods-in-python/
- Alya. (2003, September 16). Why are Python's 'private' methods not actually private? - Stack Overflow. Stack Overflow. https://stackoverflow.com/a/70900/13266491
- (2008, December 3). 9. Classes — Python 3.10.5 documentation. Python Documentation. https://docs.python.org/3/tutorial/classes.html#private-variables
- (2021, May 18). Private Methods in Python. DelftStack. https://www.delftstack.com/howto/python/python-private-method/
- Hettinger, R. (2013, March 21). Python's Class Development Toolkit. Next Day Video. https://www.youtube.com/watch?v=HTLu2DFOdTg&t=1988s
- 清风Python. (2020, September 13). 关于Python的前后、单双下划线作用，看完这篇文章吊打面试官. 简书. https://www.jianshu.com/p/f642ab3ec614

你真的会用 Python 里的下划线吗？


此为我在 B 站上发布的视频 [你真的会写 Git 提交信息吗?](https://www.bilibili.com/video/BV1NU4y1U7KT) 的文字稿。

<iframe src="//player.bilibili.com/player.html?aid=684168548&bvid=BV1NU4y1U7KT&cid=724729363&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

## 前言

Git - 相信大家对这个工具都不陌生。作为当今最为流行的开源版本控制系统，Git 几乎是每个项目的必备工具。

Git 最主要的功能就是记录版本差异，每一次的版本更新被称作 `commit` 。每一个 `commit` 都有自己的一串 commit id 和描述此次更新内容的 commit message 。而其中对于浏览项目历史记录最重要的一项当然就是 commit message 了。写好，写清楚 commit message ，将会极大的提高合作开发效率。这期视频，我们就来深入研究 commit message 这个字符串，到底该怎么写。

## `git commit`

当你兴高采烈地重构好了你的开源项目的时候，你在终端里敲下了 `git commit` 。Git 自动打开了你最喜欢的编辑器 —— Vim。你在 Vim 中写下了：

> Refactored frontend code and updated `config` format.

随后，你按下 `esc` ，输入 `:wq` 退出了 Vim。终于，你把此次更新上传到了 GitHub 。

但是，你写的这句 commit message ，真的规范吗？

从某种意义上来讲，你写的还不错 —— 很清楚地表述了此次更新的主要内容。但是，却又不够好 —— 你并没有一套明确的规则规定如何表述每一次的 commit message ，导致你的 commit history 变得混乱不堪。

更有些时候，因为着急，你只写了一个 `fix` 就 commit 了 —— 这是不可取的。如果你之后想要知道到底你修复了哪里，还需要 checkout 那个 commit 并逐个翻阅修改的文件。

如果你是刚刚情境中的“我”，那么请继续往下看，相信你会收获很多。

## Conventional Commits

没错，前面所说的那个“规则”已经出现了，并且非常成熟 —— 大部分开源项目都会遵守这个 commit message rule 。而它，就是 Conventional Commits（约定式提交） ，一个人和机器都能读懂的 commit message 规范。

它的大致写法长这样：

```
<类型>[可选 范围]: <描述>

[可选 正文]

[可选 脚注]
```

其中，提交类型可以是下面的几种：

- `fix` ：修复了某个 bug
- `feat` ：新增了某个功能
- `build` ：一些影响构建系统的更新
- `chore` ：一些不重要的、不更改核心代码的更新
- `ci` ：变更了一些 CI 系统的配置
- `docs` ：对文档做出了一些修改
- `test` ：新增或修改测试文件
- `refactor` ：重构了代码（没有新增或修复任何东西）
- ……等等

更完整的提交类型列表请前往 <https://github.com/pvdlg/conventional-changelog-metahub#commit-types> 查看。

在类型后面的范围是可选的，指定了当前变更所作用的域，一般使用括号紧跟在提交类型的后面，例如：

```
build(npm): commit description
```

随后的提交描述是一小段对代码变更的简短总结，紧跟在类型（或作用范围）的后面，使用冒号 + 空格分割。

下面的提交正文也是可选的，可以写一些较长的上下文信息，与描述用一个空行隔开。紧接着的脚注用一个空行与正文分隔开来，包含着一些额外的令牌（例如 `Co-authored-by: user1, user2` 表示此提交是由提交者， `user1` 和 `user2` 共同修改的。

有一个特殊的脚注是 `BREAKING CHANGE` ，表示破坏性变更，必须使用**全部**大写的字母，后面跟着一串描述破坏性更新的文本，例如：

```
BREAKING CHANGE: environment variables now take precedence over config files
```

至此，我们一开始的提交：

```
Refactored frontend code and updated `config` format.
```

就可以变为：

```
refactor(frontend): improved structure of frontend code

Improved code quality of frontend code and removed unused imports.

BREAKING CHANGE: Format of the configuration file now changed to JSON instead of JavaScript files.
```

怎么样，是不是明了了很多？

当然，上面介绍的还只是约定式提交的冰山一角。如果你想要了解更多有关约定式提交的内容，可以去官方文档看一看：<https://www.conventionalcommits.org/zh-hans/v1.0.0/> 。视频中所有提到的链接我也都会放到视频底部的简介中。

ok，那么以上就是本期视频的全部内容了。如果你喜欢的话，不妨来个三连+关注支持一下，这对我创作都会是很大的动力。我是 Sam Zhang，我们下期再见。Bye bye！

你真的会写 Git 提交信息吗?


此为我在 B 站上发布的视频 [TCP | 你真的懂 HTTP 吗？](https://www.bilibili.com/video/BV1RU4y1R7Kv) 的文字稿。

<iframe src="//player.bilibili.com/player.html?aid=682385745&bvid=BV1RU4y1R7Kv&cid=554442259&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

## 前言

Hello 大家好，我是 Sam Zhang。

HTTP 相信是每个 Web 开发者都耳熟能详的名词了。但是，新手开发者想要完全理解 HTTP 协议却需要时间。这期视频，我就来带大家入门 HTTP 协议。

话不多说，我们直接进入正题！

## TCP / IP 模型

在真正讲解 HTTP 协议之前，我们先来看一下更为底层的 TCP / IP 模型。

### TCP / IP 模型的四个层次

![TCP / IP 模型](https://tva1.sinaimg.cn/large/e6c9d24ely1h09fe7w3qaj208x08xt90.jpg)

正如大家所看到的，TCP / IP 模型分为四层，由下到上依次是：

1. 链路层（Link Layer）
2. 网络层（Internet Layer）
3. 传输层（Transport Layer）
4. 应用层（Application Layer）

#### 链路层

链路层处于 TCP / IP 模型的最底层。它负责管理数据如何与物理媒介进行交互，例如 Wi-Fi 定义了数据如何进行无线传输。

#### 网络层

链路层只能在局域网中工作，而网络层定义了 IP 协议，主要负责寻址操作。

#### 传输层

传输层主要负责提供应用程序接口，为应用程序提供接入网络的途径。除此以外，这一层还出现了端口，也就是客户端与服务器连接的频道。

最主要的是，这一层有可靠传输的 TCP 协议。通过 TCP 协议传输的数据都能保证按照顺序抵达，内容正确且没有重复。大多数网络请求都是通过 TCP 传输的。

#### 应用层

这一层包括了主要为应用软件使用的协议，例如负责文件传输的 FTP 协议，负责电子邮件的 SMTP 协议和负责域名系统的 DNS 等。最经常出现的 HTTP / HTTPS 协议也是在这一层下的，在浏览器中使用非常广泛。WebSocket 协议也同属于这一层。

## HTTP / HTTPS 协议

### 基础概念

![A Web document is the composition of different resources](https://mdn.mozillademos.org/files/13677/Fetching_a_page.png)

> HTTP（**HyperText Transfer Protocol**）是万维网（World Wide Web）的基础协议。自 Tim Berners-Lee 博士和他的团队在1989-1991年间创造出它以来，HTTP已经发生了太多的变化，在保持协议简单性的同时，不断扩展其灵活性。如今，HTTP已经从一个只在实验室之间交换文件的早期协议进化到了可以传输图片，高分辨率视频和3D效果的现代复杂互联网协议。

HTTP 从 HTTP / 0.9 的单行协议演变到现在 HTTP / 2 的数据帧，HTTP 协议在不断地变化并发展着。这个最初从 CERN 实验室中走出来的小东西，最终被几乎所有人每天每刻地使用着。这，就是我们今天的主角 —— HTTP 协议。

HTTP 是一个 client-server 协议。也就是说，请求由客户端发出，被服务器处理后返回一个响应。在这之间，可能存在着许多代理 - 例如网关。这些代理是建立在应用层上的。代理的作用包括缓存，过滤，负载均衡等功能。

### HTTP 设计理念

#### HTTP 是简单的

HTTP 的设计理念是简单易读 —— 这就使得 HTTP 报文能被人类读懂，而不只是机器。

#### HTTP 是可扩展的

请求头的存在使得扩展 HTTP 变得更简单了。只要服务端和客户端对某一个 header 达成一致的语义，那么这个新 header 的功能就可以很轻松被接入进来。

#### HTTP 是无状态，有会话的

HTTP 本身是无状态的。即使在同一连接中，两个请求之间也是没有关系的。但是，通过 Cookies 创建一个会话，就能够让请求共享同样的上下文信息。

也就是说，HTTP 本身是无状态的，但因为 Cookies ，你可以在 HTTP 中创建有状态的会话。

#### HTTP 和连接

HTTP 在底层使用 TCP 传输协议，而不是 UDP 协议 —— 因为 TCP 是可靠的，不丢失消息的。

#### 数据 URL

数据 URL 是一种特殊的 URL 。他使用 `data:` 协议，允许嵌入小文件。

它的定义形式如下：

```
data:[<mediatype>][;base64],<data>
```

其中 `mediatype` 是一个 MIME 类型的字符串，用于判断数据的类型。默认为 `text/plain;charset=US-ASCII` ，即 ASCII 编码的纯文本文档。

除此以外，你还可以选择使用 `base64` 编码来存储数据。这在存储二进制文件（例如视频和图片）时非常有用。加入 `;base64` 标识符即可存储 base64 数据。

例如，`data:,Hello%20World!` 就是一个纯文本类型数据，而 ``data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D`` 则是刚刚 Hello World 的 `base64` 形式。

除此以外，还有几点注意事项：

1. 虽然 Firefox 支持无限长度的 `data` URLs，但是标准中并没有规定浏览器必须支持任意长度的 `data`URIs。比如，Opera 11浏览器限制 URLs 最长为 65535 个字符，这意味着 data URLs 最长为 65529 个字符。
2. 因为数据 URL 是没有结束标记的，所以如果你尝试使用 Query String 添加查询字符串会导致浏览器认为加入的查询字符串也是数据的一部分。
3. data URL 的格式虽然很简单，但 `<data>` 前面的逗号 `,` 却很容易被人忽略，从而导致错误。

#### MIME 类型

MIME（**Multipurpose Internet Mail Extensions**）类型，又称媒体类型，用来表示特定数据的性质和格式。

一个 MIME 类型的结构很简单：

```
type/subtype
```

其中 `type` 代表类别，`subtype` 代表子类别。注意，MIME 类型中不允许空格存在。

虽然 MIME 类型不区分大小写，但传统写法都是小写。

常见的类型有 `text` , `image` , `audio` , `video` , `application` 等。每个类别下还有不同的子类别，可谓种类繁多，绝对能找到你想要的。

刚才说的那几个类型都是**独立**类型，还有另外一种 Multipart 类型。它通常在 HTML 表单中出现，类型是 `multipart/form-data` 。

更详细的 MIME 类型表可以在 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types) 中找到。

### 请求

一个典型的 HTTP 请求应该包括以下几个部分：

1. 请求行
2. 请求头
3. 请求体，如果有的话

#### 请求行

HTTP 请求的启始行叫做请求行。它由下面几个部分组成：

```
<命令> <路径> <版本>
```

例如：`GET /user/register.html HTTP/1.1`

1. `<命令>` ：是 HTTP 请求方式的其中之一，常见的有 `GET` 、`POST` 、`PUT` 等。
2. `<路径>` ：要获取的资源等路径，通常是上下文中就很明显的元素资源的 URL 。*需要注意的是，它没有 `protocol`（`https://`），`domain`（`samzhangjy.github.io`），抑或是 TCP 协议的 `port`（`80`）。*
3. `<版本>` ：HTTP 协议版本号。

#### 请求头

请求头是一行不区分大小写的字符串。它遵循如下规范：

```
<请求头名称>: <请求头值>
```

举个栗子：

```
Accept-Language: zh-CN, en-US
```

这个 header 表示客户端接受简体中文和英文。HTTP 协议支持许多不同的请求头，大致分类有：

- [General headers](https://developer.mozilla.org/zh-CN/docs/Glossary/General_header)：同时适用于请求和响应消息，但与最终消息主体中传输的数据无关的消息头。
- [Request headers](https://developer.mozilla.org/zh-CN/docs/Glossary/Request_header)：包含更多有关要获取的资源或客户端本身信息的消息头。
- [Response headers](https://developer.mozilla.org/zh-CN/docs/Glossary/Response_header)：包含有关响应的补充信息，如其位置或服务器本身（名称和版本等）的消息头。
- [Entity headers](https://developer.mozilla.org/zh-CN/docs/Glossary/Entity_header)：包含有关实体主体的更多信息，比如主体长度 (Content-Length) 或其 MIME 类型。

完整的列表可在 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers) 查看。

#### 请求体

不是所有的请求都必须有请求体：获取数据的请求，例如 `GET` , `HEAD` , `DELETE` , `OPTIONS` 等，通常都不需要请求体。某些请求可能需要上传数据到服务器（最典型的例子就是 `POST` 请求），就需要有请求体来装载数据，例如 `FormData` 。

请求体可以大致分为两种：

- Single-resource bodies，由一个单文件组成。该类型的请求体由两个 header 定义：`Content-Type` 和 `Content-Length` 。
- Multiple-resouce bodies，由多部分 body 组成，每一部分包含不同的信息位，通常和 HTML 表单数据结合在一起。

### 响应

HTTP 响应，跟 HTTP 请求一样，分为三个部分：状态行，响应头和响应体。

#### 状态行

HTTP 响应的第一行就是状态行（status line）。它的模式是：

```
<版本> <状态码> <状态文本>
```

例如：`HTTP/1.1 200 OK` 。

1. `<版本>` ：协议版本，通常情况下是 `HTTP/1.1` 。
2. `<状态码>` ：表明请求的状态，成功还是失败等。常见的有 200 ，404 ，403 等。
3. `<状态文本>` ：一条描述当前状态码的简短明确的文本。

#### 响应头

跟 HTTP 请求头的格式完全一样，HTTP 响应头也不区分大小写并使用逗号和冒号分割数据。整个 header（包括其值）表现为单行形式。

有许多响应头可用，这些响应头可以分为几组：

- *General headers*，例如 [`Via`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Via)，适用于整个报文。
- *Response headers*，例如 [`Vary`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Vary) 和 [`Accept-Ranges`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Accept-Ranges)，提供其它不符合状态行的关于服务器的信息。
- *Entity headers*，例如 [`Content-Length`](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Content-Length)，适用于请求的 body。显然，如果请求中没有任何 body，则不会发送这样的头文件。

更多响应头可以在 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers) 找到。

#### 响应体

响应体是可选的，例如有着 HTTP 状态码 201 或 204 的请求大多数情况下不会有响应体。

常用的 Single-resource bodies 响应体可分为两类：

- 由已知长度的单个文件构成的，由 `Content-Type` 和 `Content-Length` 响应头定义。
- 由未知长度的单个文件构成的，通过将 `Transfer-Encoding` 设为 `chunked` 来使用 chunks 编码传输。

属此以外，还有 Multiple-resource bodies ，由多部分响应体组成，每部分包含不同的信息段，但十分少见。

### HTTP / 2

HTTP / 2 修复了 HTTP / 1.1 的许多性能问题：例如在 HTTP / 2 中，可以压缩 header 了。如果你想用 HTTP / 2 协议，你完全不需要更改你的任何 API - 当用户的浏览器和你的服务器都支持 HTTP / 2 时，它会自动取代 HTTP / 1.1 。

如果你想要了解 HTTP / 2 的具体优化，请参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Messages#http2_帧) 。

### 认证

![img](https://tva1.sinaimg.cn/large/e6c9d24ely1h0anyizllbj20jq09b3yw.jpg)

一个初始 HTTP 请求是不包括任何认证信息的，可以被认为是一个匿名请求。当服务器接收到此请求且客户端要访问的路由是受保护的，服务器就会返回 401 状态码，并使用 `WWW-Authenticate` 响应头告知客户端需要进行相应的认证。下面是它的语法形式：

```
WWW-Authenticate: <type> realm=<realm>
```

其中，`<type>` 表示验证方案（例如 `Basic` ）。`<realm>` 是一段用于描述进行保护区域的文字，例如 Access to the staging site ，使用户能够知晓他们正在访问的空间。

这时，当客户端（浏览器）接收到此消息后，会弹出密码框，让用户输入密码。输入完成后，客户端将所获的认证信息通过 `Authorization` 请求头传回服务器。

服务器验证当前认证信息后，会根据实际情况返回数据。

一个最基础的 HTTP 认证方式是 Basic 认证方式（基本验证方案）。

#### Basic Authentication

基本验证方案使用用户的 ID 或密码作为认证信息，并使用 base64 算法对其进行编码。

但是，由于 base64 算法的可逆性，基本验证方案并不安全。如果在非 HTTPS 的请求中使用会导致信息泄漏等安全风险。由此，Basic 认证方式不应该用来传输敏感的信息。

### 缓存

HTTP 缓存允许用户复用之前的资源来显著提高性能。

当缓存发现当前请求已经被存储，就会自动拦截请求并返回存储的资源。这跳过了请求源服务器的步骤，大大提升了访问速度。However，不是所有的缓存都是永久不变的：我们需要对缓存的截止时间作出相应的调整，使其不缓存过期的资源。

缓存分为两种，一种是私有的浏览器缓存，另一种是共享的代理缓存。

浏览器缓存，顾名思义，就是将缓存直接存储在浏览器中。而代理缓存，就是在目标服务器和用户之间添加一个代理。它将会把经常访问的资源缓存，并以此减少网络拥堵。

虽然 HTTP 缓存不是必须的，但重用缓存的资源通常是必要的。常见的 HTTP 缓存只能存储 GET 请求的相应，对其他类型的请求稍显无能为力。

客户端可以通过设置 `Cache-Control` 请求头来控制缓存。

`Cache-Control` 的常见取值由 `no-store` , `no-cache` , `max-age=<seconds>` , `must-revalidate` , `private` , `public` 等。

其中，`no-store` 代表不进行任何缓存，`no-cache` 代表缓存但重新验证是否过期，`max-age` 代表缓存保持 fresh 状态的最长时间。

更详细的缓存的信息可以在 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching) 找到。

### Cookie

正如我们一开始所说的，HTTP 是无状态的。但是我们可以通过 Cookies 创建有状态的会话。

服务端可以直接使用 `Set-Cookie` 响应头来给客户端发送 Cookie 信息。一个最基础的 Cookie 可以这样设置：

```
Set-Cookie: <name>=<value>
```

客户端会将服务器给定的值存储到本地。Cookies 一旦存储，每次请求客户端都会发送 `Cookies` 请求头给服务器：

```
Cookie: <name1>=<value1>; <name2>=<value2>; ...
```

#### Cookies 的生命周期

Cookie 的生命周期可以通过 `Expires` 或 `Max-Age` 设置。E.g:

```
Set-Cookie: fruit=orange; Expires=Wed, 21 Oct 2022 07:28:00 GMT;
```

更多信息请参考 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies) 。

## 参考资料

### 文档

- [TCP/IP四层模型](https://zhuanlan.zhihu.com/p/57936826), [勤劳的小手](https://www.zhihu.com/people/duan-pan-ykjym), 2021.
- [HTTP概述](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Overview), MDN contributors, 2022.
- [Data URLs](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/Data_URIs), MDN contributors, 2022.
- [HTTP响应](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Messages), MDN contributors, 2022.
- [HTTP基础](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types), MDN contributors, 2022.
- [HTTP缓存](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Caching), MDN contributors, 2022.
- [HTTP Cookies](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies), MDN contributors, 2022.

### BGM

- [Creative Minds](https://www.bensound.com/royalty-free-music/track/creative-minds), *Benjamin Tissot* .
- [Punky](https://www.bensound.com/royalty-free-music/track/punky), *Benjamin Tissot* .
- [Energy](https://www.bensound.com/royalty-free-music/track/energy), *Benjamin Tissot* .

TCP｜你真的懂 HTTP 吗？


此为我在 B 站上发布的视频 [JS 花式输出 | 你真的会用 console.log 吗？](https://www.bilibili.com/video/BV1Eq4y1t7C1) 的文字稿。

<iframe src="//player.bilibili.com/player.html?aid=594140875&bvid=BV1Eq4y1t7C1&cid=514614537&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

## 引言

`console.log` 是每一个 JavaScript 开发者都会经常用到的函数。可能很多初学者第一次使用 JS 时，就是调用的它。

`console.log` 可能最广泛的用途就是输出调试信息了吧：

```js
console.log(current_processing);
```

当然，还有招聘信息：

![image-20220221194418180](https://s2.loli.net/2022/02/21/RiKjwpfabPA1xDu.png)

但是，你可能注意到了，百度这招聘信息写的挺花哨啊，这字还是红色的！

不知道各位会不会写，反正我第一次看见的时候是不会弄的。无论你会不会打印出这样的效果，继续往下看，一定会有所收获的。

## 彩色字？搞定！

首先，我们来看一下怎么来打印彩色字。

```js
console.log(msg)
```

这，是 JS `console.log` 的最基本形式，也可能是大部分人所熟知的形式。

但是，其实这个 msg 后面是有东西的 —— 正是那些不起眼的参数，能够让我们的 log 变得“上档次”。

根据 [MDN](https://developer.mozilla.org/en-US/docs/Web/API/console/log#syntax) 的定义，`console.log` 的定义如下：

```js
console.log(obj1 [, obj2, ..., objN]);
console.log(msg [, subst1, ..., substN]);
```

其中，`obj1 - objN` 代表的是要输出的 JS 对象。

而 `msg` 则是一个包含着各种控制字符的字符串，也是我们今天的主角。而后面跟着的 `subst1 - substN` 都是用来替换控制字符的特殊字符串。

首先，我们来看看怎么打印彩色字符吧。

```js
console.log("Hello, World")
```

这，是最基础的 Hello World 。如果你现在运行，会得到一个纯正血统的 JS HelloWorld。

但是，我们想要的是彩色输出！别急，我们先来认识一下第一个控制字符 —— `%c` 。有了它，你就可以随意往 console 里面堆积 CSS 了 —— 没错，这个 `%c` 代表着 CSS ！

只要把 `%c` 放在你要使用 CSS 的字符的前面，就能开始写 CSS 了。例如：

```js
console.log("%cHello, World")
```

下一步就是加上样式了。还记得之前的 `subst` 吗？它们现在可以派上用场了：

```js
console.log("%cHello, World", "color: red")
```

对，你没看错，就是 CSS ！一个 `%c` 对应着一个样式，而每一个 `%c` 都将会把从当前字符到下一个 `%c` 之前的一个字符渲染上对应的 CSS 样式。如果你用的是电脑端的话，可以按下 F12 试一试，就是这么简单！

![image-20220221201116931](https://s2.loli.net/2022/02/21/aAkF5poZmQNu9HJ.png)

如果你会一点 CSS 的话……你甚至可以弄成这样：

![image-20220221202058862](https://s2.loli.net/2022/02/21/inwxVNJ376uWame.png)

但是，这玩意更普遍的用途是这样的：

![image-20220221202230330](https://s2.loli.net/2022/02/21/FbGuKjq4pfmy7Tr.png)

这样的：

![image-20220221202319713](https://s2.loli.net/2022/02/21/wMCX6yHvkWcZi1r.png)

既然上面说了可以添加自定义 CSS ，那么我们应该能够完成这个挑战。

理论存在，实践开始。

先上最基础的无样式版本：

```js
console.log(
  `Powered by VueBlogger v0.1.0\n
GitHub: https://github.com/samzhangjy/VueBlogger\nPlease star & fork to support the author!`);
```

按照刚才说的方法，在 `VueBlogger` 前面加上 `%c` ，并添加相对应的样式：

```js
console.log(
  `Powered by %cVueBlogger v0.1.0\n
GitHub: https://github.com/samzhangjy/VueBlogger\nPlease star & fork to support the author!`,
  "background-color: #1A55ED; padding: 7px; color: #fff;"
);
```

但是，如果仅仅是这样，你会得到一个非常蓝的 console ：

![image-20220221202832979](https://s2.loli.net/2022/02/21/VkKgR3dUQEmotjO.png)

还记得刚才说的吗？

> 一个 `%c` 对应着一个样式，而每一个 `%c` 都将会把从当前字符到下一个 `%c` 之前的一个字符渲染上对应的 CSS 样式。

所以，我们只需要在 `v0.1.0` 前添加 `%c` 控制字符就 ok 啦：

```js
console.log(
  `Powered by %cVueBlogger%cv0.1.0\n
GitHub: https://github.com/samzhangjy/VueBlogger\nPlease star & fork to support the author!`,
  "background-color: #1A55ED; padding: 7px; color: #fff;",
  "background-color: #FCBF23; color: #000; padding: 7px;"
);
```

但是，这样还是会出现刚才的情况，只不过变黄了……

于是，我们可以再加个 `%c` ：

```js
console.log(
  `Powered by %cVueBlogger%cv0.1.0%c\n
GitHub: https://github.com/samzhangjy/VueBlogger\nPlease star & fork to support the author!`,
  "background-color: #1A55ED; padding: 7px; color: #fff;",
  "background-color: #FCBF23; color: #000; padding: 7px;",
  ""
);
```

现在我们的 console 输出正常了。是的，你可以通过把对应的 CSS 置空来消除前面的 CSS 效果！

那么第二个输出也就迎刃而解了，此处不再赘述。

哦对了，不是所有的 CSS 都能够移至到 console 里的 —— 请看 [MDN](https://developer.mozilla.org/en-US/docs/Web/API/console#outputting_text_to_the_console) 的详细说明。

当然，`console.log` 还有其他的控制字符 —— 例如 `%o, %d, %s, %f` 等，此处不再赘述，可以参见 [MDN](https://developer.mozilla.org/en-US/docs/Web/API/console#outputting_text_to_the_console) 查看更多信息。其中，`%d, %s, %f` 与其他语言中的格式化字符串很相似（例如 `C++` 的），作用也是格式化字符串、数字等信息。

## `console.assert ` —— 调试神器

如果你用过 Python 的话，你肯定会对 `unittest` 中形如 `assertXxxx` 的函数十分熟悉。现在，甚至有一部分灵魂跑到 JS 上了！没错，这就是 `console.assert` 。

按照惯例，先看定义：

```js
console.assert(assertion, obj1 [, obj2, ..., objN]);
console.assert(assertion, msg [, subst1, ..., substN]); // C-like message formatting
```

跟 `console.log` 差不多 —— 但是多了一个 `assertion` 。而它，就是要 assert 的对象。如果 `assertion` 的结果不为真，那么将会以类似 `console.error()` 的样式打印出后面的错误信息 `msg` 。

来看一个最简单的栗子：

```js
console.assert(![], "Yep, that's falsy.")
```

如果 `![]` 的值是非真的，那么我们将会收到一个自定义的报错：

![image-20220221205718474](https://s2.loli.net/2022/02/21/wb3uEgFGqW2mxJn.png)

那么，如果 assert 的结果是真的，就会正常执行，没有输出：

![image-20220221210046788](https://s2.loli.net/2022/02/21/qRXGbOc82KuiCTj.png)

同理，`console.assert` 也能使用 CSS：

```js
console.assert(0.1 + 0.2 === 0.3, "%cYou can't even can't get 0.1 + 0.2 right in js.", "font-weight: bold; font-style: italic; background-color: orange; color: #000")
```

![image-20220221210210114](https://s2.loli.net/2022/02/21/EFOWpIQVUxiykTS.png)

## `console.count` —— 计数神器

语法：

```js
console.count([label]);
```

`console.count` 函数接收一个字符串列表，列表中的元素表示一个标签。每次计数时，`console.count` 都会输出当前标签列表被计数的次数，并持续累积。如果没有给出任何标签，则会使用 `default` 默认标签。

这东西用起来也很简单，喂给它一些数据就行了：

```js
console.count("A");
console.count("B");
console.count("A");
```

![image-20220221211134769](https://s2.loli.net/2022/02/21/czUSn9j4vb8PEiL.png)

来做个示例：

```js
for (var i = 1; i <= 10; i++) {
	for (var j = 1; j <= i; j++) {
    	if (i % j == 0) console.count(i)
    }
}
```

这段代码会输出 1 - 10 这些数字的因数个数。

![image-20220221211731024](https://s2.loli.net/2022/02/21/FhHqOQtP3RS4p7J.png)

## `console.group` —— 没啥特别的，感觉会有用

`console.group` 允许你在 console 中输出层级嵌套的信息。

你可以使用 `console.group` 来创建一个新层，然后使用 `console.log` 、`console.warn` 、`console.error` 等函数在该层级下进行输出，最后使用 `console.groupEnd()` 来结束当前层。

示例：

```js
console.log("I'm here at the top level");
console.group("Level 2 group here!");
console.log("I'm in level 2!");
console.group("Level 3!");
console.log("You know what, [] is really weird in JS.")
console.error("0.1 + 0.2 !== 0.3 in JS =(");
console.groupEnd();
console.log("Back at level 2!");
console.groupEnd();
console.info("Wow, what a trip up there!");
```

![image-20220221212457244](https://s2.loli.net/2022/02/21/JiILZ9QAC4domM1.png)

函数太多，不放定义啦，大家应该参照运行结果就能看懂啦。

## 小结

这篇文章简单介绍了一下 `console` 的各种使用方法。但是，像一些过于普通的（例如 info、error、warning 等），我没有在这里一一介绍。

如果有小伙伴想要了解这方面的更多知识，可以前往 [MDN](https://developer.mozilla.org/en-US/docs/Web/API/console) 进行查阅，相信你一定会有新的收获。

我是 samzhangjy ，我们下期再见！

标签文字稿

标签为文字稿的文章

你真的会用 Python 里的下划线吗？

你真的会写 Git 提交信息吗?

TCP｜你真的懂 HTTP 吗？

你真的会用 console.log 吗?

Sam Zhang.

标签 文字稿

标签为 文字稿 的文章

你真的会用 Python 里的下划线吗？

你真的会写 Git 提交信息吗?

TCP｜你真的懂 HTTP 吗？

你真的会用 console.log 吗?

Sam Zhang.

标签文字稿

标签为文字稿的文章