misc Items 辅助选项
Picture-in-Picture 画中画

• 矢量图形是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示图像。
• 栅格图（英语：Rastergraphics），又称位图（Bitmap）或点阵图，是使用像素阵列(Pixel-array/Dot-matrix点阵)来表示的图像。

“社会是伤害的比赛，当我醒来时才明白...”
“请你不要离开，这里胜似花开，没有人能掩盖梦境中的色彩”

就在几天前，我和乌鸦在班车上碰到，他告诉我他也很喜欢这只乐队，没想到几天后得知他就要离开了，我想以后再听到这首歌又多了一个悲伤的理由...

后面内容比较丧，自己消化！

require & import history
参考：https://segmentfault.com/a/1190000009060866

• g2
• echarts
• highcharts

介绍

Mapbox GL JS 是一个 JavaScript 库，它使用 WebGL，以 vector tiles 和 Mapbox styles 为来源，将它们渲染成互动式地图。它是 Mapbox GL 生态系统的一部分，其中还包括 Mapbox Mobile，它是一个用 C++ 编写的兼容桌面和移动平台的渲染引擎。

Mapbox GL JS 的核心特点是客户端渲染。在 Mapbox GL JS 中创建 Web 应用时，通过 JavaScript 和 WebGL 把地图作为 vector tiles 进行渲染。 相比将服务器的一系列切片图片组合起来后再显示，通过Mapbox GL JS渲染可以快速改变样式，使得地图的呈现更加多样化。Mapbox地图数据来源于Open Street Map（OSM）等其他地图数据供应商。

• 资料及技术优势

基本概念

分组类型

https://www.jianshu.com/p/d771828f8fd4
捕获型()
非捕获型(?:)
正向前瞻型(?=)
反向前瞻型(?!)

贪婪量词(*) & 惰性量词(*?)

性能

回溯

window.onerror

window.onerror = function(message, source, lineno, colno, error) {
  // message：错误信息（字符串）。可用于HTML onerror=""处理程序中的event。
  // source：发生错误的脚本URL（字符串）
  // lineno：发生错误的行号（数字）
  // colno：发生错误的列号（数字）
  // error：Error对象（对象）
  
  // return: boolen, true（阻止执行默认事件处理函数）
}

问题？

1. react 里的错误会导致页面崩溃？对比上例，原生代码。

React error boundary

包含跟UI渲染相关的异常；命令式的代码的代码一般用 try/catch 搞定，类似 react 这种声明式表示很难获取异常，如果没有对异常很好的处理，将导致整个页面的崩溃。React 提供的 error boundary 可以捕获到跟UI渲染相关的异常，可以在需要的组件外层包裹异常组件。达到的效果是，页面中某个组件渲染错误，可以用统一的错误提示用户，并且不影响页面其他的组件渲染。

componentDidCatch, 它能捕获在子组件树中任何地方的 JavaScript 异常，并打印这些错误和展示备用UI, 就像将 children 包裹在一个大的 try/catch 语句块中.

1.未捕获错误（Uncaught Errors）的新行为，，在 React 16 中不是由错误边界引起的错误将会使得整个 React 组件树被卸载。
例如，Facebook Messenger 将侧边栏、信息面板、聊天记录以及信息输入框包装在单独的错误边界中。如果其中的某些 UI 组件崩溃，其余部分仍然能够交互
2.try/catch
try/catch 仅能用于命令式代码，然而，React 组件是声明式的并且具体指出 什么 需要被渲染。
错误边界保留了 React 的声明性质，其行为符合你的预期。例如，即使一个错误发生在 componentDidUpdate 方法中，并且由某一个深层组件树的 setState 引起，其仍然能够冒泡到最近的错误边界。
3.关于事件处理器
错误边界无法捕获事件处理器内部的错误。
React 不需要错误边界来捕获事件处理器中的错误。与 render 方法和生命周期方法不同，事件处理器不会在渲染期间触发。因此，如果它们抛出异常，React 仍然能够知道需要在屏幕上显示什么。（意思是，事件内部的错误并不影响UI的渲染展示，所以错误边界不包含。）
如果你需要在事件处理器内部捕获错误，使用普通的 JavaScript try / catch 语句。

https://react.docschina.org/docs/error-boundaries.html

问题？

1. ErrorBoundary 包裹的必须是组件？原理是什么？

参考：https://juejin.cn/post/6844903582337237006#heading-15

一、知识点：

npm - 关于package

(1) 场景1：本地模块引用

(2) 场景2：私有 git 共享 package

(3) 场景3：开源 package 问题修复

二、npm版本管理

• 采用 semver 规范，约定的版本号格式为：【主版本号:次版本号:修订版本号】

