最近在学习 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，比较结果得出结论

简介

testcafe (官网) 是一个基于 nodejs 的自动化测试框架，优点就先不多说了，我们直接进入正题！

安装

testcafe 是一个 npm 包，它可以使用 npm 或 yarn 包管理器进行安装，这里我们使用 yarn 进行安装（因为它很快）

如果你的机器上没有安装 yarn，那么你可以使用 npm 来安装 yarn 😊

1	npm install -g yarn

在命令行中运行以下命令

1

yarn global add testcafe

这样， testcafe 就安装在你本机上啦

小试牛刀

创建一个测试项目

我们新建一个目录，用于练习我们的自动化测试框架 testcafe

1
2
3

# 首先切换到你用于管理 web 项目的根目录，我本机是 "~/www"
cd ~/www
mkdir testcafe && cd testcafe