Bash 的基本语法
本章介绍 Bash 的最基本语法。
echo 命令
由于后面的例子会大量用到echo命令，这里先介绍这个命令。
echo命令的作用是在屏幕输出一行文本，可以将该命令的参数原样输出。
12$ echo hello worldhello world
上面例子中，echo的参数是hello world，可以原样输出。
如果想要输出的是多行文本，即包括换行符。这时就需要把多行文本放在引号里面。
12345678$ echo "<HTML> <HEAD> <TITLE>Page Title</TITLE> </HEAD> <BODY> Page body. </BODY></HTML>"
上面例子中，echo可以原样输出多行文本。
-n参数
默认情况下，echo输出的文本末尾会有一个回车符。-n参数可以取消末尾的回车符，使得下一个提示符紧跟在输出内容的后面。
12$ echo -n hello w ...
Bash 简介
Bash 是 Unix 系统和 Linux 系统的一种
Shell（命令行环境），是目前绝大多数 Linux 发行版的默认 Shell。
Shell 的含义
学习 Bash，首先需要理解 Shell 是什么。Shell
这个单词的原意是“外壳”，跟
kernel（内核）相对应，比喻内核外面的一层，即用户跟内核交互的对话界面。
具体来说，Shell 这个词有多种含义。
首先，Shell
是一个程序，提供一个与用户对话的环境。这个环境只有一个命令提示符，让用户从键盘输入命令，所以又称为命令行环境（command
line interface，简写为 CLI）。Shell
接收到用户输入的命令，将命令送入操作系统执行，并将结果返回给用户。本书中，除非特别指明，Shell
指的就是命令行环境。
其次，Shell
是一个命令解释器，解释用户输入的命令。它支持变量、条件判断、循环操作等语法，所以用户可以用
Shell 命令写出各种小程序，又称为脚本（script）。这些脚本都通过 Shell
的解释执行，而不通过编译。
最后，Shell
是一个工具箱，提供了各种小工具，供用户方便地 ...
Web Share API
概述
网页内容如果要分享到其他应用，通常要自己实现分享接口，逐一给出目标应用的连接方式。这样很麻烦，也对网页性能有一定影响。Web
Share API
就是为了解决这个问题而提出的，允许网页调用操作系统的分享接口，实质是 Web
App 与本机的应用程序交换信息的一种方式。
这个 API
不仅可以改善网页性能，而且不限制分享目标的数量和类型。社交媒体应用、电子邮件、即时消息、以及本地系统安装的、且接受分享的应用，都会出现在系统的分享弹窗，这对手机网页尤其有用。另外，使用这个接口只需要一个分享按钮，而传统的网页分享有多个分享目标，就有多少个分享按钮。
目前，桌面的 Safari 浏览器，手机的安卓 Chrome 浏览器和 iOS Safari
浏览器，支持这个 API。
这个 API 要求网站必须启用 HTTPS 协议，但是本地 Localhost 开发可以使用
HTTP 协议。另外，这个 API
不能直接调用，只能用来响应用户的操作（比如click事件）。
接口细节
该接口部署在navigator.share，可以用下面的代码检查本机是否支持该接口。
123 ...
WebSocket
WebSocket 是一种网络通信协议，很多高级功能都需要它。
初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP
协议，为什么还需要另一个协议？它能带来什么好处？
答案很简单，因为 HTTP
协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP
协议做不到服务器主动向客户端推送信息。HTTP
协议的这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用“轮询”：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。
轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP
连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket
就是这样发明的。
简介
WebSocket
协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。We ...
SVG 图像
概述
SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable
Vector Graphics）。其他图像格式都是基于像素处理的，SVG
则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。
SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS
进行操作。
1234567891011121314<!DOCTYPE html><html><head></head><body><svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet"> <circle id="mycircle" cx="400" cy=" ...
Server-Sent Events
简介
服务器向客户端推送数据，有很多解决方案。除了“轮询” 和 WebSocket，HTML
5 还提供了 Server-Sent Events（以下简称 SSE）。
一般来说，HTTP
协议只能客户端向服务器发起请求，服务器不能主动向客户端推送。但是有一种特殊情况，就是服务器向客户端声明，接下来要发送的是流信息（streaming）。也就是说，发送的不是一次性的数据包，而是一个数据流，会连续不断地发送过来。这时，客户端不会关闭连接，会一直等着服务器发过来的新的数据流。本质上，这种通信就是以流信息的方式，完成一次用时很长的下载。
SSE 就是利用这种机制，使用流信息向浏览器推送信息。它基于 HTTP
协议，目前除了 IE/Edge，其他浏览器都支持。
与 WebSocket 的比较
SSE 与 WebSocket
作用相似，都是建立浏览器与服务器之间的通信渠道，然后服务器向浏览器推送信息。
总体来说，WebSocket
更强大和灵活。因为它是全双工通道，可以双向通信；SSE
是单向通道，只能服务器向浏览器发送，因为 streaming
本质上就是下 ...
Page Visibility API
简介
有时候，开发者需要知道，用户正在离开页面。常用的方法是监听下面三个事件。
pagehide
beforeunload
unload
但是，这些事件在手机上可能不会触发，页面就直接关闭了。因为手机系统可以将一个进程直接转入后台，然后杀死。
用户点击了一条系统通知，切换到另一个 App。
用户进入任务切换窗口，切换到另一个 App。
用户点击了 Home 按钮，切换回主屏幕。
操作系统自动切换到另一个 App（比如，收到一个电话）。
上面这些情况，都会导致手机将浏览器进程切换到后台，然后为了节省资源，可能就会杀死浏览器进程。
以前，页面被系统切换，以及系统清除浏览器进程，是无法监听到的。开发者想要指定，任何一种页面卸载情况下都会执行的代码，也是无法做到的。为了解决这个问题，就诞生了
Page Visibility API。不管手机或桌面电脑，所有情况下，这个 API
都会监听到页面的可见性发生变化。
这个新的 API
的意义在于，通过监听网页的可见性，可以预判网页的卸载，还可以用来节省资源，减缓电能的消耗。比如，一旦用户不看网页 ...
Page Lifecycle API
Android、iOS 和最新的 Windows
系统可以随时自主地停止后台进程，及时释放系统资源。也就是说，网页可能随时被系统丢弃掉。以前的浏览器
API
完全没有考虑到这种情况，导致开发者根本没有办法监听到系统丢弃页面。
为了解决这个问题，W3C 新制定了一个 Page Lifecycle
API，统一了网页从诞生到卸载的行为模式，并且定义了新的事件，允许开发者响应网页状态的各种转换。
有了这个
API，开发者就可以预测网页下一步的状态，从而进行各种针对性的处理。Chrome
68 支持这个 API，对于老式浏览器可以使用谷歌开发的兼容库 PageLifecycle.js。
生命周期阶段
网页的生命周期分成六个阶段，每个时刻只可能处于其中一个阶段。
（1）Active 阶段
在 Active 阶段，网页处于可见状态，且拥有输入焦点。
（2）Passive 阶段
在 Passive 阶段，网页可见，但没有输入焦点，无法接受输入。UI
更新（比如动画）仍然在执行。该阶段只可能发生在桌面同时有多个窗口的情况。
（3）Hidden 阶段
在 Hidd ...
Intl.RelativeTimeFormat
很多日期库支持显示相对时间，比如“昨天”、“五分钟前”、“两个月之前”等等。由于不同的语言，日期显示的格式和相关词语都不同，造成这些库的体积非常大。
现在，浏览器提供内置的 Intl.RelativeTimeFormat
API，可以不使用这些库，直接显示相对时间。
基本用法
Intl.RelativeTimeFormat()是一个构造函数，接受一个语言代码作为参数，返回一个相对时间的实例对象。如果省略参数，则默认传入当前运行时的语言代码。
12345678910const rtf = new Intl.RelativeTimeFormat('en');rtf.format(3.14, 'second') // "in 3.14 seconds"rtf.format(-15, 'minute') // "15 minutes ago"rtf.format(8, 'hour') // "in 8 hours&qu ...
IntersectionObserver
网页开发时，常常需要了解某个元素是否进入了“视口”（viewport），即用户能不能看到它。
上图的绿色方块不断滚动，顶部会提示它的可见性。
传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于scroll事件密集发生，计算量很大，容易造成性能问题。
IntersectionObserver
API，可以自动“观察”元素是否可见，Chrome 51+
已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个
API 叫做“交叉观察器”（intersection oberserver）。
简介
IntersectionObserver API 的用法，简单来说就是两行。
12var observer = new IntersectionObserver(callback, options);observer.observe(target);
上面代码中，Intersecti ...