• package.json 中常见的是采用 semver range 指定的依赖包版本号及范围。

npm version major|minor|patch package 版本号自增，并且Git生成一条新的commit + tag。

Npm5 以前，没有lock文件，不同的人安装的是当前semver range的最新版；npm5 根据lock文件里的确定版本号安装，如果要升级到最新使用npm update。

最佳实践

总结起来，在 2018 年 (node 9.8.0, npm 5.7.1) 时代，我认为的依赖版本管理应当是:

• 使用 npm: >=5.1 版本, 保持 package-lock.json 文件默认开启配置
• 初始化：第一作者初始化项目时使用 npm install <package> 安装依赖包, 默认保存 ^X.Y.Z 依赖 range 到 package.json中; 提交 package.json, package-lock.json, 不要提交 node_modules 目录
• 初始化：项目成员首次 checkout/clone 项目代码后，执行一次 npm install 安装依赖包
• 不要手动修改 package-lock.json
• 升级依赖包:
  • 升级�小版本: 本地执行 npm update 升级到新的小版本
  • 升级大版本: 本地执行 npm install <package-name>@<version> 升级到新的大版本
  • 也可手动修改 package.json 中版本号为要升级的版本(大于现有版本号)并指定所需的 semver, 然后执行 npm install
  • 本地验证升级后新版本无问题后，提交新的 package.json, package-lock.json 文件
• 降级依赖包:
  • 正确: npm install <package-name>@<old-version> 验证无问题后，提交 package.json 和 package-lock.json 文件
  • 错误: 手动修改 package.json 中的版本号为更低版本的 semver, 这样修改并不会生效，因为再次执行 npm install 依然会安装 package-lock.json 中的锁定版本
• 删除依赖包:
  • Plan A: npm uninstall <package> 并提交 package.json 和 package-lock.json
  • Plan B: 把要卸载的包从 package.json 中 dependencies 字段删除, 然后执行 npm install 并提交 package.json 和 package-lock.json
• 任何时候有人提交了 package.json, package-lock.json 更新后，团队其他成员应在 svn update/git pull 拉取更新后执行 npm install 脚本安装更新后的依赖包

三、Npm install 包结构

(1) npm2，安装- 递归式-依赖关系层层递进，形成依赖树，依赖树与文件目录一一对应

(2) npm3，开始，安装扁平化，npm 默认会在无冲突前提下，尽可能将包安装在较高的层级。

(3) npm5，默认增加了package-lock文件，锁定固定版本，使得不同环境依赖的版本一致。之前可以通过 npm shrinkwrap 获得。（lock 中的依赖与node_modules文件目录一致）

四、npm scripts 介绍

• （check） ruanyifeng-npm scripts 使用指南

(1) npm scripts

-npm scripts 运行时会将node_modules/.bin/ 目录添加到当前运行环境的PATH路径，所以理论上，依赖的工具包不用在全局环境安装。

-npm 提供了pre和post两种钩子，用来在执行脚本的前后执行。

-可以使用--传参。

-脚本里可以访问一些运行时的变量，比如 process.env 。

(2) node_modules/.bin 目录

可执行命令行包，如果package.json文件定义了bin字段，如下，<command>:filename

{
    "bin": {
        "webpack": "./bin/webpack.js"
    }
}

本地安装：检查package.json，并将bin命令定义的文件安装在 node_modules 的.bin目录下，文件名为该命令名。

全局安装： 会在全局node_modules 的bin目录下创建名为 指向filename的软链接。

？？问题？？如何写bin命令

(3) npx

npx神奇用法

一句话：npx 的作用就是下载远程包到临时目录并执行，执行结束后删除，常见用于 CRA 这种只使用一次的脚手架创建工具。

五、npm配置

(1) npm config ls -l

(2) .npmrc 文件（项目级，用户级，全局，内置）

(3) node 版本约束

声明：通过 package.json 的 engines 属性声明应用运行所需的版本运行时要求。

{
    "engines": { "node": ">=7.6.0"}
}

强约束：在 npm 中以上字段内容仅作为建议字段使用，若要在私有项目中添加强约束，需要自己写脚本钩子，读取并解析 engines 字段的 semver range 并与运行时环境做对比校验并适当提醒。

最佳实践

• 统一�项目配置: 需团队共享的 npm config 配置项，固化到 .npmrc 文件中。

• 统一运行环境，统一 package.json，统一 package-lock 文件。

• 合理使用多样化的源安装依赖包: npm install <git url>|<local file>。

• 使用 npm: >=5.2 版本。

• 使用 npm scripts 与 npx (npm: >=5.2) 脚本管理应用相关脚本。

这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已

1.Tiny Rate

包含小数的实现 ★构建东半球最小的评级组件☆

