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

前端

技术

生活

关于我

进入NetlifyCMS

Spark1e的Github

前往Twitter

给spark1e发邮件

在博客中搜索……

"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是如何响应数据变化的

## 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的警告解决

> 感谢[JS原型链与继承别再被问倒了 - 路易斯@juejin](https://juejin.im/post/58f94c9bb123db411953691b)

#### JavaScript的继承

继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支持两种继承方式: 接口继承 和 实现继承 .接口继承只继承方法签名,而实现继承则继承实际的方法.由于js中方法没有签名,在ECMAScript中无法实现接口继承.ECMAScript只支持实现继承,而且其 实现继承 主要是依靠原型链来实现的.

#### 构造函数、原型和实例

> 每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的内部指针.

> 如果试图引用对象(实例instance)的某个属性,会首先在对象内部寻找该属性,直至找不到,然后才在该对象的原型(instance.prototype)里去找这个属性.

所以我们有`constructor1.prototype = instance2`

如果试图引用constructor1构造的实例instance1的某个属性p1:
1).首先会在instance1内部属性中找一遍;
2).接着会在instance1.**proto**(constructor1.prototype)中找一遍,而constructor1.prototype 实际上是instance2, 也就是说在instance2中寻找该属性p1;
3).如果instance2中还是没有,此时程序不会灰心,它会继续在instance2.**proto**(constructor2.prototype)中寻找...直至Object的原型对象

![原型链与原型对象](https://cdn.arc-light.fun/6gnP2V/prototype-chain.jpg)

JavaScript的原型链与继承

#### computed
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A 。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

#### watch
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter；

watch有两个选项，deep和immediate

#### 两者的区别

computed: 适用于重新计算比较费时不用重复数据计算的环境。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。如果一个数据依赖于其他数据，那么把这个数据设计为computed

watch: 如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化

Vue中的 computed 和 watch的区别

#### Vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

#### 多个组件共享状态时
当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。

#### Vuex每个方法的区别
- mutations就是存放如何更改状态
- getters就是从state中派生出状态，比如将state中的某个状态进行过滤然后获取新的状态。
- actions就是mutation的加强版，它可以通过commit  mutations中的方法来改变状态，最重要的是它可以进行异步操作。
- modules顾名思义，就是当用这个容器来装这些状态还是显得混乱的时候，我们就可以把容器分成几块，把状态和管理规则分类来装。这和我们创建js模块是一个目的，让代码结构更清晰。

Spark1e

Category: frontend