我们在写 shell 脚本时经常会遇到一些需要交互的操作，比如修改某个文件，或是使用 yum install ssh-keygen certbot --nginx 等操作时，需要输入一些指令如 “y”, “Enter” 和其他的一些信息。

我们写脚本就是为了自动操作，怎么可以等命令执行一会之后在按个回车进行下一步呢？既然我知道接下来要输入什么命令，我告诉你你帮我输入了不就得了？

聪明tōu lǎn的我们想到了一些办法来避免这种无谓的等待，记录下来分享给大家

1. 自动化输入

1.1 输入单个指令

这里用 yum install 来进行演示，虽然该命令可以使用参数 -y 来直接确认，但是这是一个大家熟知对命令，可以用来很好的演示效果。

1

echo "y" | yum install wget

如果要求输入回车，可以使用 echo 指令的参数 -e + \n 进行操作

1

echo -e "\n" | yum remove wget

1.2 输入多行指令

输入多行指令我们需要借助输入重定向操作符 <<

以下面这个脚本为例

1
2
3
4
5

#!/bin/bash

read -p "enter number:" no
read -p "enter name:" name
echo "you have entered $no, $name"

借助 << 符号进行自动化输入

1
2
3
4
5

#!/bin/bash
sh multi.sh << EOF
1
mutoe
EOF

但是有时候这种方法并不生效，比如 ssh-keygen 命令，那只有借助强大的 expect 命令了

1.3 借助 expect 进行交互

在使用 expect 前需要进行安装，方法很简单，以 CentOS 为例，只需要运行 yum install -y expect 即可

expect 有两种用法，一种是直接写 expect 解释器的脚本，和 bash 类似，以 #!/usr/bin/expect 开头

下面是一个合格的 expect 脚本示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

#!/bin/expect

set IP     [lindex $argv 0] # 读取第1个参数设置为 IP 变量
set PASSWD [lindex $argv 1] # 读取第2个参数设置为 PASSWD 变量
set CMD    [lindex $argv 2] # 读取第3个参数设置为 CMD 变量

spawn ssh $IP $CMD # spawn 来给命令加壳，以便于断言输出
expect { # expect 是断言命令
  # 如果读取到屏幕上输出 (yes/no) 信息，则输入 "yes" 并按下回车键
  # exp_continue 是继续等待花括号内的断言, 如果不加这一句会直接跳出 expect
  "(yes/no)?" { send "yes\r"; exp_continue }

  "password:" { send "$PASSWD\r" } # 如果读取到屏幕上输出 password 信息，则输入 PASSWD 变量中的内容
  "*host " { exit 1 } # 如果读取到 "No route to host" 等内容， 就以非0状态退出
}
expect eof # 等待命令执行结束

需要注意的是，在 expect 解释器内， 除了几个特定关键字的命令，其他命令都不可用，这种方式适用于执行命令较少，单次需要交互较多的自动化脚本

第二种用法是在 bash 脚本中执行 expect 配合重定向操作符, 在有大量脚本需要执行的情况下推荐使用该方式

下面是我在 certbot 命令时使用的 shell 脚本，以供参考

1
2
3
4
5
6
7
8
9
10
11
12
13

#!/bin/bash

sudo expect << EOF
spawn certbot --nginx
expect {
  "Enter email address" { send "mutoe@foxmail.com\n";exp_continue}
  "Please read the Terms of Service" {send "A\n";exp_continue}
  "Would you be willing to share your email address" {send "N\n";exp_continue}
  "Which names would you like to activate HTTPS for" {send "\n";exp_continue}
  "You have an existing certificate that has exactly the same domains" {send "1\n";exp_continue}
  "Please choose whether or not to redirect HTTP traffic to HTTPS" {send "2\n";exp_continue}
  eof
}

2. 修改文件

2.1 在文件中增加内容

我们想要将某个命令的输出写入到文件中进行保存，比如日志、新增一行配置，可以借助输出重定向符号 > >> 来实现

1
2

who > log.txt # > 符号将会先清空 log.txt 然后以 who 的输出写入到文件中
echo "append" >> log.txt # >> 符号会追加字符串 "append" 到文件的尾行

那如果需要写入多行该怎么办呢？虽然也可以借助 echo -e + \n 来实现，但是我们还有其他更优雅的办法

借助 cat 命令配合 << 符号也可以达到我们的目的

1
2
3
4
5

cat > log.txt << EOF
我有很多行
很多行
行
EOF

WHY?
cat 命令如果不接受任何参数，将会进入交互式界面，输入什么就会输出什么；
配合 > 符号将 cat 的输出写入到文件 log.txt 中；
而 << 我们前面介绍过，会将多行输入重定向到前面的命令 cat 中

2.2 修改文件的内容

关于修改文件的内容，如何在不借助 vim 等工具情况下进行呢？

有请我们强大的 sed 命令登场！！

sed [选项] 指令 文件

