Skywalker512 | Feed

XState 状态管理

Wed, 01 Apr 2020 00:00:00 GMT

我们在用 react 写 ui 界面的时候，总会掺杂许多的 js 表达式，这是 jsx 强大的地方，但是这让描述界面和控制混合起来，而降低了可读性和编写体验，我们既要去管理样式结构, 又要去管理各种状态。同时如果遇到注册登录或者发帖之类的地方我们需要编写许多的模板代码来对现在所处的状态进行判断 (eg. isLoading isLogined isCaptched ...) 然后他们之间又有许多的关联关系，比如在向后端提交注册登录时要先去判断用户是否通过验证码，是否填写了正确的内容之类的事情。然后社区中涌现了 XState 这种有限状态机的解决方案，下面就简单介绍一下他。

🔍 如何定义状态

一个按钮，有两种状态：

启用
禁用

我们在 redux 下建模时通常会赋予它一个真假值的属性，比如 isEnabled：

{
  isEnabled: true; // true 为启用状态，false 为禁用状态
}

假设点击按钮后，浏览器会从服务器加载一些数据回来，则在启用、禁用状态之外，按钮还应该有一个 loading 状态。于是它又多出一个属性，且叫它 isLoading：

{
  isEnabled: true,
  isLoading: false, // 新增 isLoading
}

然而这个模型有个非常明显的缺陷：isLoading 的状态其实从属于 isEnabled: true 的，只有在按钮启用状态下，我们才有可能进入 isLoading: true 状态，但上述模型并不能看出这个关系，我们只看到四种可能的组合：

// 4 种可能的状态组件
[
  {
    isEnabled: true,
    isLoading: true
  },
  {
    isEnabled: true,
    isLoading: false
  },
  {
    isEnabled: false,
    isLoading: true
  },
  {
    isEnabled: false,
    isLoading: true
  }
];

再来几个 isXyz？则上述组合会指数级增长。

我们另有一种建模方案：

{
  initial: 'enabled', // 按钮默认启用
  states: {
    enabled: {},
    disabled: {}
  }
}

这里我们给按钮定义了两种状态，分别是 enabled 与 disabled，初始状态为 enabled。

接着再引入 loading 状态：

{
  initial: 'enabled',
  states: {
    enabled: {
      initial: 'idle',
      states: {
        idle: {},
        loading: {} // loading 状态现在从属于 enabled 状态
      }
    },
    disabled: {}
  }
}

这里，在 enabled 状态下，我们细化了状态，分离出 idle 及 loading 两种子状态，于是 loading 与 enabled 间的从属关系一目了然。甚至，我们可以借由这样的数据绘制出谁都看得懂的图表：

这第二种建模方法，正是这一篇想要介绍的 statecharts - 如果你了解状态机，则不妨将 statecharts 理解为状态机的扩展，它解决了状态机状态易于爆炸的缺陷，使之真正可用。而 XState 则是 statecharts 的一个 JavaScript 实现。

对比两种建模方法，我们可以看到：

第一种建模方法里，所有的状态都是平行的，没有应有的从属关系，十分混乱，且每个新状态的引入都会迅速增加状态管理的难度；
借由 statecharts ，我们可以不断细分、深化状态，只要有需要，我们就可以源源不断引入新状态，不用担心状态失控。

💽 状态切换

在 statecharts 中，状态是有限的（finite）。拿上述按钮来说，在最外层，它只有两种状态，并且只能在这两种状态间切换。进入 enabled 状态后，则有两个子状态，idle 与 loading，默认为 idle，可以通过点击切换至 loading 状态：

import React from "react";
import { useMachine } from "@xstate/react";
import { Machine } from "xstate";

const toggleMachine = Machine({
  id: "button",
  // 初始化进入 enabled 状态
  initial: "enabled",
  states: {
    enabled: {
      initial: "idle",
      states: {
        idle: {
          on: {
            CLICK: {
              // CLICK 事件发生时，切换至 loading 状态
              target: "loading"
            }
          }
        },
        loading: {}
        // loading 状态不接收 **CLICK** 动作
      }
    },
    disabled: {}
  }
});

export default function App() {
  const [state, send] = useMachine(toggleMachine);

  return (
    <button onClick={() => send("CLICK")}>{JSON.stringify(state.value)}</button>
  );
}

你会发现按钮的状态从默认的 {enabled: 'idle'} 切换至 {enabled: 'loading'}，随后我们不管怎么点击，按钮都不再响应，这是因为 loading 状态不接受 click 动作。

这就能避免用户多次点击而造成的重复发帖，而不会出现四处出没的 isLoading 相比之下，statecharts 的代码则十分优雅，因为状态与状态之间有道天然屏障。

💊 副作用

进入 loading 状态后，就要启动 window.fetch 从 API 读取数据了。可是这异步操作的代码要写在哪儿？

我们知道，fetch 是一个 Promise，它启动时是 pending 状态，最后会进入 fulfilled 或 rejected 状态。没错，Promise 也是一个状态机：

{
  initial: 'pending',
  states: {
    pending: {
      RESOLVE: {
        target: 'fulfilled'
      },
      REJECT: {
        target: 'rejected'
      }
    },
    fulfilled: {},
    rejected: {}
  }
}

通过 XState 提供的 invoke，我们可以将它无缝接入 statecharts 中：

import React from "react";
import { useMachine } from "@xstate/react";
import { Machine } from "xstate";

const buttonMachine = Machine({
  id: "button",
  initial: "enabled",
  states: {
    enabled: {
      initial: "idle",
      states: {
        idle: {
          on: {
            CLICK: {
              target: "loading"
            }
          }
        },
        loading: {
          invoke: {
            id: "fetchData",
            src: (context, event) =>
              window
                .fetch("https://www.reddit.com/r/javascript.json")
                .then(resp => resp.json())
                .then(json => json.data.children.slice(0, 5))
                .then(r => console.log(r)),
            // 演示作用，所以从结果中只取 5 个数据
            onDone: {
              // fulfilled 情况下，切换入 idle 状态
              target: "idle"
            },
            onError: {
              // rejected 情况下，切换入 idle 状态
              target: "idle"
            }
          }
        }
      }
    },
    disabled: {}
  }
});

export default function App() {
  const [state, send] = useMachine(buttonMachine);

  return (
    <button onClick={() => send("CLICK")}>{JSON.stringify(state.value)}</button>
  );
}

📃 Context

显然，你要问了，加载回来的数据呢？存放在哪？怎么存？

我们在前面曾说过，statecharts 里，状态（state）是有限的（finite），这与 React 或是 Vue 不一样，它们仅区分 state 与 props，state 本身并不区分有限或无限。而 XState 下，除开有限的状态外，我们还可能拥有无限的数据，譬如前面我们从 reddit 加载回来的数据，它们将归入 context 中：

{
  id: 'button',
  initial: 'enabled',
  context: {
    list: [] // 数据存在 context 下
  },
  states: {
    enabled: {
      initial: 'idle',
      states: {
        idle: {
          on: {
            CLICK: {
              target: 'loading'
            }
          }
        },
        loading: {
          invoke: {
            id: 'fetchData',
            src: (context, event) =>
              window
                .fetch('https://www.reddit.com/r/javascript.json')
                .then(resp => resp.json())
                .then(json => json.data.children.slice(0, 5)),
            onDone: {
              target: 'idle',
              actions: assign({
                // 获取到数据后调用 XState.assign 将数据存入 context.list
                list: (context, event) => event.data
              })
            },
            onError: {
              target: 'idle'
            }
          }
        }
      }
    },
    disabled: {}
  }
}

invoke？assign？这都哪里来的？不不不，这些并非 XState 作者异想天开或是拍一下脑袋出来的，实际上，Statecharts 有一份推荐状态的 w3c 规范 SCXML，invoke、assign 正是该规范中定义的。

🍴 并行状态

现在我们要给上述按钮加个读秒的功能，以便了解 API 响应的速度。显然，这个状态跟 fetchData 应该是同时启动的，因此我们可以定义一个并行（parallel）状态：

import React from "react";
import { useMachine } from "@xstate/react";
import { Machine, assign } from "xstate";

const buttonMachine = Machine({
  id: "button",
  initial: "enabled",
  context: {
    list: [],
    timer: 0 // 在 context 中保存计时
  },
  states: {
    enabled: {
      initial: "idle",
      states: {
        idle: {
          on: {
            CLICK: {
              target: "loading"
            }
          }
        },
        loading: {
          entry: assign({
            // 进入 loading 状态时重置 timer
            timer: 0
          }),
          type: "parallel", // 注意这个 parallel
          // 表明 loading 下所有 states 是并行的
          states: {
            fetching: {
              // 一方面我们启动数据读取
              invoke: {
                id: "fetchData",
                src: (context, event) =>
                  window
                    .fetch("https://www.reddit.com/r/javascript.json")
                    .then(resp => resp.json())
                    .then(json => json.data.children.slice(0, 5)),
                onDone: {
                  target: "#button.enabled.idle",
                  actions: assign({
                    list: (context, event) => event.data
                  })
                },
                onError: {
                  target: "#button.enabled.idle"
                }
              }
            },
            counting: {
              // 另一方面我们启动读秒
              after: {
                // 延时 1ms 后的状态切换
                1: {
                  target: "counting",
                  actions: assign({
                    timer: (context, event) => context.timer + 1 // 续 1ms
                  })
                }
              }
            }
          }
        }
      }
    },
    disabled: {}
  }
});

export default function App() {
  const [state, send] = useMachine(buttonMachine);

  return (
    <>
      <button onClick={() => send("CLICK")}>
        {JSON.stringify(state.value.enabled)}
      </button>
      <ol>
        {state.context.list.map(item => (
          <li key={item.data.id}>{item.data.title}</li>
        ))}
      </ol>
      <span>{state.context.timer}</span>
    </>
  );
}

这太酷了！不是吗？

如果你一头雾水，Don't panic，正如前面我说过，statecharts 是能够绘图的：

现在是不是一目了然？甚至你还可以在可视化图例上点击触发各类事件，以查看状态切换的情况。

📕 参考

https://blog.zfanw.com/xstate-state-management/ (没有做太多改动)

Webpack 初识

Sun, 29 Mar 2020 00:00:00 GMT

这篇文章给学校组织上课的一部分，同时也是为了帮我补充以前没注意的问题。

Webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图 (dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

Webpack思想：一切皆模块

ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less 文件中的 @import 语句。
样式url(...))或 HTML 文件中的图片链接

所有项目中使用到的依赖文件都被视为模块，webpack 做的就是把这些模块进行处理，进行一系列的转换、压缩、合成、混淆操作，把项目文件打包成最原始的静态资源。

🏄 简单体验

创建目录结构

mkdir webpack-demo
cd webpack-demo

npm init -y

mkdir dist
mkdir src

在 dist 目录下创建 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<script src="main.js"></script>
<body>
    
</body>

</html>

在 src 目录下创建index.js

function timeout(time) {
  return new Promise(resolve => {
    setTimeout(resolve, time)
  })
}

async function asyncPrint(value, time) {
  await timeout(time)
  console.log(value)
}

asyncPrint('hello,world', 5000)

安装 webpack

在这之前你要安装好 nodejs，并保证她是最新的版本然后，进行以下步骤以保证你能位于中国的 pc 机上顺利的安装 npm 包。

设定中国镜像

npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
# 检查是否安装成功 
npm config list

安装 Windows build 环境（npm 上的有些包是 native 的，需要编译）
```
npm install -g windows-build-tools
```

//全局安装
npm install webpack webpack-cli -g
// **推荐**  局部安装，写入开发环境依赖
npm install webpack webpack-cli -D

执行webpack

# 以下代码生效基于 webpack4 零配置，只用于演示

# 如果为局部安装
npx webpack
# 使用 npx 命令，相当于他会在当前目录的 node_modules 的 .bin 目录下执行命令
# 此处未加 mode 选项，应该会有 warning，默认 mode 为production

# 增加 mode 后
npx webpack --mode development

webpack 会默认 src/index.js 文件为入口，dist/main.js 为出口打包

