一些关于前端、技术，和我的生活的文字

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

Category: All - Page 10 | Spark1e的个人博客

### 2. JavaScript相关的一些事

#### 2.1. JavaScript的性质

- 它是动态的；
- 它是动态类型； _（即便引入TypeScript协助开发也只能协助推导类型。）_
- 它是函数式和面向对象的；

### 3. JavaScript语言深入

#### 3.1 语句

凡是在JavaScript期望语句的地方都可以写表达式，不能在需要表达式的地方使用语句。

如果使用二义表达式（语法类型是二义的），为了避免二义性，在解析过程中，JavaScript不能使用对象字面和函数表达式作为语句，即不能以下面的内容开头：
- '{}'；
- function关键词； _(所以IIFE模式需要将匿名函数放在一个括号内，如果不使用这个括号， JS会认为这是一个函数声明，而函数声明是不可以匿名的，而函数定义又不能立即执行。)_

#### 3.2 数字

刷题曾经遇到过一个这样的问题：

```javascript
// 以下那种写法能够正确输出？
1.toString()  // 唯一一种不能正常输出的。
1..toString()
1 .toString()
(1).toString()
1.0.toString()
```

之所以存在这种问题，是因为JS内所有数字都是以浮点数存储的，这里紧跟的'.'会被认为是小数点。

### 4. 值

> 在编程语言的语义和类型体系环境中，静态一般是指“编译时”或者“非运行时”，动态是指“运行时”。

#### 4.1 强制转换

JavaScript内置的转换机制只支持布尔值、数字、字符串和对象。

怪异的两个转换：

- `Number(null) === 0`
- `Number(undefined); // NaN`

两个约定的转换方式：

- 乘法运算符会强制转换为数字；
- 加法运算中如果一个是字符串，运算符会将另一个运算数转换为字符串。

引擎内自带一个转换算法，ToPrimitive()，根据情景的不同偏好，先后完成：

- 如果输入的是原始值，返回；
- 如果输入是对象，偏好为数值，调用valueOf（偏好为字符串时优先调用toString)；
- 否则，调用toString（valueOf）；
- 否则，抛出一个TypeError。

#### 4.2 null

null表示 __没有对象__ 。

null是原型链最顶端的元素。

```javascript
Object.getPrototypeOf(Object.prototype) // null
```

#### 4.3 原始值的包装对象（装箱）

布尔值，数字和字符串这三种原始值都有响应的构造函数。它们的实例包含原始值。原始值可以从包装器借调方法。

### 5. 运算符

JavaScript中无法重载或自定义运算符，包括等号。

NaN与本身不相等（宽松 & 严格）。

#### 5.1 比较

在比较包装实例和原始值的时候，原始值和包装的原始值是宽松相等的，（但两个相同的原始值它们的包装实例不相等）

### 6. 数字

Number()在转换时一般优于parseFloat(), 原因：

- 对非字符串使用parseFloat效率较低，因为在解析之前它会将参数强制转换为字符串；
- parseFloat()会将空字符串解析成NaN；
- parseFloat()会一直解析到最后一个合法的字符，这意味着最后可能得到的不是想要的结果，比如`parseFloat(123.45#)`

### 7. 字符

字符串是由JavaScript字符组成的不可变序列，其中每个字符是一个16位的UTF-16编码单元。（一个Unicode字符相当于一个或两个JavaScript字符）

优化：新版本JavaScript引擎通过加号+优化字符串拼接并在内部使用相似的方法（array.push()）。

### 8. 数组

不要用for-in来遍历数组，因为for-in只会遍历索引，而不是数组元素，其次还会遍历所有的（非索引）属性值。

注意，for-in遍历对象所有的可枚举属性，其中包括了继承来的属性，因此需要判断是否为自身的：

```javascript
for(var key in person) {
	if(Object.prototype.hasOwnProperty.call(person, key) { // 为了避免person自身有hasOwnProperty方法
    	console.log(key)   
    }
}
```

### 9. 错误处理

