• if
  • 基本语法
  • 条件包裹括号
  • 常见判定条件
• 三元
• BMW WARNING

if

基本语法

if 条件; then
    命令
elif 条件; then
    命令
else
    命令
fi

其中条件的包裹括号可以有多种方式，每种方式对应的效果不一致

条件包裹括号

阅读全文

• Husky 使用配置
  • husky 简述
  • V5+
  • V4
• Husky 配置更新
  • git hooks 说明
  • V4 工作原理
  • V5+ 原理
  • 后续问题
• BMW WARNING

Husky 使用配置

husky 简述

husky 支持所有 git 相关钩子，在对应 git 操作触发时，可以执行测试、代码校验等相关任务。

以代码校验为例来说明

代码校验 lint-staged 相关配置如下

{
	"devDependencies": {
		"lint-staged": "^11.1.2",
	},
	...,
	"lint-staged": {
        "*.{js,jsx,ts,tsx,vue}": "eslint --cache --fix"
    }
}

后续代码中，其余配置为 husky 相关，通过这些配置，我们在 commit 代码时，会校验代码错误与格式，校验不通过会有提示。

Husky 在版本 5 中配置做了大变动，具体前后的配置以版本来说明。

V5+

阅读全文

• HTTPS概述
  • 加密缘由
  • HTTPS
  • HTTPS VS HTTP
• 常见加密方式
  • 摘要算法
  • 对称加密（共享密钥加密算法）
  • 非对称加密
  • 对称 + 非对称
• 中间人攻击
  • 非对称加密中间人攻击
  • 非对称与对称方案中的中间人攻击
  • 信息抵赖
• 数字证书与签名
  • 数字证书
  • 数字签名
  • 证书掉包
  • 证书实例
  • 证书申请流程
  • 本地CA机构公钥
  • 证书链
  • 服务端找到正确的密钥X
• HTTPS请求流程图解
• 拓展
  • SSH
• 参考资料
• BMW WARNING

HTTPS概述

加密缘由

数据明文传输在经过wifi热点、路由、通信服务运营商等物理节点时信息容易被劫持暴露而不被发觉。

数据明文传输容易被中间人攻击，存在以下风险

• 窃听
• 篡改
• 冒充

HTTPS

阅读全文

• 简介
• 设计模式原则
  • Single Responsibility Principle
  • Open-closed Principle
  • Liskov substitution principle
  • Interface segregation principle
  • Dependency Inversion Principle
• BMW WARNING

简介

设计模式是在软件工程多年的发展中，经过前人不断挖坑填埋总结而来。
一般认为有 23 种，其他多是基于这 23 种延伸。
在面向对象编程语言中，
设计模式一般遵循 SOLID 原则
Acronym | EN | CN | DESC
– | – | – | –
S |Single Responsibility Principle | 单一职责原则 |一个程序只做好一件事，复杂功能拆开
O | Open-closed Principle| 开放/封闭原则 | 对扩展开放，对修改封闭，增加需求时，扩展新代码，而非修改已有代码
L |Liskov Substitution Principle | 里氏替换原则 |子类能覆盖父类，父类能出现的地方子类就能出现
I | Interface Segregation Principle| 接口隔离原则 |接口职责单一，防止接入不使用的接口与方法
D |Dependency Inversion Principle | 依赖倒转原则 | 面向接口编程，依赖于抽象而不依赖于具体，使用方只关注接口而不关注具体类的实现

设计模式原则

Single Responsibility Principle

阅读全文

• 获取执行脚本的位置
• Shell 脚本相互调用
• 脚本中断与执行
• 判定目录或文件存在
• 算数命令
• 查看目录下文件夹
• 创建嵌套文件夹并进入
• 查看远程服务及端口是否开启
• 设置别名
  • 临时别名
  • 永久生效
• 查看端口占用
• 删除目录下模糊匹配的文件
  • 命令
  • 解析
• 查找目录下包含指定字符的文件
  • 命令
  • 解析
• BMW WARNING

获取执行脚本的位置

通过dirname "$0"获取当前执行脚本所在位置。

BASEDIR=$(dirname "$0")
echo $BASEDIR

示例

Shell 脚本相互调用

在 Shell 脚本内部调用其他 Shell 脚本，使用如下方法：

• sh
• source
• 点号(.)

使用点号和 source 的效果基本一致，等同于将其他脚本的内部内容放在当前脚本运行。
引入脚本和当前脚本执行时位于同一进程中，引入脚本可以获取到当前脚本中的变量。
sh 引入的脚本会单开一个子进程，其无法获取到当前脚本中的变量，要获取该变量，需要使用 export 导出。
有如下两个在同级目录的脚本 a 和 b
a.sh