Hash: ce7e1fea469219fad208 // 本次打包对应唯一一个hash值 
Version: webpack 4.42.1 // 本次打包对应webpack版本
Time: 69ms // 消耗的时间
Built at: 2020-03-27 11:25:08 // 构建的时刻
  Asset      Size  Chunks             Chunk Names // 打包后的文件名，大小，分包的 id，入口文件名
main.js  1.02 KiB       0  [emitted]  main  
Entrypoint main = main.js
[0] ./src/index.js 245 bytes {0} [built]

🎯 正式开始

webpack4 拥有一些默认配置但是他并不是以零配置作为宣传口号，如果喜欢零配置使用的话，可以去看 parceljs，或者 ncc pkg（nodejs），而且对于不同的项目，我们往往需要高度的可定制性，这时候就需要我们自己写配置文件。在项目目录下创建 webpack.config.js (默认配置文件地址), 可以通过 --config <文件> 显式指定

//常用配置模块
module.exports = {
    entry: '',               // 入口文件
    output: {},	             // 出口文件
    devtool: '',             // 错误映射 （source-map）
    mode: '',                // 模式配置 （production / development ）
    module: {},              // 处理对应模块 （对文件做些处理）
    plugins: [],             // 插件 （压缩/做其他事情的）
    devServer: {},           // 开发服务器配置
    optimization: {},        // 压缩和模块分离
    resolve: {},             // 模块如何解析，路径别名
}

👉 入口 (entry) 与出口 (output)

单入口单出口

以下就是 webpack 的默认配置

const path = require('path');

module.exports = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
	}
};

写好配置文件后再次

npx webpack

效果不变借用 npm script，在 package.json 中 scripts 属性增加 script 如下

{
	...
    "scripts": {
        "dev": "webpack --mode development -w",
        "build": "webpack --mode production"
    }
    ...
}

npm run dev -> webpack --mode development -w
npm run build -> webpack --mode production

多入口与多出口

多入口多出口：多页面应用(MPA)，打包多个js文件，不同页面分别引入。
单入口多出口：单页面应用(SPA)，借助内置 splitChunksPlugins 模块进行代码分割，方便分离公共模块，

🛠 模式(mode)

module.exports = {
	...
    mode: 'development' || 'production'
    ...
}

mode 写入配置文件后，执行 webpack 时就不用再带 mode 选项

development 开发模式，即写代码的时候，在此模式下，为了提高开发效率，我们需要 提高编译速度，配置热更新和跨域，以及快速debug。
production 生产模式，即项目上线后，在此模式下，我们要 打包一份可部署代码，需要对代码进行压缩，拆分公共代码以及第三方js库

理解这两种模式容易，关键是根据不同的模式对 webpack 做不同的配置，因为不同模式下我们对代码的需求不一样。 开发项目时，通常会写两套不同的配置，一套用于开发环境，一套用于生产环境，两套不同配置包括三个配置文件，分别为

基础配置文件 webpack.config.js（包含开发与生产环境下都需要的配置）
开发环境配置文件 webpack.dev.js
生产环境配置文件 webpack.prod.js

以基础配置文件为入口，根据环境变量判断当前环境，使用 webpack-merge 插件融合相应环境配置文件。**

npm install -D webpack-merge

//webpack.config.js
const path = require('path')
const merge = require('webpack-merge')
const devConfig = require('./webpack.dev.js')
const prodConfig = require('./webpack.prod.js')

const commonConfig = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
  },
}

module.exports = env => {
  if (env && env.production) {
    return merge(commonConfig, prodConfig)
  } else {
    return merge(commonConfig, devConfig)
  }
}

// webpack.dev.js
module.exports = {
	mode: 'development',
	output: {
		filename: '[name].js',
	},
};

// webpack.prod.js
module.exports = {
  mode: 'production',
  output: {
    filename: '[name].[contenthash].js',
  },
}

对 scripts 字段改写如下因为我需要经常修改配置文件, 我们需要监控文件修改，然后重启 webpack，所以需要先安装 nodemon

npm install -D nodemon

{
    "scripts": {
        "dev": "nodemon --watch webpack.*.js --exec \"webpack -w\"",
        "build": "webpack --env.production"
    }
}

🗺 devtool（错误映射）(source-map)

devtool	构建速度	重新构建速度	生产环境	品质(quality)
(none)	+++	+++	yes	打包后的代码
eval	+++	+++	no	生成后的代码
cheap-eval-source-map	+	++	no	转换过的代码（仅限行）
cheap-module-eval-source-map	o	++	no	原始源代码（仅限行）
eval-source-map	--	+	no	原始源代码
cheap-source-map	+	o	yes	转换过的代码（仅限行）
cheap-module-source-map	o	-	yes	原始源代码（仅限行）
inline-cheap-source-map	+	o	no	转换过的代码（仅限行）
inline-cheap-module-source-map	o	-	no	原始源代码（仅限行）
source-map	--	--	yes	原始源代码
inline-source-map	--	--	no	原始源代码
hidden-source-map	--	--	yes	原始源代码
nosources-source-map	--	--	yes	无源代码内容

在 webpack.dev.js 和 webpack.prod.js 中分别加入 source-map

//webpack.dev.js
module.exports = {
  mode: 'development',
  devtool: 'source-map',
  output: {
      filename: '[name].js',
  }
}

//webpack.prod.js
module.exports = {
    mode: 'production',
    devtool: 'cheap-module-source-map',
    output: {
        filename: '[name].[contenthash].js'
    }
}

📫 plugins（插件）

插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项 (option) 自定义，有些插件你也可以在 一个单独配置文件 中进行配置。需要通过使用 new 操作符来创建它的一个实例。在我看来，plugins的主要作用有：

让打包过程更便捷（提供一些帮助，如自动生成入口的 html 文件）
开发环境对打包进行优化，加快打包速度
生产环境压缩代码

两个简单插件示例

html-webpack-plugin 这个插件可以在打包完成后自动生成index.html文件，并将打包生成的 js、css 文件引入。
```
npm install html-webpack-plugin -D
```

新建 public 文件夹并创建 index.html 作为模板文件 在 webpack.config.js 中

const HtmlWebpackPlugin = require('html-webpack-plugin');
const commonConfig = {
  plugins: [
      new HtmlWepackPlugin({
        template: 'public/index.html',
      }),
  ]
}

clean-webpack-plugin 自动清除上次打包生成的 dist 文件
```
npm install clean-webpack-plugin -D
```

在 webpack.prod.js 中

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
mode: 'production',
...
plugins: [new CleanWebpackPlugin()],
}

📜 module (loader)（文件预处理）

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！(官方) 在我看来，loader 的主要作用有：

处理图片、字体等资源
处理 css、预编译 sass/less/stylus
把 ES6+ 代码转义为 ES5

下面会引入 css、图片依赖，为使目录结构清晰，分别打包进单独文件夹 加载CSS

npm install css-loader style-loader mini-css-extract-plugin -D

在配置文件中加入 loader 注意：

use字段下如果有多个 loader，从后至前依次执行
开发环境下使用 css-loader 和 style-loader 会把 CSS 写进 JS，然后 JS 添加样式，写在内联 style 里
生产环境下借助 webpack4 的 mini-css-extract-plugin 把CSS文件单独分离，link 引入

//webpack.dev.js
module.exports = {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  output: {
    filename: 'js/[name].js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
}

// webpack.prod.js
...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  mode: 'production',
  ...
  output: {
    filename: 'js/[name].[contenthash].js', // 这里修改成 js 文件夹下面
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            }, // 文件打包至dist/css目录下，需配置 publicPath，以防等会引入图片出错
          },
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[hash:8].css', // css 样式打包到 css 文件夹下面
    }),
    ...
  ],
}

处理 less

npm install less-loader less -D

// webpack.prod.js
...

module.exports = {
 	... 
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../',
            }, // 文件打包至dist/css目录下，需配置publicPath，以防等会引入图片出错
          },
          'css-loader',
          'less-loader',
        ]
      }
    ],
  },
  ...
}

// webpack.dev.js
module.exports = {
	...
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      }
    ],
  },
}

打包图片

在CSS等文件引入图片

npm install file-loader url-loader -D

在 webpack.config.js 中

...
const commonConfig = {
	...
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              outputPath: 'images/',
            },
          },
        ],
      },
    ],
  },
 	....
}
...

url-loader 配合 file-loader，在 options 中限制添加 limit 可以把指定大小图片编码成 base64，减少网络请求。 babel —— 转义ES6+代码 babel 默认只转换语法, 而不转换新的API, 如需使用新的API, 还需要使用对应的转换插件，例如，默认情况下babel可以将箭头函数，class 等语法转换为 ES5 兼容的形式，但是却不能转换 Map，Set，Promise等新的全局对象，这时候就需要使用 polyfill 去模拟这些新特性。

# babel 核心
npm install babel-loader @babel/core -D

# @babel/plugin-transform-runtime 这个会创建一些辅助函数，以防污染全局
# @babel/plugin-transform-regenerator async 转换
# @babel/runtime-corejs3 corejs 是一个 polyfill
npm install @babel/plugin-transform-runtime @babel/runtime-corejs3 @babel/plugin-transform-regenerator -D

在 webpack.config.js 中

...

const commonConfig = {
		...
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: '/node_modules/',
                use: 'babel-loader',
            },
            ...
    },
  	...
}

...

在项目目录下新建 .babelrc.json 文件，写入options这里只是为了演示方便而写的配置，并不符合实际，一般网页项目都和结合 @babel/preset-env 和 .browserslistrc 来使用，如果想看他们的区别请看 https://segmentfault.com/a/1190000021188054 写的比较清楚。

// .babelrc.json

{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3,
        "proposals": true,
        "useESModules": true
      }
    ],
    ["@babel/plugin-transform-regenerator"]
  ]
}

🏗 devServer

npm install webpack-dev-server -D

每次编写完代码后，都要重新 npm run dev，为了提高开发效率，我们借助 webpack-dev-server 配置本地开发服务，主要字段如下：

// webpack.config.js

{
  	...
    devServer: {
        contentBase: './dist',    //配置开发服务运行时的文件根目录
        port: 3000,       //端口
        hot: true, //是否启用热更新
        open: false, //是否自动打开浏览器
    },
    ...
}

借助devServer，我们可以

方便的跑起本地服务而不用自己再去做资源处理
开发时借助代理实现跨域请求
开箱即用的 HMR（模块热更新）(需要 loader 支持，或者自己编写)

"scripts": {
    "dev": "nodemon --watch webpack.*.js --exec \"webpack-dev-server\"",
    "build": "webpack --env.production"
  },

// webpack.dev.js

const webpack = require('webpack');

...
plugins: [
    new webpack.HotModuleReplacementPlugin()
]
...

// ./src/test.js

export default () => {
    console.log(1)
}

// ./src/index.js

import test from './test';
...

if (module.hot) {
  module.hot.accept('./test.js', function() {
    test();
  })
}

test();

...

📦 原理

下面是怎么自己实现一个类似于 webpack 的打包工具

// ./bundler.js


// nodejs 文件处理
const fs = require('fs');
// nodejs 文件路径
const path = require('path');
// 生成 ast 的库
const parser = require('@babel/parser');
// 遍历 ast
const traver = require('@babel/traverse').default;
// babel es6 -> es5
const babel = require('@babel/core');

/**
 * 生成转义后的代码以及依赖关系
 * @param filePath
 * @returns {{code: string, filePath: string, dependencies: {}}}
 */
const moduleAnalyser = filePath => {
	// 拿到文件内容
	const content = fs.readFileSync(filePath, 'utf-8');
	// 生成 ast
	const ast = parser.parse(content, {
		// 使用 es module
		sourceType: 'module',
	});
	// 建立一个对象来接遍历的依赖
	// key: relativePath -> 也就是 import xx from '<relativePath>'
	// value: 唯一的绝对路径
	const dependencies = {};
	// 遍历 ast
	traver(ast, {
		ImportDeclaration ({ node }) {
			const relativePath = node.source.value;
			dependencies[relativePath] = path.join(path.dirname(filePath) + relativePath.slice(1));
		}
	});
	// 转义之后的代码
	const { code } = babel.transformSync(content, {
		presets: ['@babel/preset-env']
	});
	return {
		filePath,
		dependencies,
		code,
	};
};