其中选项有

• -n 忽略没有修改的内容
• -i 原地修改文件而不输出
• -r 拓展正则表达式

指令为一个字符串，由 2 个部分组成 条件 命令，条件用于约束，指令进行操作

一个正常的替换命令长这样

1

sed -i "/^user/ s/nginx/mutoe/" /paht/to/nginx.conf

其中
/^user/ 为条件，查找以 “user” 开头的一行;
s/nginx/mutoe/ 为命令，s是替换，这条命令意思是将 nginx 替换为 mutoe

sed 支持的命令有很多，约有 15 中，列举一些常见的命令

• i 插入
• a 追加
• d 删除行
• c 替换行
• s 替换指定内容

关于 sed 的更多用法，可以参考我的 《Linux 学习笔记》 “sed 非交互式编辑” 部分

以下面的 nginx 配置片段为例

1
2
3
4
5
6
7
8
9
10
11
12
13

user nginx;
worker_processes  1;

http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;

  #gzip  on;

  include /etc/nginx/conf.d/*.conf;
}

# delete me

首先我们将 nginx 的启动用户改为自定义用户

1

sed -i "1c user mutoe;" /path/to/nginx.conf

-i 意思是将输出 “in-placed” 直接替换文件内容而不是作为输出
“1c user mutoe;” 是指将第 1 行替换(c)为”user mutoe;”

接下来我们去除 #gzip on; 前的空格，难度在于我们并不知道改行配置位于哪一行，没关系，我们借助正则表达式先找到这一行

1

sed -i "/#gzip\s+on;/s/#//" /path/to/nginx.conf

最后我们删除文件的最后一行

1

sed -i "$d" /path/to/nginx.conf

好了，所有内容到这里就结束啦，如果看的不过瘾，这里有我在实际使用中的一些脚本，以供参考。

如果你有任何疑问或是支持，欢迎在下方留言。

参考资料

• echo 命令 - Linux 命令大全
• Shell 输入/输出重定向 - Runoob
• shell 中交互输入自动化 - lufubo

最近在学习 Flutter 补充移动端开发的技术栈，刚好换电脑，特此从 0 开始重新搭建 Flutter 开发环境

整个安装环境是基于 macOS 操作系统的，如果你使用的是 Windows 操作系统，可以参考其他教程或本博文大致思路

1. 环境安装包下载

以下几个安装包体积较大，所以在观看本教程前需要提前进行下载

• Flutter SDK (提供 Flutter 相关命令行)
• XCode (提供 iOS 模拟器和编译环境)
• Android Studio (提供 Android 模拟器和编译环境)

2. Flutter SDK 安装

下载好 Flutter SDK 后，解压到一个存放 SDK 的目录，我这里存放在 ~/.flutter-sdk 下

1
2
3

mkdir ~/.flutter-sdk
cd ~/.flutter-sdk
unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.4-stable.zip

然后将 Flutter SDK 的安装目录暴露给环境变量，在 ~/.zshrc 或 ~/.bashrc 文件中增加以下内容

1
2

# Flutter
export PATH="$PATH:$HOME/.flutter-sdk/flutter/bin"

然后你还可以下载 Flutter 在未来会需要的二进制包（可选的，也可以在未来下载）

1

flutter precache

最后运行检查工具 flutter doctor ，来检查你的 Flutter 是否可以正常运行, 如果出现下面的信息，就说明你安装 Flutter SDK 成功啦

1
2
3
4
5
6
7
8
9

flutter doctor

➜  .flutter-sdk flutter doctor
[✓] Flutter (Channel stable, v1.7.8+hotfix.4, on Mac OS X 10.14.5 18F132, locale en-CN)
    • Flutter version 1.7.8+hotfix.4 at /Users/yourusername/.flutter-sdk/flutter
    • Framework revision 20e59316b8 (6 weeks ago), 2019-07-18 20:04:33 -0700
    • Engine revision fee001c93f
    • Dart version 2.4.0
...

前言

现手上有一个小型的 js 项目, 内容比较简单, 就是提供一个单页, 其中引用了 quill 富文本编辑器.

该页面需要嵌入到其他客户端(如 iframe 或 webview) 以提供统一的富文本编辑的用户体验.

项目内部使用 webpack 将 js / stylus 打包, 对外提供两个 html, 一个用于大屏的 iframe 显示, 另一个用于小屏的 Android / IOS 设备显示.

项目结构如下

你可以参考此项目对自己的项目进行改造, 过程大致相同

阅读本贴, 你可能需要了解以下前置内容

• typescript
• webpack
• yarn

本次改造所有改动可在 github 查看 commit 记录

“TypeScript 又是什么东西啊, 怎么又在出新语言, 求不要再出了, 学不动了!!”

场景1 – 检查类型

开心的撸代码中, 突然接到老大消息: xxx离职了, 现在你来接手他维护的项目.😳

拿到代码后, 看到了这段东西

1
2
3
4
5

/** 根据用户id获取用户信息 */
async function getUsers(id) {
  const users = await fetchUsers(id)
  return users
}