a=1
echo "b is $b"
# b is
BASEDIR=$(dirname "$0")
echo $BASEDIR
. "$BASEDIR/b.sh"
# a is 1
echo "b is $b"
# b is 2
source "$BASEDIR/b.sh"
# a is 1
sh "$BASEDIR/b.sh"
# a is
export a
sh "$BASEDIR/b.sh"
# a is 1

b.sh

echo "a is $a"
b=2

示例

脚本中断与执行

阅读全文

• sed 简介
• 选项参数
  • -n
  • -e
  • -i
• 命令参数
  • i/a
  • d
  • p
  • s/c
• 常见用法
  • 文末插入
  • 替换字符
  • 获取行数
  • 获取字符行号
• BMW WARNING

sed 简介

sed 是一种流文本编辑器，用于读取指定文件或标准输入。
如果没有文件被指定，可由命令列表来指定输入，进行相应修改后写入到标准输出。
本文后续内容以skyline.txt示例，可在根目录执行下述脚本。
其文本内容为

test
skyline
test2
skyline test

选项参数

-n

阅读全文

• 字符替换
• 字符包含判定
  • ==
  • 正则=~
  • grep
• 将字符串作为命令执行
• 获取子串（字符串切割）
  • cut
  • 截取语法
• 字符串转数组
  • read
  • 字符替换
  • 其他场景
• BMW WARNING

字符替换

将空格字符’ ‘替换为’|’

STR="1 2 3 4";
SKYLINE=${STR// /|}
echo $SKYLINE
# 1|2|3|4

字符包含判定

==

阅读全文

• 概述
• 基础使用示例
  • echo
  • wc
  • mkdir
• 参数
  • -0
  • -I
  • -L
  • -n
  • -d
  • -t
  • -p
• BMW WARNING

概述

Shell 中只有部分命令支持标准输入，例如 wc、grep、xargs 等，通过管道 | 很容易将前置命令的标准输出传递给这些命令。但是部分命令不支持标准输入，不能通过管道 | 直接操作，例如 echo rm mkdir 等。这需要 xargs 为那些不支持标准输入的命令提供管道操作。
通过 xargs 将标准输入转换成参数来完成后续命令。如果转换成的参数有多个（通过标准输入空符分割），后续命令重复执行。

The xargs command in UNIX is a command line utility for building an execution pipeline from standard input. Whilst tools like grep can accept standard input as a parameter, many other tools cannot. Using xargs allows tools like echo and rm and mkdir to accept standard input as arguments.

基础使用示例

echo

阅读全文

• 回滚
  • revert
  • reset
• git 删除分支
  • 删除本地分支
  • 删除远端分支
• git 单列已添加到暂存区的文件
• Git 本地分支有提交，单独查看并运行远程该分支
• 远程仓库迁移（拷贝）
• 新建仓库时关联远程与本地
• git 同时推送多个仓库
  • git remote add
  • git remote set-url
• https 方式访问 git 免输密码
• Git 用户配置
  • 查看配置
  • 修改全局配置
• GIT SSH 免密
• 同步 Github fork 仓库
• BMW WARNING

回滚

revert

git revert [commit-id]

revert 可将代码回滚到指定版本，但会留下一条回滚记录

reset

阅读全文

• 页面渲染
  • 渲染流程
  • 渲染原理
  • Layout
  • Paint
• 回流与重绘触发
  • 回流触发
  • 重绘触发
• 回流与重绘优化
  • 浏览器优化
  • 代码优化
• 像素管道
  • 像素管道组成
• BMW WARNING

页面渲染

渲染流程

浏览器使用流式布局模型 (Flow Based Layout)，浏览器从拿到代码到渲染页面，主要流程

• 解析 HTML 节点，创建 DOM 树
• 解析 CSS 创建 CSSOM 树
• 合并 CSSOM 与 DOM 为 渲染树（renderTree）
  • 由 DOM 树 Root 节点开始遍历获取可视节点
  • 对于 DOM 的可视节点，获取其对应 CSSOM 树规则
  • 根据两棵树上获取的节点与样式，合成 renderTree
• Layout，计算出 renderTree 每个节点的大小和位置
• Paint， 绘制 renderTree 到页面上

合并的 renderTree 的过程只获取可视节点，将会忽略不可视节点 (meta, script, link 等节点及 display:none 的节点)。

渲染原理

阅读全文