/**
 * 生成依赖关系图
 * @param entry
 * @returns {{
 *   dependencies: {}
 *   code: string
 * }}
 */
const makeDependenciesGraph = entry => {
	// 入口模块
	const entryModule = moduleAnalyser(entry);
	// 关系图
	const graphArray = [entryModule];
	for (let i = 0; i < graphArray.length; i++) {
		// 拿到本次的 dependencies
		const { dependencies } = graphArray[i];
		if (dependencies) {
			// 遍历 dependencies，推到关系图中
			for (const j in dependencies) {
				graphArray.push(moduleAnalyser(dependencies[j]));
			}
		}
	}
	const graph = {};
	// 转换结构成对象
	// key: 绝对路径
	// value: dependencies, code
	graphArray.forEach(item => {
		graph[item.filePath] = {
			dependencies: item.dependencies,
			code: item.code
		};
	});
	return graph;
};

/**
 * 生成代码
 * @param entry
 * @returns {string}
 */
const generatorCode = entry => {
	const graph = makeDependenciesGraph(entry);
	console.log(graph);
	return `
	(function(graph){
		function require(module) {
			function localRequire(relativePath){
				return require(graph[module].dependencies[relativePath])
			}
			var exports = {};
			(function(require, code, exports){
				eval(code)
			})(localRequire, graph[module].code, exports);
			return exports;
		};
		require(${JSON.stringify(entry)});
	})(${JSON.stringify(graph)});
	`
};

console.log(generatorCode(path.resolve(__dirname, 'src', 'index.js')));

// src/index.js
import message from './message.js';

console.log(message);

// src/message.js
import { word } from './word.js';

const message = `hello ${word}`;

export default message;

// src/word.js
export const word = 'world';

参考 https://juejin.im/post/5cb0948ce51d456e6154b3f4

From 表单解析

Sun, 08 Mar 2020 00:00:00 GMT

这篇文章给学校组织上课的一部分，同时也是为了帮我补充以前没注意的问题。

网上有许多解析 From 表单的教程，但是他们要么太复杂，要么没法跟着完成，所以这里就从零开始解析一下 From 表单，当然实际使用还是用 mscdex/busboy 之类成熟的库。

🕵️‍♂️试一下

我们先来测试一下 form 表单上传服务器端会拿到什么东西。

const http = require('http');
const fs = require('fs');
let server = http.createServer((req,res) => {
  let str = '';
  req.on('data',(data) => {
    str+=data;
  });
  req.on('end',() => {
    console.log('|start|')
    console.log(str);
    console.log('|end|')
    console.log(`content-type:`, req.headers['content-type'])
    res.end();
  })
})

server.listen(8001, () => {
  console.log('Runing at: http://localhost:8001');
});

输出的结果：（是一个 1.txt 文件，里面的内容是 “redrock 测试”）

Runing at: http://localhost:8001
|start|
----------------------------083754191852957706053326
Content-Disposition: form-data; name="file"; filename="1.txt"
Content-Type: text/plain

redrock 测试
----------------------------083754191852957706053326
Content-Disposition: form-data; name="test"

testValue
----------------------------083754191852957706053326--

|end|
content-type: multipart/form-data; boundary=--------------------------083754191852957706053326

🔎 分析 FORM 表单内容

这里我们有两个问题，form 表单可以有多个属性，比如你可以上传头像，同时上传你的个人信息。所以怎么样将多个属性分出来，然后对是否是文件进行判断。

多个属性分出来：在这里我们可以看到是比较有规律的，我们可以通过请求头里面的 content-type 字段中的 boundary 来对进行分割

区分文件：

Content-Disposition 是否有两行来进行判别。

文件

Content-Disposition: form-data; name="file"; filename="1.txt"
Content-Type: text/plain

普通

Content-Disposition: form-data; name="test"

上面的 from 表单部分我们就先转换成

--<分隔符>
Content-Disposition: form-data; name="file"; filename="1.txt"
Content-Type: text/plain

redrock 测试
--<分隔符>
Content-Disposition: form-data; name="test"

testValue
--<分隔符>--

把换行转换一下就成了这样

--<分隔符>\r\nContent-Disposition: form-data; name="file"; filename="1.txt"\r\nContent-Type: text/plain\r\n\r\nredrock 测试\r\n--<分隔符>\r\nContent-Disposition: form-data; name="test"\r\n\r\ntestValue\r\n--<分隔符>--\r\n

简化一下就是

--<分隔符>\r\n数据描述1\r\n数据描述2\r\n\r\n<文件内容>\r\n
--<分隔符>\r\n数据描述\r\n\r\n数据值\r\n
--<分隔符>--

我们学过 js 中有些内建类型中有 split方法能分割

[ 
  空,
  \r\n数据描述1\r\n数据描述2\r\n\r\n<文件内容>\r\n,
  \r\n数据描述\r\n\r\n数据值\r\n,
  --\r\n
]

将数组两头的东西拿掉

[ 
  \r\n数据描述1\r\n数据描述2\r\n\r\n<文件内容>\r\n,
  \r\n数据描述\r\n\r\n数据值\r\n
]

观察一下数组中每个两头都有 \r\n

[ 
  数据描述1\r\n数据描述2\r\n\r\n<文件内容>,
  数据描述\r\n\r\n数据值
]

再在 \r\n\r\n 分割一下

文件数据：[数据描述1\r\n数据描述2, <文件内容>]
  或
普通数据：[数据描述, 数据值]

📊 完整代码

const http = require('http'),
  URL = require('url'),
  fs = require('fs');

Buffer.prototype.split = Buffer.prototype.split || function (b) {
  let arr = [];

  let cur = 0;
  let n = 0;
  while ((n = this.indexOf(b, cur)) != -1) {
    arr.push(this.slice(cur, n));
    cur = n + b.length;
  }

  arr.push(this.slice(cur));

  return arr;
};

/**
 * 显示文件
 * @param {String} pathname
 * @return {Promise<fs.ReadStream>}
 */
const fileShow = pathname =>
  new Promise((reslove, reject) => {
    fs.stat(pathname, (err, status) => {
      if (err) reject(err);
      if (!status.isFile()) reslove(false);
      else reslove(fs.createReadStream(pathname, { encoding: 'utf-8', flag: 'r' }));
    });
  });

/**
 * 上传文件
 * @param {http.IncomingMessage} req
 * @return {Promise}
 */
const uploadFile = req => new Promise((reslove, reject) => {
  let arr = []; // 文件数据
  req.on("data", function (chunk) {
    // Buffer
    arr.push(chunk)
  });
  req.on("end", function () {
    try {
      let data = Buffer.concat(arr);
      if (!req.headers['content-type']) reject()
      // req.headers['content-type'] ----> multipart/form-data; boundary=----WebKitFormBoundarys4qd7J4TILGjv4KE
      let str = req.headers['content-type'].split('; ')[1];
      // str ----> boundary=----WebKitFormBoundarys4qd7J4TILGjv4KE
      if (str) reject();
      // content-type 和 form-data 有两个 -- 的差距, 抹平差异
      let boundary = '--' + str.split('=')[1];
      //1.用"分隔符切分整个数据"
      let arr = data.split(boundary);

      //2.丢弃头尾两个数据
      arr.shift();
      arr.pop();

      //3.丢弃掉每个数据头尾的"\r\n"
      arr = arr.map(buffer => buffer.slice(2, buffer.length - 2));

      //4.每个数据在第一个"\r\n\r\n"处切成两半
      arr.forEach(buffer => {
        let n = buffer.split('\r\n\r\n');

        let disposition = n[0];
        let content = n[1];

        disposition = disposition.toString();

        if (disposition.indexOf('\r\n') === -1) {
          //普通数据
          // Content-Disposition: form-data; name="user"
        } else {
          //文件数据
          /*Content-Disposition: form-data; name="file"; filename="发现_1.png"        
            Content-Type: image/png*/
          let [line1, line2] = disposition.split('\r\n');
          let [, name, filename] = line1.split('; ');
          let type = line2.split(': ')[1];

          name = name.split('=')[1];
          name = name.substring(1, name.length - 1);

          filename = filename.split('=')[1];
          filename = filename.substring(1, filename.length - 1);

          let path = `upload/${filename}`;

          fs.writeFile(path, content, err => {
            if (err) {
              reject(err)
            } else {
              reslove()
            }
          });
        }
      });
    } catch (error) {
      reject(error)
    }
  })
});

const server = http.createServer(async (req, res) => {
  const { url, method } = req;
  const { pathname } = URL.parse(url);
  if (method.toUpperCase() === 'GET') {
    try {
      const data = await fileShow('.' + pathname);
      if (!data) {
        res.writeHead(404);
        res.end('404 not found');
      } else {
        res.writeHead(200);
        data.pipe(res);
      }
    } catch (error) {
      console.log(error);
      res.writeHead(500);
      res.end('500 Internal Server Error');
    }
  } else if (method.toUpperCase() === 'POST') {
    try {
      await uploadFile(req)
      res.end();
    } catch (error) {
      console.log(error);
      res.writeHead(500);
      res.end('500 Internal Server Error');
    }
  } else {
    // https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status/405
    res.writeHead(405);
    res.end('405 Method Not Allowed');
  }
});

server.listen(8000);
console.log('Runing at: http://localhost:8000')

Websocket 初识

Sun, 08 Mar 2020 00:00:00 GMT

这篇文章给学校组织上课的一部分，同时也是为了帮我补充以前没注意的问题。

以前都没怎么了解过 Websocket，最多也是用过 pusher 之类的成套解决方案，所以这里就对 Websocket 发生的整个过程做一个了解。这里使用原生搭建，因为 nodejs 的 WebSocket 很原始，需要自己做很多事情。

1. 服务端创建一个Net服务器

// 引入net模块
const net = require('net')

// 使用net模块创建服务器，返回的是一个原始的socket对象
const server = net.createServer((socket) => {

})

server.listen(8002, () => {
	console.log('Runing at: ws://localhost:8002')
})

在你的页面的 script 标签中写上

const ws = new WebSocket('ws://localhost:8080/')

2. Web端创建一个WebSocket链接

创建一个 WebSocket 连接，此时控制台的 Network 模块可以看到一个处于pending状态的HTTP连接。

这个连接是一个 HTTP 请求，与普通HTTP请求的请求你头相比，增加了以下内容：

Sec-WebSocket-Extensions: permessage-deflate; clientmaxwindow_bits // 扩展信息
Sec-WebSocket-Key: D27bMuu0x12Q2VJ7iE0ANw== // 发送一个Key到服务端，用于校验服务端是否支持WebSocket
Sec-WebSocket-Version: 13 // WebSocket 版本
Upgrade: websocket // 告知服务器通信协议将会升级到 WebSocket 若服务器支持则继续下一步

3. 服务端使用socket.once，触发一次data事件处理HTTP请求头数据

socket.once('data', (buffer) => {
  // 接收到HTTP请求头数据
  const str = buffer.toString()
  console.log(str)
})

打印结果如下：

Runing at: ws://localhost:8002
GET / HTTP/1.1
Host: localhost:8002
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.132 Safari/537.36 Edg/80.0.361.66      
Upgrade: websocket
Origin: http://127.0.0.1:5500
Sec-WebSocket-Version: 13
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6
Cookie: xxx
Sec-WebSocket-Key: p9koDI+fzMQI/LAka5jzng==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits

和以前的一样我们将换行符转换之后就成了这样

Runing at: ws://localhost:8002\r\nGET / HTTP/1.1\r\nHost: localhost:8002\r\n...

就可以通过以下的函数得到 header 信息

const parseHeader = str => {
    // 将请求头数据按回车符切割为数组，得到每一行数据
    let arr = str.split('\r\n').filter(item => item)
    // 第一行数据为GET / HTTP/1.1，可以丢弃。
    arr.shift()
    let headers = {}  // 存储最终处理的数据
    arr.forEach((item) => {
        // 需要用":"将数组切割成key和value
        let [name, value] = item.split(':')
        // 去除无用的空格，将属性名转为小写
        name = name.toLowerCase()
        value = value.trim()
        // 获取所有的请求头属性
        headers[name] = value
    })
    return headers
}