function rate(num){
  return "★★★★★☆☆☆☆☆".slice(5 - num, 10 - num);
}
rate(3)   // "★★★☆☆"

2.JavaScript 错误处理的方式的正确姿势

跳转到 stackoverflow 网站。

try {
    something
} catch (e) {
    window.location.href =
        "http://stackoverflow.com/search?q=[js]+" +
        e.message;
}

3.从一行代码里面学点JavaScript

将页面所有的元素用不同颜色的1px 的边框包裹。

[从一行代码里面学点 JavaScript]

[Learning much javascript from one line of code]

[].forEach.call($$("*"),function(a){
    a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
})

翻译成正常语言

Array.prototype.forEach.call(document.querySelectorAll('*'), 
dom => dom.style.outline = `1px solid #${parseInt(Math.random() * 
Math.pow(2,24)).toString(16)}`)

4.论如何优雅的取随机字符串

Math.random().toString(16).substring(2) 
Math.random().toString(36).substring(2)

5.论如何优雅的取整

var a = ~~2.33

var b= 2.33 | 0

var c= 2.33 >> 0

6.如何优雅的实现金钱格式化：1234567890 --> 1,234,567,890

var test1 = '1234567890'
var format = test1.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

console.log(format) // 1,234,567,890

7.用最短的代码实现一个长度为m(6)且值都n(8)的数组

Array(6).fill(8)

8.取出一个数组中的最大值和最小值

var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411]; 
var maxInNumbers = Math.max.apply(Math, numbers); 
var minInNumbers = Math.min.apply(Math, numbers);

初稿：

未展现：

1. PC生成小程序码 with uuid；小程序识别 uuid，登陆后以uuid为key 存储一条数据。

React ** - 记录

1. UI=f(data)
2. 组件化
3. 声明式

UI=f(data)

• UI 的变化是响应式而不是直接操作DOM

响应式编程 ，简称RP（Reactive Programming）
响应式编程是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。
https://www.jianshu.com/p/c95e29854cb1

• VDOM
  diff 算法
  react 会判断两个virtualDOM不同节点，比如下图A位置变化
  首先从左树位置unmount，然后mount到右树的位置
  如果是 props 变化，才有update生命周期的机会。
  

有时候我们需要帮助react做一些事情，比如在列表渲染的时候，需要给每个列表一个 特殊的prop key，这个key的要素是：
（a）唯一，（控制台也会waring提示）
（b）稳定，（无论多少次跟新渲染，key 需要唯一）
有一种常见的使用误区：使用下标来作为 key,每次渲染时，key 是会变化的。。

一切皆组件

页面都是由组件组成的，这些组件 遵守统一的协议，相互通信就可以运转起来

声明式编程

声明式编程区别于命令式，命令式就像jQuery提供很多API，coding的时候需要调用这些API 告诉浏览器怎么做，问题来了，当jQuery变化的时候，依赖这些API的代码也需要更新。
声明式编程主要**是着重做什么，而不是怎么做，react编程过程中几乎不调用它的API，只写自己的code就行，比如render函数等；好处是当react升级或怎样，我们自己的代码不受影响。
像 html，css 都属于声明式。

https://www.cnblogs.com/sirkevin/p/8283110.html

• render 函数
  并不是真实的渲染，通过Babel转义后可以看到返回的是一些DOM 的描述等，另外 JSX 的花括号里一定是表达式，不能有副作用，因为Babel转义后这个表达式是作为函数参数的。

生命周期

三种过程：从无到有（mount），状态变化（update），从有到无（unmount）

• 尽量构建无状态组件
  看下图，尽量将状态变化放在父组件里，子组件无状态组件
  

• 组件通信
  三种：父子，兄弟，任意组件
  react 局限：任意组件间通信方式

• Designing Your React Architecture

docker 官网
http://jm.taobao.org/2016/05/12/introduction-to-docker/

Orientation and setup

Images and containers

• An image is an executable package that includes everything needed to run an application--the code, a runtime, libraries, environment variables, and configuration files.
• A container is a runtime instance of an image--what the image becomes in memory when executed (that is, an image with state, or a user process).

## List Docker CLI commands
docker
docker container --help

## Display Docker version and info
docker --version
docker version
docker info

## Execute Docker image
docker run hello-world

## List Docker images
docker image ls

## List Docker containers (running, all, all in quiet mode)
docker container ls
docker container ls --all
docker container ls -aq

Containers