这个 id 是什么? 是 1 还是 "1" 还是 [1,2,3] 还是 "1,2,3" ???

这个 users 又是什么? 是普通权限用户? 还是管理员看到的用户?

全局搜索了一下调用该方法的地方, 发现这是个“万能”的方法, 传入 id 为 1 时会返回 1 号用户的不含私密信息的对象

传入 [1,2,3] 或 "1,2,3" 时会获取一个数组

如果上了ts

正则表达式是什么

正则表达式可以从一段文本中提取特定内容的功能, 几乎所有编程语言都支持. 使用在爬虫、检查用户输入合法性、XSS 过滤等.

在整个学习过程中, 给大家推荐一个可视化正则表达式的网站 https://jex.im/regulex/

他可以根据你输入的正则表达式动态的生成匹配图, 帮助你理解一个复杂的正则表达式. 像下面这样

语法

javascript 中支持 3 种正则表达式语法: 字面量、构造函数和工厂符号, 他们的签名如下

/pattern/flags
new RegExp(pattern, [, flags])
RegExp(pattern, [, flags])

前段时间听说 Vue3.x 要使用 TypeScript 重构了, 本来一直都想研究一下 Vue 的源码, 这次带着夙愿来从头编写一个简单的、现代化的 Vue.

搭建好 TypeScript 开发环境后, 开始了一段 TypeScript 与 Vue 源码的探索之旅.

背景

我使用 ES6 class 创建了一个 Vue 类, 为了实现数据监听, 我使用了 ES2015 中的 proxy 方法来对数据进行封装, 并且将这个 proxy 返回给类的构造方法, 以便于获取 vm 实例.

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

interface IOptions {
  data: () => Record<string, any>
}

class Vue {
  private $options: IOptions = {
    data: () => ({})
  }

  constructor(options: IOptions) {
    this.$options = options
    const proxy = this.initProxy()
    return proxy
  }

  initProxy() {
    const data = this.$options.data ? this.$options.data() : {}

    return new Proxy(this, {
      set(_, key: string, value) {
        data[key] = value
        return true
      },
      get(_, key: string) {
        return data[key]
      }
    })
  }
}

const vm = new Vue({
  data() {
    return {
      a: 1
    }
  }
})

vm.a = 2
// ^ Property 'a' does not exist on type 'Vue'.

console.log(vm.a) // => 2
//             ^ Property 'a' does not exist on type 'Vue'.

如果你查看了在线版本, 可以看到, 我们在使用实例属性 vm.a 时报了一个 TS 错误 Property 'a' does not exist on type 'Vue', 意思是说 vm 实例上不存在属性 a.

在 js 中，将内容复制到剪贴板的原理是利用 document.execCommand() 方法进行操作.

document.execCommand()

document.execCommand() 的签名是这样的

1

bool = document.execCommand(aCommandName, aShwoDefaultUI, aValueArgument)

需要注意的是，该命令复制的内容是当前页面选中的内容.

什么是动态规划

动态规划（DP, Dynamic Programming）

一句话总结：在求解一个复杂问题时，将其分解为若干个简单问题。通过求解简单问题的最优解，来找到目标问题的最优解。

动态规划能做什么

常见问题

• 求解斐波那契数列第 N 项 (Leetcode 509. Fibonacci Number)
• 背包问题
• 阶梯问题 (Leetcode 70. Climbing Stairs)
• 硬币问题 (Leetcode 322. Coin Change)

怎么求解动态规划问题

我们通过一个例子来了解一下DP的基本原理。

首先，我们要找到某个状态的最优解，然后在它的帮助下，找到下一个状态的最优解。

如硬币问题的例子

硬币问题：如果我们有面值为1元、3元和5元的硬币若干枚，如何用最少的硬币凑够11元？

前言

因为最近在项目中经常需要将数组中的一个元素从数组中剔除，基于 ES6 的选择有比较多， 产生了一个关于几种方法之间执行效率的疑惑，网上也没有太多资料，于是乎本着学习性能测试的想法，展开了一段性能测试的旅程

测试工具

• benchmark 性能测试核心依赖
• mockjs 生成假数据
• lodash 提供另外的筛选数组的方法用于参照

1

yarn add benchmark mockjs lodash

测试思路

首先定义四种方法来测试数据删除操作，他们分别是 Array.prototype.filter Array.prototype.splice lodash.reject lodash.filter

然后使用 mockjs 生成两个数组，长度分别是 100 和 1000，用四种方法分别对这两组数据进行测试。
需要注意的是，在测试时需要对测试数组进行深拷贝，避免他们之间相互影响(毕竟 Array.prototype.splice 会改变原数组)

然后我们对其中一组数据进行测试，来校验我们写的方法是否正确

最后运行 benchmark，比较结果得出结论