5. 根据请求头参数，判断是否WebSocket请求

根据 headers['upgrade'] !== 'websocket'，判断该HTTP连接是否可升级为 WebSocket，若可以升级，表示为WebSocket 请求。
根据 headers['sec-websocket-version'] !== '13'，判断WebSocket的版本是否为 13，以免因为版本不同出现兼容问题。

socket.once('data', buffer => {
    // 接收到HTTP请求头数据
    const str = buffer.toString()
    // 将请求头数据转为对象
    const headers = parseHeader(str)
    // 判断请求是否为WebSocket连接
    if (headers['upgrade'] !== 'websocket') {
        // 若当前请求不是WebSocket连接，则关闭连接
        console.log('非 WebSocket 连接')
        socket.end()
    } else if (headers['sec-websocket-version'] !== '13') {
        // 判断WebSocket版本是否为13，防止是其他版本，造成兼容错误
        console.log('WebSocket 版本错误')
        socket.end()
    } else {
        // 请求为WebSocket连接时，进一步处理
    }
})

6. 校验Sec-WebSocket-Key，完成连接

根据协议规定的方式，向前端返回一个请求头，完成建立 WebSocket 连接的过程。

若客户端校验结果正确，在控制台的 Network 模块可以看到HTTP请求的状态码变为101 Switching Protocols，同时客户端的 ws.onopen 事件被触发。

// 校验Sec-WebSocket-Key，完成连接
/* 
  协议中规定的校验用GUID，可参考如下链接：
  https://tools.ietf.org/html/rfc6455#section-5.5.2
  https://stackoverflow.com/questions/13456017/what-does-258eafa5-e914-47da-95ca-c5ab0dc85b11-means-in-websocket-protocol
*/
const GUID = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
const key = headers['sec-websocket-key']
const hash = crypto.createHash('sha1')  // 创建一个签名算法为sha1的哈希对象

hash.update(`${key}${GUID}`)  // 将key和GUID连接后，更新到hash
const result = hash.digest('base64') // 生成base64字符串
const header = `HTTP/1.1 101 Switching Protocols\r\nUpgrade: websocket\r\nConnection: Upgrade\r\nSec-Websocket-Accept: ${result}\r\n\r\n` // 生成供前端校验用的请求头

socket.write(header)  // 返回HTTP头，告知客户端校验结果，HTTP状态码101表示切换协议：https://httpstatuses.com/101。
// 若客户端校验结果正确，在控制台的 Network 模块可以看到HTTP请求的状态码变为 101 Switching Protocols，同时客户端的ws.onopen事件被触发。

// 将建立连接的客户端推到数组中
list.push(socket)
console.log(list.length)
// 处理聊天数据

7. 建立连接后，通过data事件接收客户端的数据并处理

连接开始后，可以在控制台的 Network 模块看到，该连接会一直保留在 pending 状态，直到连接断开。

因为这里使用的是原生，所以数据帧也要我们自己解析，有兴趣的同学可以稍微看一下(我反正只能说抱歉了)

此时可以通过 data 事件处理客户端的数据，但此时双方通信的数据为二进制，需要按照其格式进行处理后才可以正常使用。

处理收到的数据：

// 处理收到的数据
function decodeWsFrame(data) {
  let start = 0;
  let frame = {
    isFinal: (data[start] & 0x80) === 0x80,
    opcode: data[start++] & 0xF,
    masked: (data[start] & 0x80) === 0x80,
    payloadLen: data[start++] & 0x7F,
    maskingKey: '',
    payloadData: null
  };

  if (frame.payloadLen === 126) {
    frame.payloadLen = (data[start++] << 8) + data[start++];
  } else if (frame.payloadLen === 127) {
    frame.payloadLen = 0;
    for (let i = 7; i >= 0; --i) {
      frame.payloadLen += (data[start++] << (i * 8));
    }
  }

  if (frame.payloadLen) {
    if (frame.masked) {
      const maskingKey = [
        data[start++],
        data[start++],
        data[start++],
        data[start++]
      ];

      frame.maskingKey = maskingKey;

      frame.payloadData = data
        .slice(start, start + frame.payloadLen)
        .map((byte, idx) => byte ^ maskingKey[idx % 4]);
    } else {
      frame.payloadData = data.slice(start, start + frame.payloadLen);
    }
  }

  return frame;
}

处理发出的数据：

function encodeWsFrame(data) {
  const isFinal = data.isFinal !== undefined ? data.isFinal : true,
    opcode = data.opcode !== undefined ? data.opcode : 1,
    payloadData = data.payloadData ? Buffer.from(data.payloadData) : null,
    payloadLen = payloadData ? payloadData.length : 0;

  let frame = [];

  if (isFinal) frame.push((1 << 7) + opcode);
  else frame.push(opcode);

  if (payloadLen < 126) {
    frame.push(payloadLen);
  } else if (payloadLen < 65536) {
    frame.push(126, payloadLen >> 8, payloadLen & 0xFF);
  } else {
    frame.push(127);
    for (let i = 7; i >= 0; --i) {
      frame.push((payloadLen & (0xFF << (i * 8))) >> (i * 8));
    }
  }

  frame = payloadData ? Buffer.concat([Buffer.from(frame), payloadData]) : Buffer.from(frame);

  return frame;
}

发送给客户端（这里的广播处理尽量简单）

const data = decodeWsFrame(buffer)
// opcode为8，表示客户端发起了断开连接
if (data.opcode === 8) {
  socket.end()  // 与客户端断开连接
} else {
  // 接收到客户端数据时的处理，此处默认为返回接收到的数据。
  // 更新那些客户端还在
  list = list.filter(item => !item.destroyed)
  list.forEach(item => {
    item.write(encodeWsFrame({ payloadData: `服务端接收到的消息为：${data.payloadData ? data.payloadData.toString() : ''}` }))
  })
}

完整代码

// 引入net模块
const net = require('net')
const crypto = require('crypto')

// 处理收到的数据
function decodeWsFrame(data) {
  let start = 0;
  let frame = {
    isFinal: (data[start] & 0x80) === 0x80,
    opcode: data[start++] & 0xF,
    masked: (data[start] & 0x80) === 0x80,
    payloadLen: data[start++] & 0x7F,
    maskingKey: '',
    payloadData: null
  };

  if (frame.payloadLen === 126) {
    frame.payloadLen = (data[start++] << 8) + data[start++];
  } else if (frame.payloadLen === 127) {
    frame.payloadLen = 0;
    for (let i = 7; i >= 0; --i) {
      frame.payloadLen += (data[start++] << (i * 8));
    }
  }

  if (frame.payloadLen) {
    if (frame.masked) {
      const maskingKey = [
        data[start++],
        data[start++],
        data[start++],
        data[start++]
      ];

      frame.maskingKey = maskingKey;

      frame.payloadData = data
        .slice(start, start + frame.payloadLen)
        .map((byte, idx) => byte ^ maskingKey[idx % 4]);
    } else {
      frame.payloadData = data.slice(start, start + frame.payloadLen);
    }
  }

  return frame;
}

// 处理发出的数据
function encodeWsFrame(data) {
  const isFinal = data.isFinal !== undefined ? data.isFinal : true,
    opcode = data.opcode !== undefined ? data.opcode : 1,
    payloadData = data.payloadData ? Buffer.from(data.payloadData) : null,
    payloadLen = payloadData ? payloadData.length : 0;

  let frame = [];

  if (isFinal) frame.push((1 << 7) + opcode);
  else frame.push(opcode);

  if (payloadLen < 126) {
    frame.push(payloadLen);
  } else if (payloadLen < 65536) {
    frame.push(126, payloadLen >> 8, payloadLen & 0xFF);
  } else {
    frame.push(127);
    for (let i = 7; i >= 0; --i) {
      frame.push((payloadLen & (0xFF << (i * 8))) >> (i * 8));
    }
  }

  frame = payloadData ? Buffer.concat([Buffer.from(frame), payloadData]) : Buffer.from(frame);

  return frame;
}


const parseHeader = str => {
  // 将请求头数据按回车符切割为数组，得到每一行数据
  let arr = str.split('\r\n').filter(item => item)
  // 第一行数据为GET / HTTP/1.1，可以丢弃。
  arr.shift()
  let headers = {}  // 存储最终处理的数据
  arr.forEach((item) => {
    // 需要用":"将数组切割成key和value
    let [name, value] = item.split(':')
    // 去除无用的空格，将属性名转为小写
    name = name.toLowerCase()
    value = value.trim()
    // 获取所有的请求头属性
    headers[name] = value
  })
  return headers
}

// 在内存里面存储一个连接服务器的列表
let list = [];

// 使用net模块创建服务器，返回的是一个原始的socket对象，与Socket.io的socket对象不同。
const server = net.createServer((socket) => {
  socket.once('data', buffer => {
    // 接收到HTTP请求头数据
    const str = buffer.toString()
    // 将请求头数据转为对象
    const headers = parseHeader(str)
    // 判断请求是否为WebSocket连接
    if (headers['upgrade'] !== 'websocket') {
      // 若当前请求不是WebSocket连接，则关闭连接
      console.log('非 WebSocket 连接')
      socket.end()
    } else if (headers['sec-websocket-version'] !== '13') {
      // 判断WebSocket版本是否为13，防止是其他版本，造成兼容错误
      console.log('WebSocket 版本错误')
      socket.end()
    } else {
      // 校验Sec-WebSocket-Key，完成连接
      /* 
        协议中规定的校验用GUID，可参考如下链接：
        https://tools.ietf.org/html/rfc6455#section-5.5.2
        https://stackoverflow.com/questions/13456017/what-does-258eafa5-e914-47da-95ca-c5ab0dc85b11-means-in-websocket-protocol
      */
      const GUID = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
      const key = headers['sec-websocket-key']
      const hash = crypto.createHash('sha1')  // 创建一个签名算法为sha1的哈希对象

      hash.update(`${key}${GUID}`)  // 将key和GUID连接后，更新到hash
      const result = hash.digest('base64') // 生成base64字符串
      const header = [
        'HTTP/1.1 101 Switching Protocols',
        'Upgrade: websocket',
        'Connection: Upgrade',
        `Sec-WebSocket-Accept: ${result}`,
        '\r\n'
      ].join('\r\n'); // 生成供前端校验用的请求头

      socket.write(header)  // 返回HTTP头，告知客户端校验结果，HTTP状态码101表示切换协议：https://httpstatuses.com/101。
      // 若客户端校验结果正确，在控制台的 Network 模块可以看到HTTP请求的状态码变为 101 Switching Protocols，同时客户端的ws.onopen事件被触发。

      // 将建立连接的客户端推到数组中
      list.push(socket)
      console.log(list.length)

      // 7. 建立连接后，通过data事件接收客户端的数据并处理
      socket.on('data', (buffer) => {
        const data = decodeWsFrame(buffer)

        // opcode为8，表示客户端发起了断开连接
        if (data.opcode === 8) {
          socket.end()  // 与客户端断开连接
        } else {
          // 接收到客户端数据时的处理，此处默认为返回接收到的数据。
          // 更新那些客户端还在
          list = list.filter(item => !item.destroyed)
          list.forEach(item => {
            item.write(encodeWsFrame({ payloadData: `服务端接收到的消息为：${data.payloadData ? data.payloadData.toString() : ''}` }))
          })
        }
      })
    }
  })
})

server.listen(8002, () => {
  console.log('Runing at: ws://localhost:8002')
})

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="text" id="input" value="test message"><br />
    <input type="button" value="发送消息" id="send"><br />
    <h3>接收到的消息：</h3>
    <input type="button" value="关闭聊天" id="close"><br />
    <script>
        const ws = new WebSocket('ws://localhost:8002/')

        // 连接打开的事件，连接开始后，可以在控制台的Network模块看到，该连接会一直保留在pending状态，直到连接断开。
        ws.onopen = function () {
            console.log('连接已建立')
        }

        // 接收消息的事件
        ws.onmessage = function (response) {
            console.log(response)
            document.querySelector('h3').insertAdjacentHTML('afterend', `<p>${response.data}<p>`)
        }

        // 连接正常关闭的事件
        ws.onclose = function () {
            console.log('连接已关闭')
            document.querySelector('p').innerHTML = '连接已关闭'
        }

        // 连接出错的事件
        ws.onerror = function () {
            console.log('连接出错')
        }
    </script>
    <script>
        document.querySelector('#send').addEventListener('click', function () {
            ws.send(document.querySelector('#input').value)
        })

        document.querySelector('#close').addEventListener('click', function () {
            ws.close()
        })
    </script>
