# Heading level 1

### Heading level 3

##### Heading level 5

**boldtext**
*italic text*
~~strikethrought text~~

1. 1. Fist item
2. 2. Second item
   1. 1. Indented item
   2. 2. Indented item
3. 3. Third item

• - Fist item
• - Second item
  • - Indented item
  • - Indented item
• - Third item

[Link](https://blog.lizhen.pub)
<https://blog.lizhen.pub>

`inline code`

1
2
3

//```js  
const message = 'li'
//```

Horizontal rules: -– ___ ***

Table:

| ID | Title |
|—|——|
|#1 | Hello |
|#2 | Markdown |

JS PROMISE ERROR

一般规则:
子函数返回Promise,不必使用catch处理,错误处理由最顶层的Promise处理.

• promise reject 后，没有被catch的话，目前不会结束代码运行。会继续执行后续代码，不过会在最后报个警告： UnhandledPromiseRejectionWarning。并提示在后续的 node 版本中会导致进程非正常结束，就是崩掉。

• Async的作用有二个

  1. 函数返回 Promise
  2. 函数中使用 await

• await 对错误的处理方式:

  • await 执行时如返回REJECT,则扔出错误,可以使用try/catch语句捕获.

• Then , Catch , Finally

  • catch 捕获错误,
  • 使用reject 而不是throw
  • finally 不影响 then/catch的数据流.不接受任何参数,可做一些清理工作.

    1 2 3 4

    # Output: Good ABC Promise{ <state>: "fulfilled" ,<value>: undefined } Promise.resolve("ABC").finally(() => console.log("Good")).then((dat) => console.log(dat)); # Output: Good Promise{ <state>: "fulfilled", <value>:"ABC" } Promise.reject("ABC").finally(() => console.log("Good")).catch((dat) => dat);

SSH 举例

tldr

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

- Connect to a remote server:
  ssh username@remote_host

- Connect to a remote server with a specific identity (private key):
  ssh -i path/to/key_file username@remote_host

- Connect to a remote server using a specific port:
  ssh username@remote_host -p 2222

- Run a command on a remote server with a [t]ty allocation allowing interaction with the remote command:
  ssh username@remote_host -t command command_arguments

- SSH tunneling: Dynamic port forwarding (SOCKS proxy on `localhost:1080`):
  ssh -D 1080 username@remote_host

- SSH tunneling: Forward a specific port (`localhost:9999` to `example.org:80`) along with disabling pseudo-[T]ty allocation and executio[N] of remote commands:
  ssh -L 9999:example.org:80 -N -T username@remote_host

- SSH jumping: Connect through a jumphost to a remote server (Multiple jump hops may be specified separated by comma characters):
  ssh -J username@jump_host username@remote_host

- Agent forwarding: Forward the authentication information to the remote machine (see `man ssh_config` for available options):
  ssh -A username@remote_host

CSS Flex 弹性布局

• 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称“项目”。
• 容器存在2根轴, 主轴,从轴. 容器不存在行的概念.
  

容器属性(控制所属子元素)

• flex-direction: 主轴方向,项目(子元素)的排列方向.
• flex-wrap: 子元素（项目）超出父容器时是否换行.
• flex-flow: flex-direction flex-wrap 的缩写.
• justify-content: 子元素（项目）在主轴方向上的对齐方式
• align-items: 子元素（项目）在次轴方向上的对齐方式
• align-content: 子元素（项目）在侧轴还有多余空间时调整容器内项目的对齐方式

项目属性(子元素)

• order: 设置项目在容器中出现的顺序.
• align-self: 覆盖 align-items 属性,为某个项目设置不同的对齐方式
• flex: flex-grow flex-shrink flex-basis 的缩写.分别对应项目的增长量,收缩量,长度. ( 默认值: flex: 0 1 auto; )
• flex-grow,flow-shrink: 计算方式

Flex 一维布局

• Flex是一维布局的含义之一:假设主轴尺度足够,所有flex items都将布局在主轴上.

虚拟环境

1
2
3

python -m venv myvenv # 创建
source myvenv/bin/activate #激活,source means that is is executed in the current shell.
deactivate

安装

1
2
3

pip freeze > requirements.txt
pip install -r requirements.txt
pip install ... -i https://mirrors.aliyun.com/pypi/simple/ #阿里源

开发REACT时,我的常用包和工具

• 生成APP CREATE-REACT-APP
• 路由 REACT ROUTER
• 表单 FORMIK,YUP
• 工具 LODASH, 格式化数字 NUMERAL 日期库 MOMENT ,ID标识符NANOID, 深度拷贝RFDC
• 状态维护 REDUX,REACT-REDUX
• 图标 REACT-ICONS
• WEB Server EXPRESS
• 数据库 PG,MSSQL
• UI库 REACT-BOOTSTRAP,MUI, 对话框SWEETALERT2,MarkdownREACT-MARKDOWN
• 表格 REACT-BOOTSTRAP-TABLE2,MUI-DATATABLES
• 消息队列 RABBITMQ
• 非SQL数据库 REDIS

GET Public IP

家里联通猫得到的是100.64.x.x的运营商私有区域地址.为获得使用的公网地址可采用如下方法:

1
2
3
4
5
6
7
8

dig +short myip.opendns.com @resolver1.opendns.com
dig +short txt ch whoami.cloudflare @1.0.0.1
dig TXT +short o-o.myaddr.l.google.com @ns1.google.com
host myip.opendns.com resolver1.opendns.com
# 使用第三方网站
curl ifconfig.me
curl icanhazip.com
curl ipecho.net/plain

事务隔离级别

• 事务隔离级别简单的说，就是当激活事务时，控制事务内因SQL语句产生的锁定需要保留多入，影响范围多大，以防止多人访问时，在事务内发生数据查询的错误。
• postgresql 使用MVVC 读快照 , 读永远不妨碍写.
• postgresql 默认使用READ COMMITTED事务隔离级别. 就是说事务中每个语句得到一个新的数据快照.为了使一个事务使用同一快照,请使用REPEATABLE READ事务隔离级别. postgresql中最后一个隔离级别是SSI串行读.

For Update 类似update一样锁定行, 必须等待commit后才释放锁. For Update NOWait ,nowait 就是不等待,当已被其他事务锁定时,直接报错.

1
2
3
4
5

BEGIN;
  Select * From invoice Where processed = false For Update;
  ** application magic will happen here **
  Update invoice Set processed = true ...
COMMIT;

其他: postgresql 的 advisory locks.

REACT HOOK

React Fiber with Render and Commit phrases

• fiber 是react创建的内部对象代表每个元素(element),可以是一个DOM,也可以是一个函数部件.
• hook出现之前的函数部件,只接受属性(那时的react引擎不使用fiber). 因为函数不能保存状态,而使用fiber后,状态保存在fiber中.类似与将函数使用的变量保存函数体外.(例如: 全局变量可供所有函数使用).
• React 为每个元素创建2个fiber.一个为”current“ ,一个为”workInProgress“.
  • “current” 在屏幕上展示给客户. 同时 “workInProgress”在后台处理更新,一旦完成,后者转变为”current”.
  • 初始化时,我们称为Mount, 每个部件都需创建, 比较费时. “workInProgress”创建完成后变为”current”(就是一个指针分配).
  • 当发生更新时, 我们称为Update ,”workInProgress”再次创建,但他从”current”克隆未变的部分.速度大大加快, 完成后成为”current”.

React useState

1

const [ data ,setData ] = useState();

• 当代码使用setData时 ,意思是 Dispatch action ,引擎将action安排至对应fiber中hook对应的更新队列.下次更新时执行.
• 执行的结果决定了Update时, data获得的最新状态.

React useEffect

What is a side effect?

• 相对于纯函数, 函数有隐含的依赖.
• 解决方式有二种:
  1. 将依赖都放入函数参数中. 完美解决方式,但有时很难实现.
  2. 将依赖打包并推迟到最后, 直到真正需要时才执行.在下面例子中,c and log 作为输入参数.所以addFunc是纯的, add 也是纯的.

     1 2 3 4 5 6 7

     function addFunc(c ,log) { function add(a ,b) { log(a,b) return a + b + c } return add }

     useEffect

     1	useEffect( () => { ...; return ... }, [DependArray] )

• useEffect 位于上图的绿色部分.再更新完DOM后执行.
• useEffect 将使用fiber的updateQueue属性,保存effect函数(分为 create 和destory两类), 取决于场景Mount/Upudate 和 依赖数组.
• 每次更新完屏幕后, react引擎会flush effect 队列.(先 destory ,后 create)

JS new 操作符

JS的new是为了模仿其他类语言(java,C#)创建对象而设置的.掩盖了JS对象原型链的本质.是语言设计的糟点.

请参考What is the ‘new’ keyword in JS?

理解new,关键点如下

1. 它创建一个新对象.对象类型是简单对象{}
2. 将这个新对象内部不可访问的[prototype]属性设置为构造函数的外部可访问的原型对象(每个函数对象都自动具有原型属性)
3. 使this变量指向新创建的对象.
4. 返回新创建的对象，除非构造函数返回非空对象引用。在这种情况下，将返回该对象引用。
   注意: 最困难的是第二步,每个对象（包括函数）都有这个称为 [[prototype]] 的内部属性。它只能在对象创建时设置，可以使用 new、Object.create 或基于字面量（函数默认为 Function.prototype，数字为 Number.prototype 等）。它只能用 Object.getPrototypeOf(someObject) 读取。没有其他方法可以设置或读取此值

   1 2 3 4 5 6 7 8 9 10

   ObjMaker = function() {this.a = 'first';}; // 普通构造函数. ObjMaker.prototype.b = 'second'; // ObjMaker的prototype(原型属性)可修改,它还有一个[[prototype]]属性不可修改. obj1 = new ObjMaker(); // 新对象obj1创建了, 就是{}. // obj1 的 [[prototype]] 设置为当前ObjMaker.prototype的对象值(如果ObjMaker.prototype以后分配新值,obj1的[[prototype]]不会改变,但是你可以更改ObjMaker.prototype的属性来影响obj1). // 执行ObjMaker时,obj1代替this...,所以obj1.a设置为'first'.

new 的伪代码

1
2
3
4
5
6
7
8
9
10
11

function New(func) {
  var res = {};
  if (func.prototype !== null) {
  res.__proto__ = func.prototype;
}
var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));
if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
  return ret;
}
  return res;
}

JS Object.create 的伪代码

1
2
3
4
5
6
7
8

Object.create = function(proto ,propertiesObject) {
  if (typeof proto !== 'object' && typeof proto !== 'function') {
    throw new TypeError('Object prototype may only be an Object:' + proto)
  }
  function F() {}
  F.prototype = proto;
  return new F();
}