对于异常捕获有两个原则：如果一处出错的含义不能被描述，那么就抛错；找到一个可以捕获错误的位置，捕获异常。

Error是通用的异常构造器，所有其他的异常构造器都是它的子构造器，因此我们可以自定义错误构造器。

"Speaking JavaScript"阅读笔记（二）

### 写在前面

由于疫情的原因，这次离职比以往多了许多准备和复习的时间，也能沉下心好好复习一下基础知识点，本篇是我自己在阅读“Speaking JavaScript”时做出的摘录与笔记，在整理的过程中会加入一些自己想到的代码示例，并综合《JavaScript高级程序设计（第3版）》整理，如果有一些错误欢迎在下方的Disqus评论区指正，感谢！

~~为什么没有用最新的第四版高程呢？因为2019.10.16才正式有英文版，而且作者和第三版不是同一位……等到出了正式中文版再做一次补充吧~~

![Speaking JavaScript](https://cdn.arc-light.fun/N4DgB-/orm_front_cover.jpg "中文名：深入理解JavaScript")

## 0. JavaScript背景知识

### 0.1. JavaScript与ECMAScript的关系

ECMAScript是JavaScript的官方命名，因为Java已经是一个商标。JavaScript指编程语言，ECMAScript是语言规范的名字。

### 0.2. ECMAScript历程

* 1th Edition (1997-01)
* 2th Edition (1998-08)
* 3th Edition (1999-12, 4th Edition has been abandoned at 2008-07)
* 5th Edition (2009-12)
* 6th Edition - ECMAScript 2015
* 7th Edition - ECMAScript 2016
* 8th Edition - ECMAScript 2017
* 9th Edition - ECMAScript 2018
* 10th Edition - ECMAScript 2019
* ES.Next

## 1. JavaScript的一些特性

### 1.1 语法类别：语句和表达式

```javascript
var foo; // 语句, do something
3 * 7 // 表达式, 产生“值”
```

常见的一种情形是：三目表达式 与 `if-else`块。

### 1.2 分号：建议使用

分号用于结束语句，缺少的分号会通过分号自动插入机制(ASI)完成，什么是ASI呢？

> ASI的目标是使分号对于行结束来说是可选的，也有说法是帮助解析器来确定语句的结束。

__但是，在以下的情况下也会认定为语句结束: __

* 行结束符后（如换行符）跟着一个非法token；
* 遇到一个结束的花括号；
* 文件已达结尾；

```javascript
if(a<0) a = 0
console.log(a) // 0后跟console属于非法token
```

```javascript
function foo(a, b) {
	return // return意味着会自动插入一个分号，下文不再执行
  	{
    	a + b
    }
}
```

### 1.3 变量名

一个合法的变量名规则：第一个字符可以是任意的Unicode字符、美元符号($)、或者下划线( _ )，后面还可以是任意的Unicode数字。

> ECMAScript中的一切都区分大小写。

但是保留字不能作为变量名，除保留字外以下变量也不建议：

* `Infinity`
* `NaN`
* `undefined`

### 1.4 值

原始值：

* true、false
* 数字（均为浮点）
* 字符串
* “空值”: undefined, null

除以上外，其他的值都是对象，特殊的，通过“装箱”我们可以得到非原始值的“字符串”、“布尔”、“数字”。

> 当复制引用类型的值的时候，会复制一份值的副本到新变量分配的空间中，然而，**这个值的副本实际上是一个指针，指向存储在堆中的一个对象**。

#### 1.4.1 如何对值分类

1. typeof

typeof主要用于原始值，除`typeof null === 'object'`外，其他都有正确的输出。

> typeof null是一个不能修正的bug，因为这会破坏现有的代码。~~直到目前的标准也不能修改~~

1. instanceof

instanceof主要用于对象，用来判断 **value是否是一个通过Constr构造器创建的对象。**

### 1.5 布尔值

#### 1.5.1 假值

以下值会被解释为假值：

* undefined, null
* false
* ~~-0~~ , NaN (经过测试，目前浏览器对+0，-0均判断为false)
* ''

#### 1.5.2 二元操作符

JavaScript的二元逻辑运算符是 **短路** 的，也就是说我们可以利用这个特点优化代码，尽量将大概率发生的优先判断。

'&&'，'||'符号返回的是第一个运算数的 **假（真）值** 或者第二个运算数，也就是说其实际返回的是执行后的值。

### 1.6 数字

JavaScript中的所有的数字都是浮点数。

### 1.7 字符串

### 1.8 语句

* 多条件情况下，switch的运行效率要高于if-else；
* break可以跳离循环，continue会开始一个新的循环迭代，可以用来优化循环内的执行过程；

### 1.9 函数

#### 1.9.1 函数声明的提升特性

注意与变量声明之间的区别，函数声明 **的实体会被移动到所在作用域的开始处** 。

> 而变量声明会变成如下的代码：
>
> ```javascript
>     var a; // undefined
>     console.log(a); // undefined
>     a = 3; // 3
> ```

但是要注意函数声明与函数表达式不同，后者只符合变量声明的提升规则。

```javascript
console.log(a); // undefined
console.log(b); // Uncaught ReferenceError: b is not defined. stopped.
var a = function b() {
    return 3;
} 
console.log(a);
console.log(b);
```

#### 1.9.2 特殊变量arguments

所有参数变量——`arguments`看起来像一个数组，但是却不具备数组的方法。(Array-like)

如果想将arguments转换为数组，代码如下：

```javascript
Array.prototype.slice.call(arrayLikeObject);
```

### 1.10 变量作用域

一个变量的作用域总是完整的函数。

#### 1.10.1 提升

所有变量声明都会被提升，**声明** 会被移动到函数的开始处，而赋值仍然会在原来的位置。通常来说，优先提升`var a;`，然后再提升`function a`，然后再赋值。

#### 1.10.2 闭包

> 闭包是指有权访问另一个函数作用域中的变量的函数。 —— JS高程(第3版),后文简称高程

一般外层函数内部存在一些变量，然后以返回一个函数的形式完成闭包，最常见的模式即“IIFE”

#### 1.10.3 IIFE

```javascript
// 关于为什么这种写法可以完成IIFE，后续会补充在此。
(function () {
	var foo = 'test'
}());
```

这里要注意闭包有时会存在并 **保持** 与外界变量的联系，如下：

```javascript
for(var i=0;i<5;i++) {
	result.push(function () { return i; }) // result[1]()执行后仍然是i = 5赋值的时候
}
```

_与对象等有关的点单独总结一章详细说明_

"Speaking JavaScript"阅读笔记（一）

### RIA是什么？

Wiki百科对RIA的定义是：

> 丰富互联网应用程序（英语：Rich Internet applications，简称RIA），又译为丰富性网络应用服务，是一种具有近似于传统桌面应用软件系统功能和特性的网络应用系统。RIA系统最大的特点是将大部分处理任务都从用户界面端移植到客户端，仅保留一些必要数据与服务器端进行信息交互。

其中比较重要的特性有两个，第一点它依赖于浏览器环境，第二点是运行在独立的沙箱内部。

### RIA有哪些应用？

我在Vista系统的年代，下载过“三国杀”的客户端，原来是在浏览器环境内的一个Flash，后来有了Flash AIR的客户端，可以“脱离”浏览器环境运行独立的三国杀游戏。

~~之所以说是“脱离”，其实只是不在浏览器内，本质还是需要调用Flash组件与功能。~~

当然，依托于客户端能力，避免了频繁的页面请求，能够对运行和本地化起到比较关键的作用，也能够复用在页面使用的Flash等技术，更有效的利用客户端能力。

### RIA在2020年的新面貌

前一阵看到了一所国外大学的测试平台仍在使用Flash作为录音插件，众所周知，2020年Flash已经正式被各大浏览器所废弃，用户在使用这种旧方式的时候就需要通过设置临时开启Flash功能来正常完成测试。

但是不是说Flash被废弃后，RIA就没有了存在的意义呢？

我想并不是的，RIA更多的是一种思想，能够将前端技术扩展到更多的端，能够利用更多的客户端能力，是Flash等旧一代技术“退役”后不变的方向。

现在我们可以用Electron打包Web App，完成从浏览器端到客户端的过程；我们还可以借助部分浏览器支持的PWA特性，直接安装网页程序，或是通过Service Worker，增强本身的客户端能力。

除此之外，UWP以及Chrome插件环境也是前端技术在客户端的第二春，他们在实现上与浏览器非常类似，都能够实现更强的本地化需求。

对于前端熟悉又陌生的RIA

# 更新日志

### v0.2.0

* 从Now.sh 迁移到 Cloudflare Worker Sites，从Next.js迁移到Hexo（为了更丰富的插件环境）；
* 个人所有域名从sparking.app迁移到sparkling.land，公开服务则配置在sparkling.fun；
* 正在二次开发Icarus主题……
* 使用Amazon S3存储博客图片，体验一个月感受费用

### v0.1.0

* 使用Serverless架构重构博客，技术栈目前为(Next.js + Now.sh + Tailwind CSS)
* 重新配置Disqus评论模块
* 重新设计整体样式，使用React组件重构整体

### v0.0.1

* 通过Netlify + Foresty.io + Hexo完成自动部署，脱离纯git提交模式；
* 添加GA统计；
* 添加Disqus评论；

### 测试功能

上传一张图片

我的博客更新日志

```javascript
let EatMan = function () {
  this.task = [] // 声明一个task数组，模拟事件循环队列；
  this.taskNum = []
  let fn = () => {
    this.next();
  }
  this.task.push(fn);
  setTimeout(() => {
    this.next();
  }, 0)
  return this;
}

EatMan.prototype.eat = function (str) { // 为了task任务队列一致性，将eat也转换为setTimeout异步
  const _this = this
  var fn = () => {
    setTimeout(() => {
      console.log(str)
      _this.next()
    }, 0)
  }
  this.task.push(fn)
  this.taskNum.push(str)
  return this // 返回this使得可以链式操作
}
EatMan.prototype.sleep = function (ms) { // setTimeout的任务，需要在完成时再调用next继续执行
  const _this = this
  var fn = () => {
    setTimeout(() => {
      console.log('this is normal sleep.')
      _this.next()
    }, ms * 1000)
  }
  this.task.push(fn)
  this.taskNum.push('sleep')
  return this
}
EatMan.prototype.firstSleep = function (ms) { // 与sleep类似，注意需要在队首加入
  const _this = this
  var fn = () => {
    setTimeout(() => {
      console.log('this is first sleep.')
      _this.next()
    }, ms * 1000)
  }
  this.task.unshift(fn)
  this.taskNum.unshift('firstSleep')
  return this
}
EatMan.prototype.next = function () { // 通过next指针完成出队列操作，使之拥有顺序
  let fn = this.task.shift()
  fn && fn()
}

let eatMan = new EatMan()
eatMan.eat('apple').eat('orange').sleep(3).eat('banana').firstSleep(3)
console.log(eatMan.taskNum)
```

JS中的异步链式调用

## 先说浏览器的渲染模式

这里引用一段掘金作者“我是你的超级英雄”在[深入剖析：Vue核心之虚拟DOM](https://juejin.im/post/5d36cc575188257aea108a74) 一文中的描述：

> 所有的浏览器渲染引擎工作流程大致分为5步：创建DOM 树 —> 创建 Style Rules -> 构建 Render 树 —> 布局 Layout -—> 绘制 Painting。
> 第一步，构建 DOM 树：用 HTML 分析器，分析 HTML 元素，构建一棵 DOM 树；
> 第二步，生成样式表：用 CSS 分析器，分析 CSS 文件和元素上的 inline 样式，生成页面的样式表；
> 第三步，构建 Render 树：将 DOM 树和样式表关联起来，构建一棵 Render 树（Attachment）。每个 DOM 节点都有 attach 方法，接受样式信息，返回一个 render 对象（又名 renderer），这些 render 对象最终会被构建成一棵 Render 树；
> 第四步，确定节点坐标：根据 Render 树结构，为每个 Render 树上的节点确定一个在显示屏上出现的精确坐标；
> 第五步，绘制页面：根据 Render 树和节点显示坐标，然后调用每个节点的 paint 方法，将它们绘制出来。

DOM树是整个页面的骨架，承载着内容和结构的任务，而当下的Web开发会有大量与DOM树交互的需要，因此，虚拟DOM和diff算法应运而生，先在虚拟DOM上更新，再diff后应用局部的更新，减少了直接操作DOM树带来的重绘与重排问题，有关diff算法会在下一篇文章中做分析。

## Patch是何时执行的？

当vnode和oldVnode都存在、oldVnode不是真实节点，并且vnode和oldVnode是同一节点时，才会调用patchVnode进行patch。

## Patch/Update有哪些情况？

这里我们只说明后续响应的情况：

- 如果节点不同，则根据 __旧节点__ 参考使用 `nextSibling` 创建新节点并移除旧节点，其中Vue.js需要更新其中占位符节点（实际DOM节点）；
- 如果节点相同，则更新vnode的属性并更新到实际节点，旧节点本质上仍然不变；
- 如果节点存在子元素且子元素发生改变，则通过 `updateChildren` 更新子节点，这里可能会用到我们的key属性，进行快速比对diff。

从DOM与虚拟DOM了解Vue和React是如何响应数据变化的

## SaaS (软件即服务：Software as a Service)

> 举个不是非常恰当的例子，我想吃汉堡，我去汉堡店直接点汉堡，这是提供了“产品”来使用。

比如“石墨文档”这一类的在线应用，使用了他人提供好的成品软件，底层硬件和运行环境都交由平台管理，这种模式可以称为SaaS。

## PaaS (平台即服务：Platform as a service)

> 还是汉堡的例子，我觉得汉堡店的汉堡没那味儿，找了个可以DIY的店，这家店不提供成品的汉堡，但是会给我炉灶、炊具之类的，还有相关的材料，我可以自己做出自己需要的汉堡，这里提供了“平台”。

比如国外已经商业化的平台Heroku，这里并不需要用户去配置底层的硬件，只需要在容器内编写业务所需的代码即可。底层的操作系统、语言支持、硬件环境均由平台管理，这种可以称为PaaS。

## laaS (基础设施即服务：Infrastructure as a Service)

> 我觉得DIY的也不够好吃，想了想决定组一片地自己种原料自己管理店铺，自己组装一条生产线专门生产自己喜欢的汉堡。这些资源可以产出各式各样的产品，但是我只是借助它的“基础设施”完成我的需要，这种可以称为laaS。

比如目前的云平台，国外的DigitalOcean等，提供实际的基础设施，用户可以将自己的服务部署在相应的机器上使其运行并得到我们需要的结果，这种可以称为laaS。

## 其他新兴的模式

- 桌面即服务（DaaS）
- 无服务器计算（Serverless or FaaS）
	> 无服务器运算（英语：Serverless computing），又被称为功能即服务（Function-as-a-Service，缩写为 FaaS），是云计算的一种模型。以平台即服务（PaaS）为基础，无服务器运算提供一个微型的架构，终端客户不需要部署、配置或管理服务器服务，代码运行所需要的服务器服务皆由云端平台来提供。—— Wikipedia
- 安全即服务（Security as a service，SECaaS）
- 后端即服务（BaaS）
- 容器即服务 （Containers-as-a-Service）

SaaS, laaS, PaaS这些名词的快速理解

## Yarn与Package

1. `yarn remove [package]`

执行remove会同时移除package.json与yarn.lock。

## Yarn安装

1. `yarn install --force`

Yarn支持缓存依赖，如果曾经安装过相同的包，则会从缓存读取，并且能够离线安装，如果认为之前缓存的版本有问题，则需要使用`--force`来强制跳过缓存安装。也可以运行`yarn cache clean`移除所有本地缓存（可以指定包名单独清理）。

1. `yarn install --ignore-scripts`

Yarn和NPM在运行安装时，如果项目有相关的钩子，则会在相应的事件运行钩子，如果想避免执行钩子，则可以通过忽略scripts避免钩子执行。

1. `yarn global add`

Yarn的全局安装需要注意的是，在一些环境下`yarn config set prefix <filepath>`来设置全局安装位置，或者在如同`yarn global add create-react-app --prefix /usr/local`配置全局安装位置。

这个问题常见于Linux环境，如果我们执行`yarn config get prefix`得到的是`undefined`或者其他无法访问的目录，我们是不能够通过yarn global安装全局可执行的命令的，这时我们需要设置`yarn config set prefix ~/.yarn`然后在我们的\~/.bashrc(或者\~/.zshrc)文件内添加一行:

```bash
export PATH="$PATH:`yarn global bin`"
```

## Yarn CLI 相关

1. `yarn list --depth=0`

博主曾经遇到过一次本地环境阿里云SDK执行正常，但同事的执行故障，经过检查发现阿里云的SDK最近有更新，检查可以通过list命令，也可以指定具体的包。

1. `yarn upgrade-interactive [--latest]`

升级，升级包是一个核心需求，加入--latest可以忽视大版本直接获取对应包的最新版，如果是跨版本更新，则会同时修改package.json。

1. `yarn version --new-version <version>`

我们在更新项目时经常需要同时更新package.json的对应版本，如果需要结合CI流程则未免过于繁琐，可以对应执行yarn version来更新package.json。

## 你应该保留yarn.lock文件并提交到版本控制

yarn.lock文件内部包括了所有相关的依赖和版本信息，以及对应的包地址，为了能够保证在所有开发者以及开发环境（如CI等）的运行一致，建议保留并提交版本控制。

## 有关于切换源

> 原始默认的源：https://registry.yarnpkg.com

我们可以通过`yarn config set registry https://registry.npm.taobao.org/`来设置源为淘宝源，但是偶尔会出现一些安装问题，这里备份一下原始地址以供参考。

Yarn内那些冷门的命令

今天使用npm时，发现了一条如下的警告：

> npm WARN lifecycle The node binary used for scripts is /var/folders/g_/dslq6ff90pn_wyjv5g6578qm0000gn/T/yarn--1577473189287-0.1962072526914138/node but npm is using /usr/local/Cellar/node/13.5.0/bin/node itself. Use the \`--scripts-prepend-node-path\` option to include the path for the node binary npm was executed with.

这是因为yarn运行在独立的yarn环境下，解决此警告需要设置一条全局的config

    npm config set scripts-prepend-node-path true

执行NPM命令报lifecycle的警告解决

- 将端口添加到区域（永久 `--permanent`）
    ```bash
    firewall-cmd --zone=public --add-interface=eth0
    ```

- reload防火墙
    ```bash
    firewall-cmd --reload
    firewall-cmd --complete-reload # 需要断开链接
    ```
    
- 查看指定区域所有打开的端口
    ```bash
    firewall-cmd --zone=public --list-ports
    ```
    
- 在指定区域打开端口
    ```bash
    firewall-cmd --zone=public --add-port=80/tcp # (永久生效再加上 --permanent, udp设置同理)
    ```
    
- 查看防火墙状态
    ```bash
    systemctl status firewalld
    # firewall-cmd --state
    ```
    
- 防火墙启动/禁用等
    ```bash
    systemctl start firewalld # 启动防火墙
    systemctl stop firewalld # 禁用防火墙
    systemctl enable firewalld # 设置开机启动
    sytemctl disable firewalld # 停止并禁用开机启动
    firewall-cmd --reload # 重启防火墙
    ```

Spark1e

Category: all