</body>

</html>

参考

https://github.com/chencl1986/Blog/issues/51

Overlay Networking (Tunnel)

Sat, 30 Nov 2019 00:00:00 GMT

这篇文章写于 2019-11-30 可能其中的内容已经发生更改

简介

我们知道其实有很多内网穿透，或者能实现这个功能的工具，可以分为以下几类：proxy代理、第三方服务器、UPnP、DMZ、~~sproofing、dns转换~~、pwnat

监听端口，反代型
- frp
- ngrok
他们有两个明显的缺点，1. 只能代理端口 2. 不是 p2p，需要服务器中转
普通 vpn
- WireGuard
- OpenVPN
- ...
他们有一个矛盾，要么流量的路由不是最短的（就是说有中转），要么配置特别麻烦（就是加入一个服务器就要修改所有的服务）
Automatic full mesh routing (通俗的来说就是 p2p)
- tinc-vpn
- nebula（slack 大量运用，十多天前开源）
- zerotier
（越后面的配置越容易）

他们都有一个特征，有一个类似于中心化管理的地方（比如 nebula 叫做 lighthouse）他们记录了每个服务器的ip，这样就能建立 p2p 的 vpn 了
pwnat

这个通过一些方法能在不需要第三方参与的情况下完成 p2p 链接。

nebula

这里说一下 nebula 配置因为国内相关的内容比较少

生成证书

先在自己的电脑上下载 cli 工具 Release
```
./nebula-cert ca -name "RedRock"
```
这时这个目录下面就有了 ca.key（根据这个生成，要保护好）和 ca.crt

生成节点的证书

./nebula-cert sign -name "lighthouse1" -ip "192.168.101.1/24"
./nebula-cert sign -name "node1" -ip "192.168.101.2/24"
./nebula-cert sign -name "node2" -ip "192.168.101.3/24"

编写配置文件（config.yaml）

lighthouse

pki:
ca: /etc/nebula/ca.crt
cert: /etc/nebula/lighthouse1.crt
key: /etc/nebula/lighthouse1.key
static_host_map:

lighthouse:
am_lighthouse: true
interval: 60
# 如果是 lighthouse 这里必须留空
hosts:

listen:
host: 0.0.0.0
port: 4242

# 避免防火墙 nat 映射过期
punchy: true
tun:
# 网卡名字
dev: nebula1
drop_local_broadcast: false
drop_multicast: false
tx_queue: 500
mtu: 1300
routes:

logging:
level: info
format: text

firewall:
conntrack:
    tcp_timeout: 120h
    udp_timeout: 3m
    default_timeout: 10m
    max_connections: 100000

outbound:
    - port: any
    proto: any
    host: any
inbound:
    - port: any
    proto: any
    host: any

node

pki:
  ca: /etc/nebula/ca.crt
  cert: /etc/nebula/node1.crt # 这里需要改名字
  key: /etc/nebula/node1.key
static_host_map:
  # 必须准确的告诉 nebula lighthouse 服务器的地址
  "192.168.101.1": ["xx.xx.xx.xx:4242"]

lighthouse:
  am_lighthouse: false
  interval: 60
  hosts:
    #  lighthouse 服务器地址
    - "192.168.101.1"
listen:
  host: 0.0.0.0
  # 设置为 0 随机生成
  port: 0

# 避免防火墙 nat 映射过期
punchy: true
tun:
  # 网卡名字
  dev: nebula1
  drop_local_broadcast: false
  drop_multicast: false
  tx_queue: 500
  mtu: 1300
  routes:

logging:
  level: info
  format: text

firewall:
  conntrack:
    tcp_timeout: 120h
    udp_timeout: 3m
    default_timeout: 10m
    max_connections: 100000

  outbound:
    - port: any
      proto: any
      host: any
  inbound:
    - port: any
      proto: any
      host: any

服务器安装配置

将 ca.crt 和对应的 xxx.crt, xxx.key 上传到 /etc/nebula/
上传对应系统的 nebula 到 /usr/local/bin/
可执行 chmod +x /usr/local/bin/nebula
systemd 服务

cat > /etc/systemd/system/nebula.service <<EOF
[Unit]
Description=nebula
Wants=basic.target
After=basic.target network.target

[Service]
SyslogIdentifier=nebula
StandardOutput=syslog
StandardError=syslog
ExecReload=/bin/kill -HUP $MAINPID
ExecStart=/usr/local/bin/nebula -config /etc/nebula/config.yaml
Restart=always

[Install]
WantedBy=multi-user.target
EOF

systemctl enable nebula
systemctl start nebula

UDP 打洞

这些工具的都使用了 UDP 打洞，穿透 NAT 的一个难点就是需要在 NAT 中建立一个映射关系，而且这个映射关系还和 NAT 的类型有关，所以有些 NAT 就不能穿透（需要进行猜测端口），这里讲的是，两边都是 限制锥形NAT或者端口限制锥形NAT

zerotier

zerotier 的结构比较有趣，我们来看看他的组成

这个组成其实和 dns 比较相似，如果 LEAF（叶子）之间没有链接，就到 moon 中去找，如果没有的话继续向上PLANET 查询

然后他的配置在网上都烂大街了，这里就不说了。需要注意的就是如果加入 moon 服务器可能不怎么顺利，需要把 moon 生成的文件粘贴到 LEAF 对应的目录中。

pwnat

这个就更为神奇了，他能在不用第三方的参与下，完成 p2p 的链接，之前不是说了一个外部索引服务器来存储每个服务的 ip 地址，并且还要转发映射关系。这就是参与进来的第三方，而 pwnat 通过伪装 ICMP跳跃点的方式来得知对方的 ip。

什么是 ICMP 跳跃点？大家用过路由追踪吧，TTL 规定了数据报被丢弃前，最多能够经过的节点数。

这个时候 NAT Host（服务器） 启动了之后，它开始向固定地址1.2.3.4发送固定的 ICMP回应请求包（ICMP echo request packets）。显然，我们无法从 1.2.3.4 收到返回的 ICMP回应数据包
Non-NAT Host（知道服务器IP地址）会向服务器发送 ”ICMP超时数据包“（ICMP Time Exceeded packet）。这个ICMP数据包里面包含了服务器发送到 1.2.3.4 的“原始”固定ICMP回应请求数据包。

为什么要这样做呢？

我们假装是互联网上的一个 ICMP跳越点，礼貌地告诉服务器它原来的 “ICMP回应请求” 数据包无法传递到1.2.3.4。而你的NAT是一个“聪明”的设备，它会注意到”ICMP超时数据包“内的数据包与服务器主权发出“ICMP回应请求”数据包相匹配“。然后它将”ICMP超时数据包“转发回NAT后面的服务器，包括来自客户端的完整IP数据包头，从而让服务器知道客户端IP地址是什么

p2p 跟前端(js)有有什么联系？

WebRTC

WebRTC 其中的一种模式就是 peer-to-peer 的
ipfs (一种 p2p 协议)
- libp2p p2p 平台，可以在上面搭建东西
- embark 同上
- orbit-db p2p 的数据库
- orbit-web p2p 聊天室，使用上面的作为数据库
- ...
PeerTube p2p 的视频网站
...

参考

自己实现一个 ReactDOM & Remax 初识

Sat, 30 Nov 2019 00:00:00 GMT

这篇文章写于 2019-11-30 可能其中的内容已经发生更改

如上图，可以看到 react 实际上分成了几个部分，

react

react 本身代码量并相比于整体来说并不算多，他主要的工作就是调用 react-reconciler 的一些接口，定义了一些 Symbol 之类的工作。
react-reconciler

那么 react-reconciler 就主要维护 VirtualDOM 树，完成什么时候需要更新，要更新什么之类的操作，你们可能常听到的 Fiber Diff 之类的东西就在这里面。
ReactDOM

可以看到这里并排了几个东西比如 react-dom 对应于浏览器，react-native 对应了移动平台...，其中的 react-dom 就实现了怎样将 react 中的东西渲染到网页上面。

可能上面的东西说起来不怎么具体，那举一些 api 的例子可能能够更清楚的分辨他们

主机环境 (dom / native)
- 浏览器
div, span,img...
- Native
View, Text, Image...
共用的部分 （reconciler)
- function components
- class components
- props, state
- effects, lifecycles
- key, ref, context
- lazy, error boundaries
- concurrent mode, suspense

其实我们在 npm 安装的时候就只装了 react 和 react-dom，因为 reconciler 是在 react-dom 这个包中有的，但是我们仍然可以单独安装 react-reconciler 来构建我们自己的 render

react-reconciler

react-reconciler 有两种模式

mutation mode

view = createView()
updateView(view, { color: 'red' })

对应到 dom 操作就是

div = document.createElement('div')
div.style.color = 'red'

persistent mode (immutable)

view = createView()
view = cloneView(view, { color: 'red' })

现在 ReactNative 正考虑使用后者，据说能提升性能

可以看见我们需要定义的就是 hostConfig 部分，我们还是直接开始吧。当一个舒适的 api 仔。

开始

安装 CRA （create react app）

npx create-react-app test-app
cd test-app
npm start

安装 react-reconciler

npm i react-reconciler
npm i @types/react-reconciler -D

显示元素

src/index.js

import React from 'react';
- import ReactDOM from 'react-dom';
+ import ReactDOM from './ReactDOM'
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

src/ReactDOM

import ReactReconciler from 'react-reconciler'

const reconciler = ReactReconciler({
  // 定义一些东西怎样与 render 环境进行交互
  supportsMutation: true,
  /**
   * createInstance
   * @param type 字符串 eg: img, p, a (这里没有 App 因为 react 已经提前处理了)
   * @param props props eg: className, src
   * @param rootContainerInstance
   * @param hostContext
   * @param internalInstanceHandle
   * @return {Element}
   */
  createInstance (type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
    const el = document.createElement(type);
    // if (props.className) el.className = props.className
    ['alt', 'className', 'href', 'rel', 'src', 'target'].forEach(item => {
      if (props[item]) el[item] = props[item]
    })
    return el // 这里 react 并没有规定返回的是什么，也就意味这里可以在这里返回一个你自定的 dom
  },
  /**
   * createTextInstance
   * @param text 文字信息，例如下面的 click
   * @param rootContainerInstance
   * @param hostContext
   * @param internalInstanceHandle
   * @returns {Text}
   */
  createTextInstance (text, rootContainerInstance, hostContext, internalInstanceHandle) {
    // <div>click</div>
    return document.createTextNode(text)
  },
  appendChildToContainer (container, child) {
    container.appendChild(child)
  },
  appendChild (parentInstance, child) {
    parentInstance.appendChild(child)
  },
  appendInitialChild (parentInstance, child) {
    parentInstance.appendChild(child)
  },
  prepareUpdate (instance, type, oldProps, newProps, rootContainerInstance, hostContext) {},
  commitUpdate (instance, updatePayload, type, oldProps, newProps, internalInstanceHandle) {},
  finalizeInitialChildren (parentInstance, type, props, rootContainerInstance, hostContext) {},
  getChildHostContext (parentHostContext, type, rootContainerInstance) {},
  getPublicInstance (instance) {},
  getRootHostContext (rootContainerInstance) {},
  prepareForCommit (containerInfo) {},
  resetAfterCommit (containerInfo) {},
  shouldSetTextContent (type, props) {
    return false
  },
})

export default {
  render (whatToRender, div) {
    const container = reconciler.createContainer(div, false, false)
    reconciler.updateContainer(whatToRender, container, null, null)
  }
}

现在就可以看到已经有东西显示在页面上了

事件监听

接下来，我们添加一些事件上去

src/App.js

import React, { useState } from 'react'
import logo from './logo.svg'
import './App.css'