docker build -t friendlyhello .  # Create image using this directory's Dockerfile
docker run -p 4000:80 friendlyhello  # Run "friendlyhello" mapping port 4000 to 80
docker run -d -p 4000:80 friendlyhello         # Same thing, but in detached mode
docker container ls                                # List all running containers
docker container ls -a             # List all containers, even those not running
docker container stop <hash>           # Gracefully stop the specified container
docker container kill <hash>         # Force shutdown of the specified container
docker container rm <hash>        # Remove specified container from this machine
docker container rm $(docker container ls -a -q)         # Remove all containers
docker image ls -a                             # List all images on this machine
docker image rm <image id>            # Remove specified image from this machine
docker image rm $(docker image ls -a -q)   # Remove all images from this machine
docker login             # Log in this CLI session using your Docker credentials
docker tag <image> username/repository:tag  # Tag <image> for upload to registry
docker push username/repository:tag            # Upload tagged image to registry
docker run username/repository:tag                   # Run image from a registry

Services

Luckily it’s very easy to define, run, and scale services with the Docker platform -- just write a docker-compose.yml file.

docker stack ls                                            # List stacks or apps
docker stack deploy -c <composefile> <appname>  # Run the specified Compose file
docker service ls                 # List running services associated with an app
docker service ps <service>                  # List tasks associated with an app
docker inspect <task or container>                   # Inspect task or container
docker container ls -q                                      # List container IDs
docker stack rm <appname>                             # Tear down an application
docker swarm leave --force      # Take down a single node swarm from the manager

Swarms

docker-machine create --driver virtualbox myvm1 # Create a VM (Mac, Win7, Linux)
docker-machine create -d hyperv --hyperv-virtual-switch "myswitch" myvm1 # Win10
docker-machine env myvm1                # View basic information about your node
docker-machine ssh myvm1 "docker node ls"         # List the nodes in your swarm
docker-machine ssh myvm1 "docker node inspect <node ID>"        # Inspect a node
docker-machine ssh myvm1 "docker swarm join-token -q worker"   # View join token
docker-machine ssh myvm1   # Open an SSH session with the VM; type "exit" to end
docker node ls                # View nodes in swarm (while logged on to manager)
docker-machine ssh myvm2 "docker swarm leave"  # Make the worker leave the swarm
docker-machine ssh myvm1 "docker swarm leave -f" # Make master leave, kill swarm
docker-machine ls # list VMs, asterisk shows which VM this shell is talking to
docker-machine start myvm1            # Start a VM that is currently not running
docker-machine env myvm1      # show environment variables and command for myvm1
eval $(docker-machine env myvm1)         # Mac command to connect shell to myvm1
& "C:\Program Files\Docker\Docker\Resources\bin\docker-machine.exe" env myvm1 | Invoke-Expression   # Windows command to connect shell to myvm1
docker stack deploy -c <file> <app>  # Deploy an app; command shell must be set to talk to manager (myvm1), uses local Compose file
docker-machine scp docker-compose.yml myvm1:~ # Copy file to node's home dir (only required if you use ssh to connect to manager and deploy the app)
docker-machine ssh myvm1 "docker stack deploy -c <file> <app>"   # Deploy an app using ssh (you must have first copied the Compose file to myvm1)
eval $(docker-machine env -u)     # Disconnect shell from VMs, use native docker
docker-machine stop $(docker-machine ls -q)               # Stop all running VMs
docker-machine rm $(docker-machine ls -q) # Delete all VMs and their disk images

Stacks

概念：

• 用于在各方之间安全地将信息作为 JSON 对象传输。由于此信息是经过数字签名的，因此可以被验证和信任。
• 几个概念 （go-jwt 包）
  • claims（需要通过 jwt 传输的数据）可以自定义claims结构体，也可以使用jwt.StandardClaims。
  • 签名者和验证者（jwt.NewSignerHS、jwt.NewVerifierHS），服务初始化时生成，负责生成及验证签名。

JWT 格式：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6InVzZXIxIiwiZXhwIjoxNTQ3OTc0MDgyfQ.2Ye5_w1z3zpD4dSGdRp3s98ZipCNQqmsHRB9vioOx54

• 包含三部分：

1. header
2. 有效负载 payload
3. 签名

• 其中，header 和 payload是base64格式，可以通过解码获得原始值。
  （MAC 通过以下命令可以查看前两部分内容）
  echo eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9 | base64 -D
• 签名部分，通过私钥（服务端）结合前两部分信息生成 - （这是一种 hash 方法，无法破解获得进行签名的密钥）
• 如何验证签名：
  服务端 用 密钥+用户信息生成签名，跟JWT第三部分进行对比即可。

JWT 相较传统 cookie-session 优势

传统 cookie-session，服务端存储会话，给到客户端sessionID，客户端每次请求带上sessionID，服务端通过sessionID验证会话信息。
对于分布式结构，需要独立的用户服务处理登陆信息。

参考：

• https://learnku.com/go/t/52399

状态转换草图

一般直接 git status 会有详细的提示