function App () {
+ const [showLogo, setShowLogo] = useState(true)
  return (
-   <div className="App">
+   <div className="App" onClick={() => setShowLogo(show => !show)}>
      <header className="App-header">
-       <img src={logo} className="App-logo" alt="logo"/>
+       {showLogo && <img src={logo} className="App-logo" alt="logo"/>}
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App

src/ReactDOM

import ReactReconciler from 'react-reconciler'

const reconciler = ReactReconciler({
  // 定义一些东西怎样与 render 环境进行交互
  supportsMutation: true,
  /**
   * createInstance
   * @param type 字符串 eg: img, p, a (这里没有 App 因为 react 已经提前处理了)
   * @param props props eg: className, src
   * @param rootContainerInstance
   * @param hostContext
   * @param internalInstanceHandle
   * @return {Element}
   */
  createInstance (type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
    const el = document.createElement(type);
    ['alt', 'className', 'href', 'rel', 'src', 'target'].forEach(item => {
      if (props[item]) el[item] = props[item]
    })
+   if (props.onClick) el.addEventListener('click', props.onClick)
    return el // 这里 react 并没有规定返回的是什么，也就意味这里可以在这里返回一个你自定的 dom
  },
  /**
   * createTextInstance
   * @param text 文字信息，例如下面的 click
   * @param rootContainerInstance
   * @param hostContext
   * @param internalInstanceHandle
   * @returns {Text}
   */
  createTextInstance (text, rootContainerInstance, hostContext, internalInstanceHandle) {
    // <div>click</div>
    return document.createTextNode(text)
  },
  appendChildToContainer (container, child) {
    container.appendChild(child)
  },
  appendChild (parentInstance, child) {
    parentInstance.appendChild(child)
  },
  appendInitialChild (parentInstance, child) {
    parentInstance.appendChild(child)
  },
+ removeChildFromContainer (container, child) {
+   container.removeChild(child)
+ },
+ removeChild (parentInstance, child) {
+   parentInstance.removeChild(child)
+ },
+ insertInContainerBefore (container, child, beforeChild) {
+   container.insertBefore(child, beforeChild)
+ },
+ insertBefore (parentInstance, child, beforeChild) {
+   parentInstance.insertBefore(child, beforeChild)
+ },
  prepareUpdate (instance, type, oldProps, newProps, rootContainerInstance, hostContext) {},
  commitUpdate (instance, updatePayload, type, oldProps, newProps, internalInstanceHandle) {},
  finalizeInitialChildren (parentInstance, type, props, rootContainerInstance, hostContext) {},
  getChildHostContext (parentHostContext, type, rootContainerInstance) {},
  getPublicInstance (instance) {},
  getRootHostContext (rootContainerInstance) {},
  prepareForCommit (containerInfo) {},
  resetAfterCommit (containerInfo) {},
  shouldSetTextContent (type, props) {
    return false
  },
})

export default {
  render (whatToRender, div) {
    const container = reconciler.createContainer(div, false, false)
    reconciler.updateContainer(whatToRender, container, null, null)
  }
}

然后我们发现 logo 实现了 toggle 的效果，当然真实情况肯定没有之前我们所写的那么简单，我们最开始学 react 的时候就知道，react 将所有的事件都绑定到顶层的

这里我们可以看到我们并没有写一些与 state 相关的东西，这就说明了 ReactReconciler 帮我们完成了 Diff 之类的东西，这样我们只需指导 react 怎样去处理 dom 就可以了，ReactReconciler 只要是 js runtime 就可以运行，这也提供了 react 能渲染到多个平台上的能力。

更新属性

src/App.js

import React, { useEffect, useState } from 'react'
import logo from './logo.svg'
import './App.css'

function App () {
  const [showLogo, setShowLogo] = useState(true)
+ const [color, setColor] = useState('red')
+ useEffect(()=>{
+   const colors = ['red', 'green', 'blue']
+   let i = 0
+   let interval = setInterval(()=>{
+     i++
+     setColor(colors[i % 3])
+   }, 1000)
+   return () => clearInterval(interval)
+ })
  return (
    <div className="App" onClick={() => setShowLogo(show => !show)}>
      <header className="App-header">
        {showLogo && <img src={logo} className="App-logo" alt="logo"/>}
-       <p>
+       <p bgColor={color}>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  )
}

export default App

src/ReactDOM

import ReactReconciler from 'react-reconciler'

const reconciler = ReactReconciler({
  // 定义一些东西怎样与 render 环境进行交互
  supportsMutation: true,
  /**
   * createInstance
   * @param type 字符串 eg: img, p, a (这里没有 App 因为 react 已经提前处理了)
   * @param props props eg: className, src
   * @param rootContainerInstance
   * @param hostContext
   * @param internalInstanceHandle
   * @return {Element}
   */
  createInstance (type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
    const el = document.createElement(type);
    ['alt', 'className', 'href', 'rel', 'src', 'target'].forEach(item => {
      if (props[item]) el[item] = props[item]
    })
    if (props.onClick) el.addEventListener('click', props.onClick)
+   if (props.bgColor) el.style.backgroundColor = props.bgColor
    return el // 这里 react 并没有规定返回的是什么，也就意味这里可以在这里返回一个你自定的 dom
  },
  /**
   * createTextInstance
   * @param text 文字信息，例如下面的 click
   * @param rootContainerInstance
   * @param hostContext
   * @param internalInstanceHandle
   * @returns {Text}
   */
  createTextInstance (text, rootContainerInstance, hostContext, internalInstanceHandle) {
    // <div>click</div>
   return document.createTextNode(text)
  },
  appendChildToContainer (container, child) {
    container.appendChild(child)
  },
  appendChild (parentInstance, child) {
    parentInstance.appendChild(child)
  },
  appendInitialChild (parentInstance, child) {
    parentInstance.appendChild(child)
  },
  removeChildFromContainer (container, child) {
    container.removeChild(child)
  },
  removeChild (parentInstance, child) {
    parentInstance.removeChild(child)
  },
  insertInContainerBefore (container, child, beforeChild) {
    container.insertBefore(child, beforeChild)
  },
  insertBefore (parentInstance, child, beforeChild) {
    parentInstance.insertBefore(child, beforeChild)
  },
  prepareUpdate (instance, type, oldProps, newProps, rootContainerInstance, hostContext)   {
+   let palyload
+   if(oldProps.bgColor !== newProps.bgColor) {
+     palyload = { newBgColor: newProps.bgColor }
+   }
+   return palyload
  },
  /**
   * commitUpdate
   * @param instance dom 实例
   * @param updatePayload 从 prepareUpdate 返回的
   * @param type
   * @param oldProps
   * @param newProps
   * @param internalInstanceHandle
   */
  commitUpdate (instance, updatePayload, type, oldProps, newProps, internalInstanceHandle) {
+   if (updatePayload.newBgColor) {
+     instance.style.backgroundColor = updatePayload.newBgColor
+   }
  },
  finalizeInitialChildren (parentInstance, type, props, rootContainerInstance, hostContext) {},
  getChildHostContext (parentHostContext, type, rootContainerInstance) {},
  getPublicInstance (instance) {},
  getRootHostContext (rootContainerInstance) {},
  prepareForCommit (containerInfo) {},
  resetAfterCommit (containerInfo) {},
  shouldSetTextContent (type, props) {
    return false
  },
})

export default {
  render (whatToRender, div) {
    const container = reconciler.createContainer(div, false, false)
    reconciler.updateContainer(whatToRender, container, null, null)
  }
}

这里大概讲一下 hostConfig 定义的东西，也相当于对于前面的一些重新记忆吧，我们先将这些 api 分为以下部分。

协调阶段	开始提交	提交阶段
createInstance	prepareCommit	appendChildToContainer
createTextInstance		insertBefore
appendInitialChild		insertInContainerBefore
		removeChild
		removeChildFromContainer

import ReactReconciler from 'react-reconciler'

const reconciler = ReactReconciler({
  // 定义一些东西怎样与 render 环境进行交互
  supportsMutation: true,
  /**
   * 普通节点实例创建，例如 DOM 的 Element 类型
   * @param type 字符串 eg: img, p, a (这里没有 App 因为 react 已经提前处理了)
   * @param props props eg: className, src
   * @param rootContainerInstance
   * @param hostContext
   * @param internalInstanceHandle
   * @return {Element}
   */
  createInstance (type, props, rootContainerInstance, hostContext, internalInstanceHandle) {
    const el = document.createElement(type);
    ['alt', 'className', 'href', 'rel', 'src', 'target'].forEach(item => {
      if (props[item]) el[item] = props[item]
    })
    if (props.onClick) el.addEventListener('click', props.onClick)
    if (props.bgColor) el.style.backgroundColor = props.bgColor
    return el // 这里 react 并没有规定返回的是什么，也就意味这里可以在这里返回一个你自定的 dom
  },
  /**
   * 文本节点的创建，例如 DOM 的 Text 类型
   * @param text 文字信息，例如下面的 click
   * @param rootContainerInstance
   * @param hostContext
   * @param internalInstanceHandle
   * @returns {Text}
   */
  createTextInstance (text, rootContainerInstance, hostContext, internalInstanceHandle) {
    // <div>click</div>
    return document.createTextNode(text)
  },
  // 添加子节点到容器节点(根节点)
  // 也就是加载到 document.getElementById('root') 中去
  appendChildToContainer (container, child) {
    // console.log(container)
    container.appendChild(child)
  },
  // 如果节点在 未挂载 状态下，会调用这个来添加子节点
  appendInitialChild (parentInstance, child) {
    // console.log(parentInstance)
    parentInstance.appendChild(child)
  },
  // 插入子节点到容器节点(根节点)
  insertInContainerBefore (container, child, beforeChild) {
    // console.log(container)
    container.insertBefore(child, beforeChild)
  },
  // 插入子节点
  insertBefore (parentInstance, child, beforeChild) {
    // console.log(parentInstance)
    parentInstance.insertBefore(child, beforeChild)
  },
  // 从容器节点(根节点)中移除子节点
  removeChildFromContainer (container, child) {
    // console.log(container)
    container.removeChild(child)
  },
  // 删除子节点
  removeChild (parentInstance, child) {
    // console.log(parentInstance)
    parentInstance.removeChild(child)
  },
  /**
   * 准备节点更新. 如果返回空则表示不更新，这时候commitUpdate则不会被调用
   * @param instance dom 元素
   * @param type div, a
   * @param oldProps 以前的 Props
   * @param newProps 要更新的 Props
   * @param rootContainerInstance
   * @param hostContext
   * @returns {{newBgColor: *}}
   */
  prepareUpdate (instance, type, oldProps, newProps, rootContainerInstance, hostContext)   {
    let palyload
    if(oldProps.bgColor !== newProps.bgColor) {
      palyload = { newBgColor: newProps.bgColor }
    }
    return palyload
  },
  /**
   * commitUpdate
   * @param instance dom 实例
   * @param updatePayload 从 prepareUpdate 返回的
   * @param type div, a ...
   * @param oldProps
   * @param newProps
   * @param internalInstanceHandle
   */
  commitUpdate (instance, updatePayload, type, oldProps, newProps, internalInstanceHandle) {
    if (updatePayload.newBgColor) {
      instance.style.backgroundColor = updatePayload.newBgColor
    }
  },
  finalizeInitialChildren (parentInstance, type, props, rootContainerInstance, hostContext) {},
  getChildHostContext (parentHostContext, type, rootContainerInstance) {},
  getPublicInstance (instance) {},
  getRootHostContext (rootContainerInstance) {},
  prepareForCommit (containerInfo) {},
  resetAfterCommit (containerInfo) {},
  shouldSetTextContent (type, props) {
    return false
  },
})

export default {
  render (whatToRender, div) {
    const container = reconciler.createContainer(div, false, false)
    reconciler.updateContainer(whatToRender, container, null, null)
  }
}

然后可以看到这里有很多的 api 都没有用到，实际的 react-dom 肯定特别复杂

然后可能这东西不怎么 practical(实际，可能不会用上)，但是大家应该对 react 有了一点认识了。

Remax

Remax 是蚂蚁金服搞的一个用 react 写小程序的框架，他也是通过编写自己的 react render ，渲染到维护在内存中的一个 vdom，然后再通过 setData 到小程序中的，然后这个项目才刚开始，不像 taro 是一个庞然大物，这里大概说一下他的实现。（ taro next 也采用了类似的技术，但 taro 将 dom 的实现抽离，这样就能让 vue 也能用上这种方案）

组成

remax 通过 lerna 进行 monorepo 管理，分为以下部分

remax 提供运行时 -- 相当于 react dom
remax-cli 提供构建功能 -- 使用 EJS 生成小程序的 wxml， wxs...，用 rollup 打包代码

现在主要来讲 Remax

VNode

小程序中我们拿不到 dom，所以就不能像之前那样做 dom 的操作了，然后之前说到了 remax 会在内存中创建一个 vdom，我们先来看看他的 vnode 的代码，这里只贴了一些主要的代码，并且删除了 TypeScript 的一些东西

...

export default class VNode {
  ... 
  // 构造函数
  constructor({
    id, // 层级 id 会在生成的小程序自定义组件中出现
    type, // Text, Image
    props,
    container, // 上级的容器
  }) {
    this.id = id;
    this.container = container;
    this.type = type;
    this.props = props;
    this.children = [];
  }

  // 添加节点到父节点中
  appendChild(node, immediately) {
    node.parent = this;
    this.children.push(node);
    ...
  }

  // 从父节点中删除节点
  removeChild(node, immediately) {
    const start = this.children.indexOf(node);
    this.children.splice(start, 1);
    ...
  }

  ...
  // **与 dom 不同的 提交更新到 container**
  update() {
    // root 不会更新，所以肯定有 parent (container)
    this.container.requestUpdate(
		...
    );
  }
}

可见和 dom 上面能做的操作差不多

HostConfig（react-reconciler）

我们现在有了 vdom，那么我们来看怎么让 react 来操作 vdom，跟我们上面讲的在网页上的 hostConfig 需要定义的东西差不多，下面是 Remax hostConfig 的部分代码

const HostConfig = {
  // 创建宿主组件实例
  createInstance(type, newProps, container) {
    const id = generate();
    // 对 props 进行一些处理，如果 newProps 是 function 的话拿到顶部的 context 中进行 callback
    const props = processProps(newProps, container, id);
    return new VNode({
      id,
      type,
      props,
      container,
    });
  },

  // 创建宿主组件文本节点实例
  createTextInstance(text: string, container: Container) {
    const id = generate();
    const node = new VNode({
      id,
      type: TYPE_TEXT,
      props: null,
      container,
    });
    node.text = text;
    return node;
  },

  ...
  // 添加子节点到容器节点(根节点)
  appendChildToContainer(container: any, child: VNode) {
    container.appendChild(child);
    child.mounted = true;
  },
  // 删除子节点
  removeChild(parent: VNode, child: VNode) {
    parent.removeChild(child, false);
  },
  ...
  // 提交更新
  commitUpdate(node, updatePayload, type, oldProps, newProps) {
    node.props = processProps(newProps, node.container, node.id);
    node.update();
  },
}

更新 vdom 到小程序

remax 在 Container 也就是网页中的 document.getElementById('root')

export default class Container {
  ...
  requestUpdate(
    path,
    start,
    deleteCount,
    immediately,
    ...items: RawNode[]
  ) {
    const update = {
      path, // 更新节点的树路径
      start, // 更新节点在children中的索引
      deleteCount, 
      items: items.map(normalizeRawNode), // 主要对 props 进行一些操作, 比如 className => class
    };
    if (immediately) { // 马上执行更新
      this.updateQueue.push(update); 
      this.applyUpdate();
    } else { // 进入队列中
      if (this.updateQueue.length === 0) {
       // 这里为什么是0, 因为 Promise 执行肯定在我们看到的代码之后，不为 0 的话 上一次的更新还未执行完
       // 比如一次更新(之前的东西已经执行完了) 那么队列的长度就为 0
       // 然后就进入这个 if 分支
       // 放入 promise
       // 然后执行其他代码
       // 执行完其他代码
       // 执行 () => this.applyUpdate()
        Promise.resolve().then(() => this.applyUpdate()); // 放到 Promise 中
      }
      this.updateQueue.push(update);
    }
  }

  applyUpdate() {
	...
    const action = { // 发送给小程序的对象
      type: 'splice',
      payload: this.updateQueue.map(update => ({
        path: stringPath(update.path),
        start: update.start,
        deleteCount: update.deleteCount,
        item: update.items[0],
      })),
      id: generateActionId(),
    };
	// this.context 就是小程序实例
    this.context.setData({ action: tree }); // setData 到小程序中
    this.updateQueue = [];
  }
  ...
}

小程序渲染

我们已经把数据给到了小程序，那么小程序这里是怎样渲染成真正的元素。

我们都知道小程序是以页面为基本单位，我们先来看 pages 是怎么样的

这里使用了 ejs 大家大概看看

<wxs src="<%= jsHelper %>" module="helper" />
<import src="<%= baseTemplate %>"/>
<template is="REMAX_TPL" data="{{tree: helper.reduce(action)}}" />

生成之后是这个样子

<wxs src="../../helper.wxs" module="helper" />
<import src="../../base.wxml"/>
<template is="REMAX_TPL" data="{{tree: helper.reduce(action)}}" />

wxs 可能大家之前之前不知道，wxs（qs, sjs）是运行在小程序的渲染线程的被阉割的 js runtime 具体可以看 uni-app 写的文章，能减少通时的消耗的消耗，所以把小程序这边的 vdom 放在这里面

helper.wxs

var tree = {
  root: {
    children: [],
  },
};
...
function reduce(action) {
  switch (action.type) {
    case 'splice':
      for (var i = 0; i < action.payload.length; i += 1) {
        var value = get(tree, action.payload[i].path); // 通过 path 拿到对应的 vnode
        if (action.payload[i].item) { // 进行一些处理
          value.splice(
            action.payload[i].start,
            action.payload[i].deleteCount,
            action.payload[i].item
          );
        } else {
          value.splice(action.payload[i].start, action.payload[i].deleteCount);
        }
        set(tree, action.payload[i].path, value); // 将生成的进行替换
      }
      return tree; // 返回回去
    default:
      return tree;
  }
}
...
module.exports = {
  reduce: reduce,
};

base.wxml

定义了一些 image，text 等组件

<template name="REMAX_TPL"> // 每个 page 的顶部模板
	<block wx:for="{{tree.root.children}}" wx:key="{{id}}">
		<template is="REMAX_TPL_1_CONTAINER" data="{{i: item}}" />
	</block>
</template>
...
// image 的模板，并且是 page 最顶部的那个，因为微信小程序不能递归的调用，所以只能每层的template都不一样
<template name="REMAX_TPL_1_image">
  <image>
    <block wx:for="{{i.children}}" wx:key="{{id}}">
      <template is="REMAX_TPL_2_CONTAINER" data="{{i: item}}" />
    </block>
  </image>
</template>
...
<template name="REMAX_TPL_2_image">
  <image >
    <block wx:for="{{i.children}}" wx:key="{{id}}">
      <template is="REMAX_TPL_3_CONTAINER" data="{{i: item}}" />
    </block>
  </image>
</template>
...
...
...
...
// 所以一个页面只能套 20 层，不是就没 template 了
<template name="REMAX_TPL_20_image">
  <image >
    <block wx:for="{{i.children}}" wx:key="{{id}}">
      <template is="REMAX_TPL_21_CONTAINER" data="{{i: item}}" />
    </block>
  </image>
</template>

但是这有一些缺点，可能会影响性能，但是其实性能在出现之前都不是问题。

一是因为 Remax 相较于浏览器多了两个或者三个 vdom
- react 维护的 vdom
- remax 在逻辑进程维护的 vdom
- remax 在 wxs 中的 vdom
- (可能有) 小程序自己的 vdom
但是好处是我们在 setData 是经过 diff 的最小的数据量，而我们使用了 setData 也就意味者想用 react 来管理动画是不可能的了，但是目前没有办法改善，因为 wxs 定义的模块只能在 wxml 中用，也就是 remax 不能直接访问 wxs 的函数，即逻辑进程维护的 vdom 必须存在然后通过 setData 传递。
二是微信小程序限制，不能模板不能递归，只能套 20 层

参考

Threejs 初识

Fri, 23 Aug 2019 00:00:00 GMT

📣 前言

上一篇文章中使用 WebGL 在三维空间中创建了，一个平面直角三角形。相信大家没人会觉得简单。程序员应该是这个世界上最会偷懒的人，同时我们也想不要 996 这样的工作时间，Three.js 就帮我们解决了许多东西，甚至在大多数情况下我们不需要写 GLSL 语言，所以就让我们来了解一下 Three.js 吧。

前置的变量

const canvas = document.createElement('canvas')
THREE // THREE 暴露出来的对象

📷 相机

const fov = 75; // 视野的角度
const aspect = canvas.clientWidth / canvas.clientHeight;; // 长宽比例
const near = 0.1; // 近裁剪
const far = 5; // 远裁剪
// 设定一个有透视效果的相机
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

通过 fov, aspect, near, far 就确定了一个区域，这个区域就叫做截椎体（frustum） 在这个区域外面的物体将不会显示。

🚩 坐标

又是一张熟悉的图，我们接下来用 Three.js 创建的物体都会位于坐标系原点。而我们创建的相机默认指向Z轴负方向，上方向朝向Y轴正方向，也就意味着我们的相机与我们创建的物体重合了，这肯定是不可行的，所以我们需要将相机从原点移走才能看到物体。

camera.position.z = 2;

下面是我们想要达到的效果

🎬 场景

现在我们已经有了一台摄像机，还需要一些演员来组成场景。

创建一个场景
```
const scene = new THREE.Scene();
```

创建一个几何体

const boxWidth = 1;
const boxHeight = 1;
const boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

创建一个材质

现在我们有了几何体，但是我们还没有告诉他应该是属于什么，属于怎样的材质
```
const material = new THREE.MeshBasicMaterial({color: 0x44aa88});
```
- color: 使用 16 进制颜色，可以将 0x 看成 #
- MeshBasicMaterial: 是一种简单的材质，对光线没有反应，在没有光线的情况下我们也能看到。
创建一个网格
```
const cube = new THREE.Mesh(geometry, material);
```
然后创建一个Mesh。Mesh代表了
- Geometry: 物体的形状
- Material: 怎么绘制物体, 光滑还是平整, 什么颜色, 什么贴图等等的组合

添加到场景中并进行渲染

scene.add(cube); // 添加到场景
renderer.render(scene, camera); // 进行渲染

🏃 运动起来

我已经看到相较于 WebGL 来说，Three.js 创建一个物体的速度已经大幅度的提升。但我们平时在 3D 世界中看到的物体都不是静止他们都做着一定的运动

requestAnimationFrame

相信大家都见过这个东西
- 该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
- 当requestAnimationFrame() 运行在后台标签页或者隐藏的 <iframe> 里时，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命
- 回调函数会被传入 DOMHighResTimeStamp 参数，DOMHighResTimeStamp 指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间 （单位毫秒）

怎样运动起来

如果我们还在 WebGL 的情况下我们需要在顶点着色器中使用相应的变换矩阵乘以顶点坐标，并再进行一次渲染。Three.js 帮我们自动编写了相应的顶点着色器我们只需要设定相应的参数就可以了。

function render(time) {
  time *= 0.001;  // 将毫秒转换成秒

  cube.rotation.x = time; // 单位弧度
  cube.rotation.y = time; // 单位弧度

  renderer.render(scene, camera); // 重新渲染

  requestAnimationFrame(render); // 保证再本次渲染完成之后再次被调用
}
requestAnimationFrame(render); // 页面开始加载时开始调用

💡 灯光

现在我们已经有了一个会动的物体，但是他和真实世界仍然还有差距，他缺少了灯光。现在我们就来创建一个灯光。

材质

我们之前使用的材质为 MeshBasicMaterial 他不受灯光的影响，现在我们需要换成一个可以受灯光影响的材质MeshPhongMaterial

-const material = new THREE.MeshBasicMaterial({color: 0x44aa88});  // 删除这一行
+const material = new THREE.MeshPhongMaterial({color: 0x44aa88});  // 添加这一行

光源
```
{
  const color = 0xffffff;
  const intensity = 1;
  const light = new THREE.DirectionalLight(color, intensity);
  light.position.set(-1, 2, 4); // 灯光的位置应该在我们视角（摄像机）的左上方
  scene.add(light);
}
```
DirectionalLight

平行光是沿着特定方向发射的光。这种光的表现像是无限远, 从它发出的光线都是平行的。常常用平行光来模拟太阳光的效果。
- color - (可选参数) 16进制表示光的颜色。缺省值为 0xffffff (白色)
- intensity - (可选参数) 光照的强度。缺省值为1

。。。大家都可以看到，Threejs 简化了很多操作，基础使用大部分都是调用 API 了，更多请看文档。

参考

WebGL 初识

Fri, 23 Aug 2019 00:00:00 GMT

基本的3D原理

🚩 坐标系

WebGL 使用右手坐标系统 — x 轴向右, y 轴向上 z 轴指向屏幕外, 在上图可以看到。

并且默认屏幕是在 XOY 面上的（也就意味着我们的视角是从Z 轴向下看）

📦顶点、物体

位置: 在 3D 空间用来确定位置 (x, y, z)
颜色: 包含RGBA (R, G 和 B 分别是红, 绿, 蓝和 Alpha 通道, Alpha 通道控制透明度 — 所有通道值的范围都是 0.0 到 1.0)
法线: 描述顶点朝向（比如一个平面，在背对法线方向就看不到该平面）
纹理: 顶点用来装饰模型表面的一张 2D 图片, 它是代替简单颜色的选择之一

🎥 渲染流程

术语
- 原始数据: 渲染流程中的输入 — 就是顶点坐标
- 片段: 一个像素的 3D 投射, 有着和像素一样的属性（意思就是这个将会通过一系列的工作转换成像素）
- 像素: 屏幕上的 2D 网格中的点布置的点, 包含 RGBA
顶点处理

从图中可以看到顶点的位置发生了改变，可以说这一操作中发生了很多事情，我们只提取出其中一部分来讲
- 矩阵变换
我们是通过矩阵来达到坐标变换的，当然除了这个比较简单的位移变换，还有其他的变换，比如旋转，缩放之类的。
- 视图转换(view transformation)
这一步只关心位置和 3D 空间中摄像机的朝向设置

摄像机有三个参数 (位置, 方向和朝向)

你肯定想到了，设定摄像机也是通过矩阵变换得到的。事实上我们设定摄像机参数生成的矩阵并不是作用于摄像机上，而是求出其逆矩阵作用于顶点上，同样可以达到摄像机移动的效果。
- **透视转换(perspective transformation) **
这个同样也是经过相应的矩阵变换，输入一定的参数（视野, 宽高比例和近裁剪、远裁剪等等），得到矩阵，然后来确定顶点在 3D 空间中的具体表现
栅格化

我们现在得到的只是顶点，然后中间还是 “中空” 的，所以就有了栅格化。

栅格化将原始数据（从顶点信息转换过来的）转换为一系列的片段（通俗来讲就是补充中间空缺的部分）

片段: 一个像素的 3D 投射, 有着和像素一样的属性（意思就是这个将会通过一系列的工作转换成像素）
片段合成

现在我们的片段还只是一些点（片段），没有颜色，没有光照的效果，而这一步就是要将颜色之类的东西定义到我们的片段上去。（今天我们只使用纯色，所以不细讲）
输出合成

之前我们说过片段是像素在 3D 中的投射，而这一步就是将来自3D空间的原始数据的片段转换到2D像素网格中, 然后打印到屏幕像素上。
总结

WebGL 为我们做好了栅格化(rasterization)\和**输出合成(output merging)**，我们只需要关注如何定义顶点位置，以及片段合成就可以了。

WebGL 基础概念

🕵️‍♂️ What?

WebGL: 是一个光栅化引擎，它可以根据你的 代码绘制 出点，线和三角形。

OpenGL: 工业级的图形渲染 API。

OpenGL ES: OpenGL 的嵌入式版本，是 OpenGL 的子集去除了 OpenGL 中消耗性能的部分。

📕How?

WebGL 在电脑的 GPU ²中运行。因此你需要使用能够在 GPU 上运行的代码

顶点着色器：计算顶点的位置 (对应之前讲的顶点处理部分)
片断着色器：计算出当前绘制图元中每个像素的颜色值 (片段合成)

这两个着色器使用的语言叫做 GL着色语言 （一种类似C或C++的强类型的语言）

每一对组合起来称作一个 Program（着色程序）

WebGL 着色器和 GLSL

GLSL

顶点着色器需要的数据，可以通过以下三种方式获得。（相当于 GLSL 中的 let const var）
- 属性（Attributes）
相当于变量
- 全局变量（Uniforms）
全局变量在着色程序运行前赋值，在运行过程中全局有效。
- 可变量（Varyings）
可以从顶点着色器传递到片段着色器

数据类型（我只讲今天要涉及的一个其他的不讲因为比较多）
- vec4
它的默认值是 (0, 0, 0, 1)，也就是说你传递给他（1, 0.5）最后生成（1, 0.5, 0, 1）
顶点着色器 （VertexShader）

有这这样的模板
```
attribute vec4 a_position;
void main() {
 gl_Position = a_position // 做一些事情生成顶点坐标，就是之前讲的坐标变换
}
```
每次调用都需要设置一个特殊的全局变量 gl_Position，该变量的值就是裁剪空间^1坐标值。

片段着色器 （FragmentShader）

// 片断着色器没有默认精度，所以我们需要设置一个精度
// mediump是一个不错的默认值，代表“medium precision”（中等精度）
precision mediump float;

void main() {
// gl_FragColor是一个片断着色器主要设置的变量
gl_FragColor = vec4(1, 0, 0.5, 1); // 返回“一种紫色”
}

渲染管线

然后就万事具备只欠调 API 了，但是在调 API 之前我们再来了解一下渲染管线，同时也来复习一下上面所讲的部分。

这张图可以说清晰的展现了 WebGL 的渲染流程，Uniforms 怎样作为全局变量存在，为什么 Varyings 可以从顶点着色器传递数据到片段着色器，这两个着色器所处的位置。

其中可以注意到 Attributes 得到的方式比较奇怪，他是通过一个“指针”指向显存中的一个位置，我单独拿出来讲可见他的复杂程度。

Attributes 的赋值

前言：gl = canvas.getContext("webgl");

创建一个缓存区

// 创建缓冲区，GLSL 中的数据都是从缓存区中获取
const positionBuffer = gl.createBuffer();

绑定缓冲区

// 将 positionBuffer 与 gl.ARRAY_BUFFER 绑定起来，好在后面传递数据的时候能够传输到创建的缓存中
// 可以看作 ARRAY_BUFFER(显存中) == positionBuffer(js内存中)
// 相当于我们创建了一个缓冲区数据与 js 之间的映射关系
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

向缓冲区中放入数据

// 顶点的数据
const position = [
    0, 0, 
    0, 0.5, 
    0.7, 0
];
// 将数据传递到 绑定点 gl.ARRAY_BUFFER 上
// WebGL 需要强类型数据，所以 new Float32Array(positions) 创建了32位浮点型数据序列
// gl.STATIC_DRAW 提示 WebGL 我们不会经常改变这些数据
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(position), gl.STATIC_DRAW);

我们现在已经把数据放到了缓冲中，但是还没有让缓冲中的数据与 GLSL 中的变量产生联系，上面我提到了“指针”你肯定会想到怎样去获取 Attributes对应的“内存”地址

获取 Attributes 在显存中的地址

// 获取 vertexShader 中 a_position 的“内存”地址
const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
// 让 WebGL 知道我们要向 GLSL 中的那个变量传递值
gl.enableVertexAttribArray(positionAttributeLocation);

怎样去取数据

你可能已经注意到了我们的顶点数据和只有两位, 例如 (0, 0.5) 可是我们是在三维世界中的顶点是有xyz的坐标, 并且我们定义的a_position 是 vec4 类型的变量需要有4个参数，这样我们就需要规定 WebGL 如何去取用我们放入缓冲区的数据。

// 告诉 WebGL 怎么从 positionBuffer (ARRAY_BUFFER) 中读取数据
gl.vertexAttribPointer(
  positionAttributeLocation,     // 要放到那里去
  2, 							   // 每次迭代运行提取两个单位数据
  gl.FLOAT,                      // 每个单位的数据类型是32位浮点型
  false,                         // 不需要归一化数据  255 -> 1
  0,                             // 0 = 移动单位数量 * 每个单位占用内存（sizeof(type) 每次迭代运行运动多少内存到下一个数据开始点 (不需要了解)
  0                              // 从缓冲起始位置开始读取
);

接下来

我们通过上面的了解，可以看到如果我们使用原生写 3D 应用将是一个灾难，我们主要的工作将会耗费在矩阵变换，WebGL API 的调用上，这将比我们操作 DOM 更耗费时间，所以我们可以使用一些库来帮助我们的工作

传统3D
- Threejs - 这个应该不用说了 (54,053 star) (1,139 contributors) (39 BUG)
- Babylon.js - 微软巨硬搞的 (TypeScript) (9,900 star) (240 contributors) (1 BUG)
- playcanvas - 更具有商业性，拥有一个比较强大的编辑器 (4,713 star) 53 contributors (33 BUG
VR
- A-Frame - (10,336 star) (294 contributors)
- React 360 - (7,432 star) (38 contributors)
如果您的应用程序是由用户交互驱动的，并且有许多二维或三维UI元素，那么React 360将提供您需要的工具。如果您的应用程序由许多3D对象组成，或者依赖于复杂的效果（如需要使用 Shader），您将从 A-Frame 获得更好的支持。 -- React 360 官方文档
国内（2D）
- Egret 使用 TypeScirpt 开发，官方有 Webassembly 版本（C++），暴露 TS API，拥有自己的编辑器，但是其比较偏向于 Cocos2dx（Flash 流派，意思就是主要 2D，并且使用以前 Flash 开发的流程）
- Cocos2dx 使用 C++/Lua/JS 开发，然后浏览器环境跑在 JS 引擎上，并且 BUG 是让开发团队修，早年有些版本连跑 demo 都跑不起来，但是国内有很多公司用，但是从2016年就开始唱衰他了。
（游戏开发的话其实使用 Unity 比较有利，支持 3D 很好并且整个生态较好）

Skywalker512 | Feed

XState 状态管理

🔍 如何定义状态

💽 状态切换

💊 副作用

📃 Context

🍴 并行状态

📕 参考

Webpack 初识

🏄 简单体验

安装 webpack

🎯 正式开始

👉 入口 (entry) 与出口 (output)

单入口单出口

多入口与多出口

🛠 模式(mode)

🗺 devtool（错误映射）(source-map)

📫 plugins（插件）

📜 module (loader)（文件预处理）

处理 less

打包图片

🏗 devServer

📦 原理

From 表单解析

🕵️‍♂️试一下

🔎 分析 FORM 表单内容

📊 完整代码

Websocket 初识

1. 服务端创建一个Net服务器

2. Web端创建一个WebSocket链接

3. 服务端使用socket.once，触发一次data事件处理HTTP请求头数据

5. 根据请求头参数，判断是否WebSocket请求

6. 校验Sec-WebSocket-Key，完成连接

7. 建立连接后，通过data事件接收客户端的数据并处理

完整代码

参考

Overlay Networking (Tunnel)

简介

nebula

UDP 打洞

zerotier

pwnat

p2p 跟前端(js)有有什么联系？

参考

自己实现一个 ReactDOM & Remax 初识

react-reconciler

开始

显示元素

事件监听

更新属性

Remax

组成

VNode

HostConfig（react-reconciler）

更新 vdom 到 小程序

小程序渲染

参考

Threejs 初识

📣 前言

📷 相机

🚩 坐标

🎬 场景

🏃 运动起来

💡 灯光

参考

WebGL 初识

基本的3D原理

🚩 坐标系

📦顶点、物体

🎥 渲染流程

WebGL 基础概念

🕵️‍♂️ What?

📕How?

WebGL 着色器和 GLSL

渲染管线

Attributes 的赋值

接下来

参考

更新 vdom 到小程序