前言​

在现代家庭中，稳定的 WiFi 网络是日常生活的重要组成部分。为了确保家庭网络的稳定运行，我们可以使用 Uptime Kuma 结合 Shell 脚本定期上报网络状态，并在网络掉线时通过 Bark 推送通知，让你随时掌握家庭网络状态。

本文将详细介绍如何编写 Shell 脚本，利用 Uptime Kuma 的 Push API 定期上报家庭 WiFi 网络状况，并在掉线时通过 Bark 发送推送通知。

准备工作​

1. Uptime Kuma：一个开源的自托管监控工具。
2. Bark：一个用于 iOS 的推送通知工具。
3. Shell 脚本：用于定期检查 WiFi AP 状态并上报。

编写 Shell 脚本​

首先，我们编写一个 Shell 脚本 check_wifi_ap.sh，用于检查两个 WiFi AP 的状态并上报到 Uptime Kuma。如果任意一个 AP 掉线，将通过 Bark 发送推送通知。

#!/bin/sh

# WiFi AP 地址
AP1="192.168.4.141"
AP2="192.168.4.142"

# Bark 推送通知 URL
BARK_URL="https://api.day.app/<your_bark_key>"

# Uptime Kuma Push API URL
UPTIME_KUMA_URL="https://<your uptime domain>/api/push/xxx"

# 计算平均ping值的函数
get_avg_ping() {
    ip=$1
    ping_result=$(ping -c 3 "$ip" | grep 'time=' | awk -F'time=' '{print $2}' | awk '{print $1}')

    if [ -z "$ping_result" ]; then
        echo "9999"
        return
    fi

    sum=0
    count=0
    for time in $ping_result; do
        sum=$(echo "$sum + $time" | bc)
        count=$((count + 1))
    done

    avg_ping=$(echo "scale=2; $sum / $count" | bc)
    echo "$avg_ping"
}

# 获取AP1和AP2的平均ping值
avg_ping1=$(get_avg_ping "$AP1")
avg_ping2=$(get_avg_ping "$AP2")

# 检查AP1ping结果
if [ "$avg_ping1" = "9999" ]; then
    status="down"
    msg="AP1 ($AP1) is down"
    ping_value="9999"
    curl -X POST "$BARK_URL/$msg"  # 发送 Bark 推送通知
else 
    status="up"
    msg="OK"
fi

# 检查AP2ping结果
if [ "$avg_ping2" = "9999" ]; then
    status="down"
    msg="AP2 ($AP2) is down"
    ping_value="9999"
    curl -X POST "$BARK_URL/$msg"  # 发送 Bark 推送通知
else 
    # 如果AP1的Ping也是正常的则进行计算两个AP平均ping值的平均值
    if [ "$ping_value" != "9999" ]; then
        total_avg_ping=$(echo "scale=2; ($avg_ping1 + $avg_ping2) / 2" | bc)
        ping_value="$total_avg_ping"
        msg="OK"
    fi
fi

# 使用curl命令上报心跳
curl -G "$UPTIME_KUMA_URL" --data-urlencode "status=$status" --data-urlencode "msg=$msg" --data-urlencode "ping=$ping_value"

# 打印结果到控制台（可选）
echo "AP1 ($AP1) 平均ping值: $avg_ping1 ms"
echo "AP2 ($AP2) 平均ping值: $avg_ping2 ms"
echo "状态: $status, 消息: $msg, 总平均ping值: $ping_value ms"

脚本说明​

1. 定义 WiFi AP 地址：

   • AP1 和 AP2 分别为两个 AP 的 IP 地址。

2. 定义 Bark 推送通知 URL：

   • BARK_URL 为 Bark 推送通知的 URL，需替换 your_bark_key 为实际的 Bark 密钥。

3. 定义 Uptime Kuma Push API URL：

   • UPTIME_KUMA_URL 为 Uptime Kuma 的 Push API URL。

4. 计算平均 ping 值的函数：

   • get_avg_ping 函数用于计算给定 IP 的平均 ping 值。

5. 获取 AP 的平均 ping 值：

   • 调用 get_avg_ping 函数获取 AP1 和 AP2 的平均 ping 值。

6. 检查 AP 的 ping 结果：

   • 如果 AP1 或 AP2 的 ping 失败，将 status 设置为 down，并发送 Bark 推送通知。
   • 如果 AP1 和 AP2 都正常，则计算它们的平均 ping 值。

7. 上报心跳：

   • 使用 curl 命令将 status、msg 和 ping 值上报到 Uptime Kuma。

8. 打印结果到控制台：

   • 打印每个 AP 的平均 ping 值和总平均 ping 值。

定时任务​

将脚本添加到 cron 中以定时运行，例如每 5 分钟运行一次：

1. 编辑 crontab：

   crontab -e
   

2. 添加以下行：

   */5 * * * * /path/to/check_wifi_ap.sh
   

总结​

通过上述步骤，你可以使用 Uptime Kuma 和 Shell 脚本定期上报家庭 WiFi 网络状况，并在网络掉线时通过 Bark 发送推送通知。这样，你可以随时掌握家庭网络的状态，确保网络的稳定运行。

场景描述​

在 Proxmox VE 环境中，系统日志中可能会出现一些异常信息需要及时处理。为了保证系统运行稳定，我们需要一种实时监控日志，并在检测到关键字时立即通知或报警的机制。通过 Shell 脚本和 Bark 推送，我们可以高效地实现这一目标。

步骤概览​

1. 编写 Shell 脚本 monitor_pve_logs.sh，实时监控系统日志。
2. 创建符号链接，将脚本链接到 /usr/local/bin/ 目录。
3. 创建 systemd 服务单元文件，以确保脚本在系统启动时自动运行。
4. 启用并启动 systemd 服务。

编写 Shell 脚本 monitor_pve_logs.sh​

以下是完整的 Shell 脚本，用于监听 Proxmox VE 的系统日志文件 /var/log/syslog。一旦检测到预定义的关键字，将截取该日志行的前后若干行，并通过 Bark API 推送通知。

#!/bin/bash

# 校验 jq 是否安装，如果未安装则退出脚本
if ! command -v jq &> /dev/null; then
    echo "jq 命令未找到，请先安装 jq。" >&2
    exit 1
fi

# 配置部分
KEYWORDS=("关键字1" "关键字2" "关键字3")  # 要监控的关键字列表
LINES_BEFORE=5   # 关键字前的行数
LINES_AFTER=5    # 关键字后的行数
BARK_API_URL="https://api.day.app/push"
BARK_DEVICE_KEY="<your_key>"  # 替换为你的 Bark 设备 key
GROUP="pve"      # Bark 分组
MAX_ALERTS=10    # 每分钟最多推送次数
ALERT_INTERVAL=60 # 防抖时间窗口（秒）
MIN_TIME_DELTA=10 # 最小推送时间间隔（秒）

# 存储时间戳的数组，用于防抖
timestamps=()

# 存储已经推送过的日志行的集合
declare -A sent_lines

# 最近一次推送的时间戳，用于延迟推送
last_push_time=0

# 判断日志行是否包含任意关键字
contains_keyword() {
    local line="$1"
    for keyword in "${KEYWORDS[@]}"; do
        if echo "$line" | grep -qi "$keyword"; then
            return 0
        fi
    done
    return 1
}

# 解析日志行中的时间戳
extract_timestamp() {
    local line="$1"
    echo "$line" | awk '{print $1 "T" $2}'
}

# 监听 /var/log/syslog
tail -F /var/log/syslog | while read -r LINE; do
    # 检查是否包含任意关键字
    if contains_keyword "$LINE"; then
        # 检查该行是否已经推送过
        if [[ ${sent_lines["$LINE"]} ]]; then
            continue
        fi
        # 将该行标记为已推送
        sent_lines["$LINE"]=1

        # 获取当前日志行的时间戳
        log_timestamp=$(extract_timestamp "$LINE")
        # 去掉尾部的时区部分
        log_timestamp="${log_timestamp%+*}"
        log_time=$(date -d "$log_timestamp" +%s 2>/dev/null)

        # 检查日期解析是否成功
        if [[ -z "$log_time" ]]; then
            echo "警告：无法解析时间戳 '$log_timestamp'，跳过该日志行。"
            continue
        fi

        # 检查时间间隔是否小于最小时间间隔
        if (( log_time - last_push_time < MIN_TIME_DELTA )); then
            echo "警告：时间间隔小于 $MIN_TIME_DELTA 秒，跳过推送。"
            continue
        fi

        # 获取当前时间戳（秒）
        current_time=$(date +%s)

        # 过滤掉时间窗口之外的旧时间戳
        timestamps=($(for ts in "${timestamps[@]}"; do
            if (( current_time - ts < ALERT_INTERVAL )); then
                echo "$ts"
            fi
        done))

        # 检查是否超过推送限制
        if (( ${#timestamps[@]} < MAX_ALERTS )); then
            # 将当前时间戳添加到数组中
            timestamps+=("$current_time")

            # 更新最近一次推送的时间戳
            last_push_time=$log_time

            # 获取当前日志文件名和行号
            LOG_FILE="/var/log/syslog"
            
            # 使用 awk 获取日志行号
            LINE_NUMBER=$(awk -v line="$LINE" '$0 == line {print NR; exit}' "$LOG_FILE")

            # 确保 START_LINE 和 END_LINE 不小于 1，且在日志文件行数范围内
            START_LINE=$((LINE_NUMBER - LINES_BEFORE))
            ((START_LINE < 1)) && START_LINE=1
            END_LINE=$((LINE_NUMBER + LINES_AFTER))

            # 截取前后 n 行的日志
            LOG_SNIPPET=$(sed -n "${START_LINE},${END_LINE}p" "$LOG_FILE")

            # 对日志信息进行字符串转义
            ESCAPED_MESSAGE=$(echo "$LOG_SNIPPET" | jq -sR .)

            # 通过 Bark API 发送通知
            curl -X "POST" "$BARK_API_URL" \
                -H 'Content-Type: application/json; charset=utf-8' \
                -d $'{
                "body": '"$ESCAPED_MESSAGE"',
                "title": "PVE系统日志异常",
                "group": "'"$GROUP"'",
                "device_key": "'"$BARK_DEVICE_KEY"'"
            }' > /dev/null 2>&1
        else
            echo "警告：每分钟推送次数超过限制，跳过推送。"
        fi
    fi
done

创建符号链接​

将脚本文件链接到 /usr/local/bin/ 目录，以便 systemd 服务可以方便地找到脚本：

sudo ln -s ~/scripts/monitor_pve_logs.sh /usr/local/bin/monitor_pve_logs.sh

创建 systemd 服务单元文件​

为了使脚本作为服务运行，并在系统启动时自动运行，我们需要创建 systemd 服务单元文件。

创建服务单元文件 monitor_pve_logs.service 并放置在 /etc/systemd/system/ 目录下：

sudo nano /etc/systemd/system/monitor_pve_logs.service

在文件中添加以下内容：

[Unit]
Description=Proxmox VE Logs Monitor Service
After=network.target

[Service]
ExecStart=/usr/local/bin/monitor_pve_logs.sh
Restart=always
User=root

[Install]
WantedBy=multi-user.target

启用并启动服务​

按照以下步骤启用并启动 systemd 服务：

1. 重新加载 systemd 配置：

   sudo systemctl daemon-reload
   

2. 启用服务，使其在启动时自动运行：

   sudo systemctl enable monitor_pve_logs.service
   

3. 启动服务：

   sudo systemctl start monitor_pve_logs.service
   

4. 检查服务的状态，确保其正常运行：

   sudo systemctl status monitor_pve_logs.service
   

你应该看到类似如下的输出，显示服务正在运行：

● monitor_pve_logs.service - Proxmox VE Logs Monitor Service
   Loaded: loaded (/etc/systemd/system/monitor_pve_logs.service; enabled; vendor preset: enabled)
   Active: active (running) since Thu 2024-09-14 23:00:00 UTC; 1min 30s ago
 Main PID: 12345 (monitor_pve_logs.sh)
   CGroup: /system.slice/monitor_pve_logs.service
           ├─12345 /bin/bash /usr/local/bin/monitor_pve_logs.sh
           └─12346 tail -F /var/log/syslog

手动停止和禁用服务​

• 手动停止服务：

  sudo systemctl stop monitor_pve_logs.service
  

• 手动禁用服务：

  sudo systemctl disable monitor_pve_logs.service
  

调试和日志信息​

如果需要查看服务的日志信息，可以使用 journalctl 命令：

sudo journalctl -u monitor_pve_logs.service

总结​

通过上述步骤，您可以为 Proxmox VE 配置一个实时监控日志的 Shell 脚本，并结合 systemd 服务确保脚本在系统启动时自动运行及异常恢复。这一方案不仅适用于 Proxmox VE，也适用于其他需要实时监控日志并及时通知的系统环境。希望这篇文章能为您的运维工作提供帮助和参考。

我们很激动地宣布Zed现在是一个开源项目了。Zed本身的代码以通用授权许可证的形式提供，以确保任何改进都会造福整个社区（编辑器使用GPL，服务器端组件使用AGPL）。GPUI是Zed所使用的UI框架，它以Apache 2许可证分发，这样你可以使用它来构建高性能的桌面应用程序，并可以根据你选择的任何许可证进行分发。

Zed 代码库将采用 Copyleft 许可证，其中编辑器部分使用 GNU General Public License (GPL)，服务器端组件则采用 Affero General Public License (AGPL)。 此外，GPUI UI 框架将以 Apache 2 许可证分发，允许开发者构建高性能桌面应用程序，并自由选择许可证分发其应用。此次开源转变意味着 Zed 的代码和相关组件将面向所有开发者开放，赋予社区更大的灵活性和合作空间。

Zed团队还开发了一个名为GPUI的GPU加速UI框架。该框架遵循Apache 2许可证，旨在克服基于Web的Electron框架的限制，并利用GPU加速为用户提供更流畅和响应更快的界面。

谈到 Nathan Sobo ，他不仅仅是Zed的创始人，还是Electron框架和广受欢迎的Atom编辑器的开发者。Electron是一基于Chromium浏览器组件和V8 JavaScript引擎的框架，现已成为全球领先的轻量级IDE和编辑器——Visual Studio Code (VS Code)的一部分。然而，Zed在技术实现上走了一条与Electron完全不同的路线。

Zed是用Rust语言构建的，直接编译为本机代码，这种方法与基于Web技术的Electron形成了鲜明对比。

其主要特性：

01 让你保持专注​

高效编码始于一种不打扰你的工具。Zed将IDE的强大功能与轻量级编辑器的响应能力相结合，让你能够亲身感受到它为你带来的高效生产力。

为了提高性能而开发的​

Zed高效地利用每个CPU核心和你的GPU，可以立即启动，瞬间加载文件，并在下一次显示刷新时响应你的按键。无与伦比的性能使你保持流畅，并使其他工具感觉很慢。

交互延迟

启动时间

一键智能编码​

通过人工智能生成代码，节省时间和按键次数。Zed原生支持GitHub Copilot，您可以使用GPT-4按下ctrl-enter并键入自然语言提示来生成或重构代码。在内置的助手面板中以对话方式与模型交互，无需切换上下文，然后在内联生成过程中引用您的对话。

Language-aware​

“Language-aware”是指Zed在您输入时针对每个缓冲区都保持一个完整的语法树，以实现精确的代码高亮、自动缩进、可搜索的大纲视图和结构选择。Zed还使用语言服务器协议（Language Server Protocol）来提供自动完成、代码导航、诊断和重构功能。

协作（与您的团队保持连接）​

通过Zed，多个开发者可以在共享的工作空间中导航和编辑。这使得可以轻松地对代码库中的任何部分进行细致、实时的对话，无论所讨论的代码是去年提交的还是尚未保存到磁盘。

其他特性​

像游戏一样构建​

Zed的突破性性能始于我们的GPUI框架，这是一种构建2D用户界面的新方法。GPUI在GPU上对整个窗口进行光栅化处理，就像处理3D视频游戏一样。结果呢？每一帧都能毫无延迟、可靠且顺畅地传输像素。

其他特性可在官网查看 https://zed.dev/

总得来说，Zed就是快！，2024值得一试！

01 子类型化​

子类型化是多态性的一种形式，其中 子类型 通过某种形式的可替换性与 基本类型 相关联。 可替换性意味着基本类型的变量也可以接受子类型值。

例如，我们定义一个基类 User 和一个 Admin(扩展 User 类)的类：

class User {
  username: string;

  constructor(username: string) {
    this.username = username;
  }
}

class Admin extends User {
  isSuperAdmin: boolean;

  constructor(username: string, isSuperAdmin: boolean) {
    super(username);
    this.isSuperAdmin = isSuperAdmin;
  }
}

由于Admin扩展自 User(Admin extends User)，我们可以说Admin是基本类型User的子类型。

Admin（子类型）和User（基本类型）的可替换性在于可以将Admin类型的实例分配给User类型的变量，例如：

const user1: User = new User('user1');         // OK
const user2: User = new Admin('admin1', true); // also OK

如何从可替代性中受益？

最大的好处之一是可以定义不依赖于细节的行为。简而言之，您可以创建接受基类型作为参数的函数，然后可以使用子类型调用该函数。

例如，编写一个将用户名记录到控制台的函数：

function logUsername(user: User): void {
  console.log(user.username);
}

该函数接受的参数类型可以为User,Admin和任何其他基于User子类型。这使得logUsername()更具可重用性，并且不用关注细节。

logUsername(new User('user1'));         // logs "user1"
logUsername(new Admin('admin1', true)); // logs "admin1"

😆 工具函数​

现在让我们介绍一下这个符号 A <: B —— 意思是 “A是B的子类型”。

因为 Admin 是 User 的子类型，现在你可以简写成：

Admin <: User

我们定义一个辅助类型 IsSubtypeOf<S, P>，如果 S 是 P 的子类型，则评估为 true，否则为 false：

type IsSubtypeOf<S, P> = S extends P ? true : false;

IsSubtypeOf<Admin, User> 计算结果为true 因为Admin是User的子类型：

type T11 = IsSubtypeOf<Admin, User>; // true

很多类型都可以进行子类型化，包括基础类型和内置 JavaScript 类型。

例如字面量字符串'Hello'的类型是 string 的子类型，字面量数字 42 的类型是 number 的子类型，Map<K, V>是Object的子类型。

type T12 = IsSubtypeOf<'hello', string>; // true
type T13 = IsSubtypeOf<42, number>; // true
type T14 = IsSubtypeOf<Map<string, string>, Object>; // true

02 协变（Covariant）​

假设我们有一段异步代码用于获取 User 和 Admin 实例，需要处理 Promise<User> 和 Promise<Admin>。

一个有趣的问题是：如果 Admin <: User，那么 Promise<Admin> <: Promise<User> 是否也成立？这里做个实验：

type T21 = IsSubtypeOf<Promise<Admin>, Promise<User>> // true

当 Admin <: User 时，Promise<Admin> <: Promise<User> 也成立。这说明Promise是 协变(Covariant)类型。

😁 协变（Covariant）的定义：​

如果 S <: P 且 T<S> <: T<P> 那就可以说 T 是 协变类型

如果Admin是User的子类型，那么就可以预期 Promise<Admin> 是 Promise<User> 的子类型。

协变在TypeScript中适用于许多类型

• A) Promise<V>（如上所示）
• B) Record<K,V>:

type RecordOfAdmin = Record<string, Admin>;
type RecordOfUser  = Record<string, User>;

type T22 = IsSubtypeOf<RecordOfAdmin, RecordOfUser>; // true

• C) Map<K,V>:

type MapOfAdmin = Map<string, Admin>;
type MapOfUser  = Map<string, User>;

type T23 = IsSubtypeOf<MapOfAdmin, MapOfUser>; // true

03 逆变（Contravariant）​

分析以下泛型类型：

type Func<Param> = (param: Param) => void;

Func<Param>创建了一个函数类型，该类型带一个类型为Param的参数。

当Admin <: User时，以下哪个表达式为真：

• Func<Admin> <: Func<User> 或者
• Func<User> <: Func<Admin> ？

现在试一下：

type T31 = IsSubtypeOf<Func<Admin>, Func<User>> // false
type T32 = IsSubtypeOf<Func<User>, Func<Admin>> // true

Func<User> <: Func<Admin>成立 - 这意味着Func<User>是Func<Admin>的子类型。与原始类型关系 Admin <: User相比，子类型的方向已经发生 翻转。

Func 类型的这种行为使其具有 逆变性(Contravariant) 。一般来说，函数类型相对其参数类型是逆变的。

😎 逆变（Contravariant）的定义：​

如果 S <: P 且 T<P> <: T<S> 那就可以说 T 是逆变类型

函数类型的子类型化方向与参数类型的子类型化方向相反。

type FuncUser = (p: User) => void;
type FuncAdmin = (p: Admin) => void;

type T31 = IsSubtypeOf<Admin, User>; // true

type T32 = IsSubtypeOf<FuncUser, FuncAdmin>; // true

04 函数子类型化​

函数子类型化结合了协变和逆变。

如果一个函数的参数类型相对于其基本类型是逆变的(Contravariant)，并且返回类型相对于其基本类型的返回类型是协变的(Covariant)，那么该函数类型是其基本类型的子类型。

注：当启用 strictFunctionTypes 模式时。

换句话说，函数的子类型化要求参数类型是逆变的，而返回类型是协变的。

例如：

type SubtypeFunc = (p: User) => '1' | '2';
type BaseFunc = (p: Admin) => string;

type T41 = IsSubtypeOf<SubtypeFunc, BaseFunc> // true

SubtypeFunc <: BaseFunc 因为：

• A) 参数类型是逆变的（子类型化方向翻转 User :> Admin）
• B) 返回类型是协变的（相同的子类型方向 '1' | '2' <: string）。

了解子类型化非常有助于理解函数类型的可替换性。

例如，有一个Admin实例列表：

const admins: Admin[] = [
  new Admin('john.smith', false),
  new Admin('jane.doe', true),
  new Admin('joker', false)
];

接受什么类型的回调 admins.filter(...) 呢？显然，它接受带有一个 Admin 类型参数的回调：

const admins: Admin[] = [
  new Admin('john.smith', false),
  new Admin('jane.doe', true),
  new Admin('joker', false)
];

const superAdmins = admins.filter((admin: Admin): boolean => {
  return admin.isSuperAdmin;
});

console.log(superAdmins); // [ Admin('jane.doe', true) ]

但 admins.filter(...) 是否能接受 User 类型参数的回调呢？

const jokers = admins.filter((user: User): boolean => {
  return user.username.startsWith('joker');
});

console.log(jokers); // [ Admin('joker', false) ]

没错 admins.filter() 接受 (admin: Admin) => boolean 基本类型，同时也接受其子类型，例如 (user: User) => boolean。

如果高阶函数接受特定类型的回调，例如 (admin: Admin) => boolean，那么还可以提供作为特定类型的子类型的回调，例如 (user: User) => boolean。

05 结论​

假设有两个类型 S 与 P 两者关系 S <: P：

1、如果 T<S> <: T<P> (子类型方向被保持)，则类型 T 是**协变的。 如 Promise<T> 即是一个协变类型。

2、如果 T<P> <: T<S> (子类型关系被翻转)，则类型 T 是逆变的。

函数子类型化在参数类型上是逆变的，但在返回类型上是协变的。

在 JavaScript 中将 ArrayBuffer 转换为字符串，可以使用 TextDecoder API。TextDecoder 可从字节序列中解码文本内容，支持多种编码格式。

以下是将 ArrayBuffer 转换为字符串的示例代码：

// 假设 ArrayBuffer 对象为 buffer
const decoder = new TextDecoder('utf-8');
const text = decoder.decode(buffer);

在上面的代码中，我们创建了一个 TextDecoder 对象，使用 utf-8 编码对 ArrayBuffer 进行解码，并将解码后的文本存储在变量 text 中。

如果 ArrayBuffer 中存储的是 GB2312 编码的文本，可以将 utf-8 编码修改为 gb2312。

您还可以封装为函数，以便于使用：

function arrayBufferToString(buffer, encoding = 'utf-8') {
  const decoder = new TextDecoder(encoding);
  return decoder.decode(buffer);
}

这个函数接收两个参数，第一个参数表示要转换的 ArrayBuffer 对象，第二个参数为编码格式（默认为'utf-8'）。 返回转换后的字符串。调用该函数的方式如下所示：

const buffer = new ArrayBuffer(2);
const intArray = new Uint8Array(buffer);
intArray[0] = 72;
intArray[1] = 105;

const str = arrayBufferToString(buffer);
console.log(str); // Output: Hi

01 实际问题 - 网页乱码​

nodejs 使用 axios 写爬虫时 Response 乱码，经查查发现网页编码是 gb2312的。则我们可以通过返回 arraybuffer 的方式，再重新编码即可。

const { data } = await axios.get('http://xxx.y.z', { responseType: 'arraybuffer'});

const normalStrig = arrayBufferToString(Buffer.from(data), 'gb2312'); // 返回正确的字符串

02 技术细节 - ArrayBuffer、Int32Array等​

ArrayBuffer 是一种用于在 JavaScript 中存储二进制数据的对象，可以看做是一个固定大小的字节缓冲区。可以使用 ArrayBuffer 来存储任意类型的二进制数据，包括数字、图像、音频等等。

Int32Array 是一种类型化数组（TypedArray），它只能存储 32 位整数类型的数据。具体来说，Int32Array 可以存储范围在 -2147483648 ~ 2147483647 之间的整数数据，也就是 JavaScript 中的 32 位有符号整数类型。

Int32Array 中每一项都占用 4 个字节，使用 Int32Array 对象可以快速地读取和写入 ArrayBuffer 中的 32 位整数数据，适合处理大量数据的场景。

除了 Int32Array，还有一些其他的类型化数组也可以用于存储不同类型的数据，包括：

• Int8Array：1 个字节的有符号整数类型，范围在 -128 ~ 127 之间；
• Uint8Array：1 个字节的无符号整数类型，范围在 0 ~ 255 之间；
• Uint16Array：2 个字节的无符号整数类型，范围在 0 ~ 65535 之间；
• Int16Array：2 个字节的有符号整数类型，范围在 -32768 ~ 32767 之间；
• Uint32Array：4 个字节的无符号整数类型，范围在 0 ~ 4294967295 之间；
• Float32Array：4 个字节的单精度浮点数类型；
• Float64Array：8 个字节的双精度浮点数类型。

以上这些类型化数组都只能存储指定类型的数据，并且每一项占用的字节数都是固定的。使用类型化数组可以轻松地读取和写入 ArrayBuffer 中指定类型的数据，提高数据读写的效率。

03 技术举例​

Uint8Array 和 Uint32Array 都是类型化数组（TypedArray），但它们的应用场景和使用方式有所不同。

Uint8Array 适用于存储任意的 8 位无符号整数类型的数据，每一项占用一个字节。可以通过数组下标的方式直接访问和修改其中的数据。

以下是 Uint8Array 的一个例子，使用它来将一个字符串编码成 UTF-8 的字节数组：

function encodeUTF8(str) {
  const codePoints = Array.from(str, c => c.codePointAt(0));
  const buffer = new ArrayBuffer(codePoints.length * 4);
  const uint8Array = new Uint8Array(buffer);
  let offset = 0;
  for (let i = 0; i < codePoints.length; i++) {
    const codePoint = codePoints[i];
    if (codePoint < 0x80) {
      uint8Array[offset++] = codePoint;
    } else if (codePoint < 0x800) {
      uint8Array[offset++] = 0xC0 | (codePoint >> 6);
      uint8Array[offset++] = 0x80 | (codePoint & 0x3F);
    } else if (codePoint < 0x10000) {
      uint8Array[offset++] = 0xE0 | (codePoint >> 12);
      uint8Array[offset++] = 0x80 | ((codePoint >> 6) & 0x3F);
      uint8Array[offset++] = 0x80 | (codePoint & 0x3F);
    } else {
      uint8Array[offset++] = 0xF0 | (codePoint >> 18);
      uint8Array[offset++] = 0x80 | ((codePoint >> 12) & 0x3F);
      uint8Array[offset++] = 0x80 | ((codePoint >> 6) & 0x3F);
      uint8Array[offset++] = 0x80 | (codePoint & 0x3F);
    }
  }
  return uint8Array.subarray(0, offset);
}

const str = "Hello, 世界!";
const byteArr = encodeUTF8(str);
console.log(byteArr);

在上面的代码中，我们通过 new Uint8Array(buffer) 创建了一个长度为 codePoints.length * 4 的 Uint8Array 对象 uint8Array，即总共分配了足够存储 UTF-8 字节数组的缓存空间。然后通过对字符的 Unicode 编码进行判断，将每个字符转换为对应的 UTF-8 字节序列，并存储到 uint8Array 中。最后通过 uint8Array.subarray(0, offset) 返回仅包含有效数据的 Uint8Array 视图对象。

Uint32Array 适用于存储任意的 32 位无符号整数类型的数据，每一项占用 4 个字节。可以通过数组下标的方式直接访问和修改其中的数据。

好的，以下是一个使用 Uint32Array 在 JavaScript 中实现求素数的例子：

// 埃拉托斯特尼(Eratosthenes)筛法
function sieveOfEratosthenes(n) {
  const primes = new Uint32Array(n + 1).fill(1);
  primes[0] = 0;
  primes[1] = 0;
  for (let i = 2; i <= Math.sqrt(n); i++) {
    if (primes[i]) {
      for (let j = i * i; j <= n; j += i) {
        primes[j] = 0;
      }
    }
  }
  return primes;
}

const n = 100;
const primes = sieveOfEratosthenes(n);

for (let i = 0; i < primes.length; i++) {
  if (primes[i]) {
    console.log(i);
  }
}

上面的代码演示了如何使用 Uint32Array 在 JavaScript 中实现求小于等于 n 的所有素数的过程。我们创建一个长度为 n+1 的 Uint32Array 缓冲区 primes，它的每个元素都初始化为 1，表示初始时假设所有数都是素数。

然后从 2 开始，我们遍历到 n 的平方根，如果某个数 i 是素数，就将大于 i 的 i 的倍数都标记为非素数（将 primes[j] 置为 0），最终就能够得到所有小于等于 n 的素数。

使用 Uint32Array 能够支持处理更大的整数，也能够减少内存空间的使用，提高代码执行效率。这个例子说明了 Uint32Array 可以应用于数论问题中，并且通过使用 JavaScript 的更高级语言功能可以加速计算。

层叠样式表（英语：Cascading Style Sheets，缩写：CSS）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。它能将网页的表现和结构分离，使得网页开发更加灵活、易于维护和修改。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。

一、CSS规范的前世今生​

CSS最初由W3C于1996年提出，并于1998年发布了CSS2。随着Web的发展，CSS规范得到了不断的更新和扩展。CSS3的提出主要是为了解决CSS2中的一些问题，并引入新的功能和特性。CSS3标准分为多个模块，每个模块定义了一些新的功能和特性。

二、CSS3的新特性​

2.1 选择器​

在CSS3中，新增了一些强大的选择器，可以更精确地选择HTML元素，使得样式表的编写更加简单和灵活

2.2 布局和定位​

CSS3新增了一些布局和定位的特性，如弹性布局（flexbox）、网格布局（grid）、多列布局（multicolumn）等，这些特性可以更好地控制页面布局和元素定位。

弹性布局（flexbox） 是一种强大的布局模型，可以使元素在容器中按照自适应、灵活的方式排列，适应不同的屏幕尺寸和设备方向。

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

网格布局（grid） 是一种二维网格布局模型，可以将页面分成行和列，并将元素放置在网格单元格中，实现复杂的布局效果。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto;
  grid-gap: 10px;
}

多列布局 CSS3允许我们通过column-count属性，将HTML元素分为多列布局，从而实现更加美观、自然的版面效果。

column-count: 3;

2.3 动画和过渡​

CSS3还引入了一些动画和过渡的特性，如动画（@keyframes）、过渡（transition）等，可以实现更加复杂、流畅的页面效果。

**动画（@keyframes）**是一种定义动画的方法，可以定义动画的起点、终点和中间状态，并可以对动画进行控制和设置。

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spinner {
  animation: spin 1s linear infinite;
}

@keyframes blink {
  from {
    opacity: 1.0;
  }
  to {
    opacity: 0.0;
  }
}

.cursor {
  animation: blink 1s infinite;
}

animation属性说明

animation-name：动画名称 animation-duration：动画持续时间 animation-timing-function：动画时间函数 animation-delay：动画延迟时间 animation-iteration-count：动画执行次数，可以设置为一个整数，也可以设置为infinite，意思是无限循环 animation-direction：动画执行方向 animation-paly-state：动画播放状态 animation-fill-mode：动画填充模式

**过渡（transition）**是一种定义元素过渡效果的方法，可以实现元素属性的平滑过渡和变化。

.button {
  transition: all 0.2s ease-in-out;
}
.button:hover {
  background-color: red;
  color: white;
}

2.4 媒体查询​

**媒体查询（Media Queries）**可以根据设备的特性、屏幕大小、分辨率等信息，为网页应用不同的CSS样式。这使得我们可以通过一份HTML代码，为不同的设备提供不同的界面效果。

@media screen and (max-width: 600px) {
  /* 600px及以下屏幕大小下的CSS样式 */
}

2.5 2D/3D转换​

CSS3允许我们通过 transform 属性，对HTML元素进行旋转、缩放、平移等变换操作，从而实现更加生动、立体的界面效果。 transform-origin 转换元素的位置（围绕那个点进行转换），默认的转换原点是center

transform: rotate(30deg);
transform: translate(120px, 50%); // 位移
transform: scale(2, 0.5); // 缩放
transform: rotate(0.5turn); // 旋转
transform: skew(30deg, 20deg); // 倾斜

2.6 样式​

1) 边框圆角 CSS3允许我们通过border-radius属性，为HTML元素的边框设置圆角效果。

border-radius: 5px;

border-radius：创建圆角边框 box-shadow：为元素添加阴影 border-image：使用图片来绘制边框

2) 阴影效果 CSS3允许我们通过box-shadow属性，为HTML元素添加阴影效果，从而实现更加立体、生动的界面效果。

box-shadow: 3px 3px 3px #888;

3) 背景 新增了几个关于背景的属性，分别是 background-clip、background-origin、background-size 和 background-break

4) 渐变效果 CSS3允许我们通过linear-gradient或radial-gradient函数，为HTML元素设置渐变效果，从而实现更加丰富、柔和的界面效果。

background: linear-gradient(to bottom, #FFFFFF, #000000);

5) 文字、颜色等 文字 word-wrap word-wrap: normal|break-word

text-overflow 设置或检索当当前行超过指定容器的边界时如何显示，属性有两个值选择：

• clip：修剪文本 | ellipsis：显示省略符号来代表被修剪的文本

text-shadow text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色

text-decoration CSS3里面开始支持对文字的更深层次的渲染，具体有三个属性可供设置：

• text-fill-color: 设置文字内部填充颜色
• text-stroke-color: 设置文字边界填充颜色
• text-stroke-width: 设置文字边界宽度

颜色 css3新增了新的颜色表示方式rgba与hsla rgba 分为两部分，rgb为颜色值，a为透明度 hala 分为四部分，h为色相，s为饱和度，l为亮度，a为透明度

最后​

以上就是CSS3的一些新特性，这些新特性可以使我们更加轻松、高效地实现各种丰富、生动、美观的界面效果。

《前端技术全方位深度进阶指南》系列教程

超文本标记语言（英语：HyperTextMarkupLanguage，简称：HTML）是一种用于创建网页的标准标记语言。HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现，使之成为一种标记语言而非编程语言。

一、HTML规范的前世今生​

HTML标准 最初是由CERN（欧洲核子研究组织）的Tim Berners-Lee提出的。最初的HTML规范相对简单，只有少量标记可以用来定义文本的结构和格式。 随着Web的普及和互联网的发展，HTML规范逐渐得到了扩展和更新，新版本的规范不仅增加了更多的标记和属性，还引入了新的功能和特性，如表单控件、多媒体支持、动态效果等等。这些特性的引入和改进，推动了互联网的进一步发展和创新。

HTML5是HTML最新的修订版本：

• 2008年1月 HTML5 由W3C作为工作草案发布
• 2014年10月28日，HTML5作为稳定W3C推荐标准发布 ，这意味着HTML5的标准化已经完成

二、HTML5的新特性​

HTML5是Web标准的最新版本，它引入了许多新的特性和改进，旨在为Web开发者提供更强大的工具和更好的用户体验。 下面是HTML5的一些新特性：

2.1 语义化标签与属性​

新的语义化标签：HTML5引入了许多新的标签，如<header>、<footer>、<nav>、<article>、<section>等，这些标签有助于开发者更好地描述页面内容，提高页面的可读性和可维护性。

<header>
  <h1>这是页面的头部</h1>
</header>
<nav>
  <ul>
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
  </ul>
</nav>
<section>
  <h2>这是一个章节</h2>
  <p>这是章节的内容</p>
</section>
<footer>
  <p>这是页面的底部</p>
</footer>

2.2 表单控件增强​

表单控件增强：HTML5新增了一些表单控件，如 <input type="date">、<input type="color">、<input type="range"> 等，同时也提供了一些新的属性，如placeholder、required、pattern等，这些都有助于提升用户交互体验。

<!-- 新的表单控件 -->
<label>日期：</label>
<input type="date" name="date">

<label>颜色：</label>
<input type="color" name="color">

<label>滑动条：</label>
<input type="range" name="range">

2.3 媒体支持​

媒体支持：HTML5支持多媒体的播放和操作，包括音频、视频等，同时还提供了一些新的API，如<video>、<audio>等，这些API提供了丰富的操作接口，可以实现各种复杂的媒体应用。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

<video> 元素支持三种视频格式: MP4, WebM, 和 Ogg。 <audio> 元素支持三种音频格式: MP3, Wav, 和 Ogg。

2.4 Web Storage​

Web Storage：HTML5引入了Web Storage API，包括 localStorage 和 sessionStorage 两种存储方式，这些存储方式可以用来存储客户端数据，避免了传统的cookie机制的一些缺陷。

• localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
• sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

2.5 Web Workers​

Web Workers API 是 HTML5 的一个新特性，它可以在后台线程中运行 JavaScript 脚本，而不影响页面的主线程，从而提高了前端的性能和用户体验。在此基础上，我们可以实现一些比较复杂的功能，比如图像处理、音视频处理等。 以下是一个基于 Web Workers 的示例，用于计算斐波那契数列：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Web Workers Demo</title>
    <script>
      // 创建一个 worker 线程
      const worker = new Worker('worker.js');

      // 监听 worker 线程的消息
      worker.onmessage = (event) => {
        const result = event.data;
        console.log(`计算结果是：${result}`);
      };

      // 向 worker 线程发送消息
      const n = 20;
      console.log(`开始计算斐波那契数列的第 ${n} 项`);
      worker.postMessage(n);
    </script>
  </head>
  <body>
    <h1>Web Workers Demo</h1>
    <p>打开浏览器控制台查看计算结果</p>
  </body>
</html>

上面的代码中，我们首先创建了一个 worker 线程，并指定它的脚本文件为 worker.js。然后通过监听 worker.onmessage 事件，获取 worker 线程发送的计算结果。最后通过调用 worker.postMessage 方法向 worker 线程发送消息，以触发斐波那契数列的计算。

// 接收主线程发送的消息，并进行计算
onmessage = (event) => {
  const n = event.data;
  const result = fibonacci(n);
  postMessage(result);
};

// 计算斐波那契数列的第 n 项
function fibonacci(n) {
  if (n <= 1) {
    return n;
  } else {
    return fibonacci(n - 1) + fibonacci(n - 2);
  }
}

worker.js 文件中，我们首先通过监听 onmessage 事件接收主线程发送的消息，然后进行斐波那契数列的计算，最后通过调用 postMessage 方法将计算结果发送回主线程。

2.6 Canvas和SVG​

Canvas和SVG：HTML5引入了<canvas>和<svg>两种绘图标记，使得Web开发者可以在网页上绘制图形和动画。 使用 arc() 方法 绘制一个圆:

<canvas id="myCanvas" width="200" height="100"></canvas>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

2.7 WebSocket​

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。它使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。 在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。使得Web应用可以进行实时通信，如在线聊天等。

2.8 Geolocation（地理位置）​

HTML5 Geolocation API 用于获得用户的地理位置。

window.navigator.geolocation {
    getCurrentPosition:  fn   用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn   清除定位监视
}　
navigator.geolocation.getCurrentPosition(
    function(pos){
　　　　console.log('用户定位数据获取成功')
　　　　//console.log(arguments);
　　　　console.log('定位时间：',pos.timestamp)
　　　　console.log('经度：',pos.coords.longitude)
　　　　console.log('纬度：',pos.coords.latitude)
　　　　console.log('海拔：',pos.coords.altitude)
　　　　console.log('速度：',pos.coords.speed)
})

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

2.9 Drag & Drop（拖放）​

拖放（Drag 和 drop）是 HTML5 标准的组成部分。拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。 为了使元素可拖动，把 draggable 属性设置为 true

<img draggable="true">

function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
}

function onDragover(ev) {
    ev.preventDefault()
}
function drop(ev) {
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开） 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

三、总结​

HTML5的新特性使得前端开发变得更加灵活和便捷，应用场景非常广泛。其中，语义化标签可以使得页面更加清晰易懂，提高可读性和可维护性；表单控件增强和媒体支持可以提升用户交互体验，让用户获得更好的使用体验；Web Storage可以用来存储客户端数据，解决传统cookie机制的一些缺陷；Web Workers可以提升JavaScript脚本的执行效率，提高网站性能等。

《前端技术全方位深度进阶指南》系列教程

0 引子​

作为前端开发人员，我们时刻都需要学习新知识，不断提升自己的技能水平。但是，在这个日新月异的行业中，要跟上最新的技术和最佳实践变得越来越困难。

因此，我们需要一份全面而深入的指南，来帮助我们更好地了解前端技术的全貌，并指导我们如何逐个深入学习各个领域的知识点。

本系列 《前端技术全方位深度进阶指南》 便是这样一份指南。

它将从基础的 HTML/CSS/JavaScript，到前端流程规范、工程化实践、性能优化和调试技术、跨端开发等方面进行深入讲解 （不保证顺序）。同时，还将涉及到常用的前端框架、设计模式、数据结构与算法等方面的知识点，为读者打造一个全面、系统的前端技能树。

无论你是前端初学者，还是有多年经验的专业人士，本系列都能够满足你的需求。希望通过本《指南》，你能够掌握更多实用的前端知识，成为一名更加出色的前端开发人员。

在接下来的章节中，我们将逐个深入讲解各个领域的知识点，并提供实践案例和建议。无论你的目标是成为一名全栈开发人员、跨端开发专家、还是前端架构师，本 《指南》 都将为你提供宝贵的参考和指导。

1 大纲​

大纲持续迭代中

1.1 前端基础 HTML/CSS/JavaScript​

• HTML 基础知识 基础 | 01 HTML5的新特性与案例演示
• CSS 基础知识 基础 | 02 CSS3的新特性一览
• JavaScript 基础知识
  • 技巧 | 03 JavaScript 中将 ArrayBuffer 转换为字符串
• 浏览器基础知识
• DOM 操作
• BOM 操作
• 事件机制
• Ajax 与数据交互

1.2 前端框架​

• React
• Vue
• Angular、Svelte...

1.3前端设计模式​

• MVC 设计模式
• MVP 设计模式
• MVVM 设计模式
• 单例模式
• 工厂模式
• 观察者模式
• 发布订阅模式

1.4 前端流程规范​

• 代码规范
• Git 工作流
• 项目开发流程
• 团队协作规范

1.5前端工程化实践​

• Webpack 配置
• 模块化开发
• 代码分离与懒加载
• 前端自动化测试
• 代码打包与压缩

1.6 前端性能优化和调试技术​

• 网络优化
• 页面性能优化
• JS 性能优化
• 前端调试技巧
• 性能监控与分析

1.7 前端安全​

• XSS 攻击与防御
• CSRF 攻击与防御
• SQL 注入攻击与防御
• 点击劫持攻击与防御

1.8 数据结构和算法​

• 数组和链表
• 栈和队列
• 哈希表
• 二叉树
• 图论
• 排序和查找算法
• 动态规划和贪心算法

1.9 跨端开发​

• React Native
• 小程序开发
• Electron 应用开发

1.10 前端进阶指南​

• 前端高级技术深度学习
• 如何深入理解 Web 标准
• 前端未来技术趋势探索
• 如何构建高质量的前端应用

2 关于作者​

OwenYang也叫木易某某，一名互联网从业者，对前端架构的演进和生态发展有着浓厚的兴趣。

他致力于实践优秀的代码架构，喜欢探索前端技术的深度和广度，以期在这个日新月异的领域中不断进步和创新。

木易跟打器也叫 mac跟打器 或 qq跟打器，是由木易打造的当前macOS平台唯一的、可直接载文的跟打器。可通过macQQ直接群载文，计算跟打指标最终发送成绩至QQ群里，具有发文复合指标、历史数据可视化、轻便、准确、快捷等特点。

如未下载mac客户端也可直接通过网页访问进行本地练习，支持击键、键准等复合指标；根据字频提供前3500的单字练习文本，也可直接自定义练习文本，让打字练习如虎添翼。

该工具是在笔者学习虎码(性能最优的形码)的过程中，开发并完善的。并为其提供了虎码学习者的专用练习文本

二、下载访问地址​

2.1 网页练习​

木易跟打器 - 发文 https://typer.owenyang.top/kata

2.2 客户端下载​

1、木易跟打器 - 程序下载 https://typer.owenyang.top/download 2、也可直接在百度云下载木易跟打器0.3.0（提取码8888）： https://pan.baidu.com/s/1aDbfbFx4mrM2B-ErvR-tnQ?pwd=8888

2.3 功能对比​

三、功能概览​

3.1 赛文跟打-主界面​

3.2 发文​

可自定义复合指标：击键、键准，通过复合指标后方可进入下一段，否则可乱序、重打、无操作。

可自定义练习文本：单字前3500字频排序，虎码练习文本，自定义文本等。

3.3 跟打历史​

历史记录全开放，数据可视化，让你体味成长的乐趣。

3.4 词提开启​

3.5 主题切换​

四、更多功能​

更多功能，等你体验发现！ **说明：**由于域名https://typer.owenyang.top还在备案中，访问当前域名可能会较慢，必要情况可使用科学上网。

木易跟打器也叫 mac跟打器 或 qq跟打器，是由木易打造的当前macOS平台唯一的、可直接载文的跟打器。可通过macQQ直接群载文，计算跟打指标最终发送成绩至QQ群里，具有发文复合指标、历史数据可视化、轻便、准确、快捷等特点。

如未下载mac客户端也可直接通过网页访问进行本地练习，支持击键、键准等复合指标；根据字频提供前3500的单字练习文本，也可直接自定义练习文本，让打字练习如虎添翼。

该工具是在笔者学习虎码(性能最优的形码)的过程中，开发并完善的。并为其提供了虎码学习者的专用练习文本

下载地址：https://typer.owenyang.top/download 版本记录：https://typer.owenyang.top/changelog

本人是个五笔爱好者，也一直在使用五笔，曾经(差不多10年前了)也做过Windows平台的跟打器易跟打Windows版。

从 Windows 转到 Mac 之后，苦于macOS没有可用的跟打器，偶然看到了QT基于他们的代码做一个macOS上可直接载文用的跟打器，外理了一些macOS系统的兼容，于是便有了这个项目。

一、快速上手​

因为需要载文，在系统偏好设置-安全性与隐私-辅助功能中，允许木易跟打器控制电脑

同时由于QQ macOS版本的限制，无法全文获取，可通过以下方式载文

• 鼠标移至聊天窗口对应消息位置
• 按F4载入文本
• 开始打字

二、主要功能​

• QQ群直接载文
• 赛文跟打
• 词语提示
• 成绩发送

三、Contributing​

• 有问题，提个Issue
• 有想法，提个Issue
• 或通过QQ群联系我：木易跟打器 787343469
• 有能力，提个PR

四、声明​

1. 本程序系私人用途，非商业产品，即不提供相应的服务
2. 本程序所有数据均保存在用户浏览器的IndexedDB中，不会上传到任何服务器
3. 如果有侵权行为，请联系：songallica@gmail.com，会在看到后第一时间取消
4. 用户使用本程序所引发的一切问题，由用户自己承担，本程序概不负责
5. 使用本程序则旨在接受本条及以上条款

五、操作说明​

5.1 快捷键​

• F4：激活QQ聊天窗口，从当前鼠标位置载文（确保鼠标在需要载文的消息上面）
• Ctrl + v：从剪切板载文（Mac下为Cmd + v，与粘贴快捷键一致）
• F3：重打
• Esc：暂停
• Enter: 继续

5.2 载文​

由于QQ macOS版本的限制，无法全文获取。可将鼠标移至聊天窗口对应消息位置，按F4载入文本。

1. 『赛文文字』从QQ群使用指令获取赛文，然后鼠标移至赛文外，按F4即可
2. 『自由文本』将要打的文本复制到剪切板，然后到主页粘贴即可

5.3 打文​

载文后，下方的输入框自动获取焦点，当按下任意键时，开始计时。

打文过程中可以使用Esc暂停。暂停后，使用Enter继续，按下Enter后，输入框自动获取焦点，并立即继续计时。

如果打的过程中，或完成后，对结果不满意，可以按F3重新开始。计时会清零，并等待第一个键按下后，再次开始计时。

如果赛文较长，而对照文本区域无法完全显示，那么在打文过程中，对照文本会自动根据输入进度移动滚动条，方便跟打。

如果在打文时输入错误的字词，会以指定颜色的背景（默认是红色）显示。

跟打时，必须将赛文全部输入正确才会停止计时，如果发现打完最后一个字时，并没有提示完成，计时还在继续，则需要到对照文本中查找被标成错误背景的字词并加以修正，直至全部正确。

词语提示​

程序提供词语提示功能，方便前期掌握词库中的词语。

在词语提示功能打开时，程序会将赛文中的词语去词库中匹配，并计算出码长最短的一个组合，这个码长就是理论码长。

开始输入后，如果没按词语提示的内容输入，那么提示的内容会同时进行调整，提示从当前位置开始的码长最短的组合。

基础的词语提示以间隔加粗的方式展示，如：“这个码长短”。在此基础上，还提供：

• 码长提示：用不同的颜色（不是背景颜色）来区分1，2，3，4码的字词。
• 选重提示：在需要选重的字词下方增加下划线，并在下划线下方显示选重键。如果某个字词不需要选重，则下方什么都不显示。
• 编码提示：在字词下方显示该字词的编码（不含选重键）。除了该方式外，界面右上角也有编码及选重键的提示。
• 标点顶屏：在可以使用标点顶屏的字词下显示顶屏提示（默认是“顶”字），如果某个首选字词后是标点，则可以利用标点直接将首选上屏，这样可以减少1码。

词语提示需要上传码表后才可以使用，具体见设置中的相关内容

5.4 发送成绩​

跟打结束后，成绩会自动发送至QQ群当前激活的窗口并发送，并复制到系统剪切板

如不想自动发送成绩，可在左侧开启 潜水 模式

5.5 查看理想编码​

程序能根据词库中的词条计算出理想码长，也可以计算出该码长对应的编码。点击左侧面板中的理想二字，即可查看理想编码对应的编码。

5.6 查看录入的编码​

程序会记录打文过程中按下的每一个按键，点击左侧面板中的码长二字，即可查看打文过程中按下的所有按键。

六、设置​

设置中的变更，除了上传码表文件会自动保存外，其余的变动均需手动点击下方的”保存按钮进行保存

• 保存: 将变更写入数据库
• 重置：恢复设置到数据库中的状态
• 恢复默认: 将所有设置恢复到默认状态

6.1 基础设置​

• 自动重新开始：当删除输入的所有文字后自动重新开始
• 结束条件: 赛文结束的条件，默认为赛文中所有的字及标点都正确时结束。打完则比较赛文和输入的长度，一致就认为结束。但在结束时如果输入的内容中有错字，则每错一个字罚5个字，会导致速度降低

6.2 词提设置​

• 词语提示: 总开关，关闭时不会进行词语提示，默认关闭

• 码表文件: 输入法使用的码表文件，文件使用多多格式，UTF-8编码，如：

  五  pf
  五笔    pfr
  笔  rkq
  

• 提示选项：选择提示内容，词语是必选的。

• 候选词条数: 输入法每页候选词条数，对于需要翻页的字词，会的选重提示上增加翻页键。默认：9

• 最大候选词位置：为避免某些生僻词位置过去靠后，可以通过设置该值，将位置过于靠后的词略掉，拆成位置更靠前一些的短词或单字。该设置可能会影响码长。默认：0

• 翻页键：指定的词条位置比较靠后，需要翻页才能选择时，会在选重码提示上增加该符号。只需要指定提示的符号，方便自己识别，即使输入法设置了多组翻页键。默认：+

• 选重键：提示时展示的选重键。每个字符表示一个选重键，字符数不得少于候选词条数。默认：␣23456789

• 选重键文本：选重键对应的文本，当这些字符出现在字词后面时，必须手动选择词条。默认： 234567890;+'＋；’

• 标点顶屏提示: 顶屏提示符号

• 四码唯一自动上屏：如题

• 第五码首选上屏：如题

6.3 成绩设置​

• 标识：赛文标识，如第999段
• 速度：每分钟输入的字数，数值越大说明打字的速度越快
• 击键：每秒钟敲击按键的次数
• 码长：平均每个字（含标点符号）所需要的按键次数
• 理想码长：程序计算出的最短码长
• 字数：文章总字数
• 错字：结束时输入的错字数
• 用时：总时间，单位秒
• 暂停：打文时暂停的次数和总暂停时长
• 键准：按键准确率，退格数及回改数作为失误按键来源，算法：(总按键数 - 退格数 - 回改数 * 平均码长) / 总按键数
• 键法：左手与右手按键数的均衡性，算法：(1 - abs(左 - 右) / (左 + 右)) * 100
• 左：左手按键次数
• 右：右手按键次数
• 打词：有多少字是通过词组的方式输入的
• 打词率：打词数占总字数的比率
• 选重：要输入的字词不在首选位置的次数
• 回改：输入错误被删除的字数
• 键数：总按键次数
• 退格：退格键被按次数
• 回车：回车键被按次数
• 重打：重新打的次数
• 版本：版本信息
• 输入法：所使用的输入法名称
• 个性签名：想立的Flag

6.4 标点设置​

标点用于：

• 顶屏计算：仅用于顶屏计算，不将标点加入码表
• 码表及顶屏计算：将标点加入码表，防止码表中的标点码长过长

如果需要将标点加入码表，则需要重新导入词库文件

6.5 载文设置​

• 去除空格: 移除文章中的所有空白字符，包括：空格、回车、换行、制表符等

这是一个系列，谈论所有有关编写可维护性CSS。 翻译自：MaintainableCSS 完整版：maintainablecss-cn/chapters/semantics/

译者： Owen Yang Bang Wu

概述: 基于这 是 什么命名，而不是基于它 像 什么或 能做 什么命名。

长版本解释​

语义化(semantic)的 HTML 不仅仅关乎我们所使用的元素——你当然知道一个链接应该使用 <a> 标签，表格数据应该使用 <table> 标签，段落使用 <p> 等等。

更重要的是，它和我们所添加的类名(class names)和IDs有关。而类名和IDs为 CSS 和 JavaScript提供额外的机制，让我们更容易去操作和增强 HTML 元素。

很容易出现不经过思考而随意添加类名的场景，但现实中命名却又特别重要。

“在计算机科学领域，有两大难题，如何让缓存失效(cache invalidation)和如何给各种东西命名。”

这是由于人只是擅长和人沟通，却不太能理解简短的，不具有语义化的抽象概念。

类名好坏对比​

试着找出非语义化和语义化类名的区别...

  <!-- 不好 -->
  <div class="red pull-left">
  <div class="grid row">
  <div class="col-xs-4">

这里完全看不出这段 HTML 代码要表达 什么。你 可能 会说它 看起来 怎样（比如应该在小屏幕还是大屏幕上），但也就仅此而已。

  <!-- 好 -->
  <div class="header">
  <div class="basket">
  <div class="product">
  <div class="searchResults">

这段代码就正是我所推崇的。我很清楚地知道这段 HTML 代表着什么。虽然我不知道它看起来应该是怎样的，但我并不在乎，这是 CSS 存在的价值。而语义化的类名对 HTML 和 CSS 甚至 JS 都很有意义。

所以，为什么 我们应该使用语义化的类名呢？

因为更容易理解​

若使用语义化类名，不论你是在修改 HTML 或者 CSS，你都清楚你将造成的影响。而使用视觉化类名(visual class names)的方式，你不得不在每一个元素上写很多类名，最终你可能只是对这些类名有一个模糊的理解，而不清楚它真正的意图是什么。而且，视觉化类名非常难以维护。

因为要构建响应式站点​

一般说来，不同的视图(viewport)会有不同的样式。比如，你可能需要在大屏上浮动(float)一个元素，在小屏不浮动。如果你有一个叫 .clearfix 的类名来清理浮动，但在小屏上的效果却和类名不一样，这看起来会不会让人困惑呢？

使用语义化的类名，你就会基于 mediea queries 去编写样式，这会让 CSS 更易维护。

因为更容易查找​

如果一个元素是基于其外在表像命名，比如 .red, .clearfix, 和 .pull-left 等，那么这些类名就会像垃圾一样散落在代码库的任何地方——当你搜索一段特定的 HTML 代码的时候，类名不会起任何作用。

换句话说，如果你的类名足够语义化，搜索特定代码片段是很简单的事。更常见的是，当你从头搜索你的 HTML(想像一下浏览器上的审查元素)去找类名的时候，查找唯一的 CSS 选择器肯定会快很多。

因为不想做无故的回归测试​

如果你使用描述性的，非语义化的类名，那么当你修改其中一个类名的时候，样式的改变会影响每一个使用这个类名的元素。基于你使用 CSS 的经验，你能保证你的修改不会在其他地方产生不可预知的问题吗？

语义化的类名是唯一的，所以当你编辑其中一个的时候，你 能 自信地说，你的修改只会影响你想要改变的那个模块，维护起来更简单。

因为不用再恐惧更新代码​

和前一个有关回归测试的那一点有关，当你对修改的代码不够自信的时候，你很有可能会造成 BUG 接着便会由于害怕出错而不再碰那些代码。更可怕的是会造成恶性循环，写很多冗余代码，最后变得越来越不具有可维护性。

因为有助于自动化测试​

自动化功能测试需要定位特定的元素，与其进化交互（输入文本，点击按钮、链接等等），基于这些操作进行相关校验。

若你的 HTML 通篇都使用描述性的类名，那么你将不会有一个可靠方式去定位一个特定的元素，更惶论与其交互了。

因为为JavaScript提供了有意义的接口​

就像和自动化测试一样，语义化的类名对JavaScript来说同样有意义。描述性的类名不具有可靠性，不可用于定位相应的模块或组件。

因为常规维护的担心​

若你是基于该元素是什么而命名，你就不必再次修改 HTML 的类名。如，heading 始终是 heading, 你不用管它变成什么样子。

样式可能会改变，但你只需要改变你的 CSS。这在另一个方面来说，实际是上松耦合从而提高了可维护性。

因为非语义类名调试困难​

当你调试(debug)一个元素的时候，会出现很多类似的 CSS 选择器，增加了调试的难度。

因为标准推荐使用​

HTML5 的规范在 3.2.5.7 里有说，使用类名属性。

"[...] 更鼓励使用能描述内容本质的类名，而不是那些只是描述其外在表像的值。"

因为能带来性能的提升​

这是一个 非常 小的优势，因为当你一个元素只有一个类名的时候，你的整个 HTML 代码体积都会更小。而使用描述性的类名，每个元素有无数个类名，结果自然与前者不一样。

因为和重用规则有关​

如果你没有使用语义化类名，你有可能会是误解了重用(reuse)的概念，而误用重用。阅读下章，获得更多。

最后想想语义化​

语义化的类名是 MaintainableCSS 的基石，没有它，一切都没意义。所以，基于是什么命名，其他所有都将受益。

这是一个系列，谈论所有有关编写可维护性CSS。 翻译自：MaintainableCSS 完整版：maintainablecss-cn/chapters/introduction/

译者： Owen Yang Bang Wu

MaintainableCSS 是一种编写模块化、可扩展和易维护的CSS的架构。

在实际情况下，这意味着，作为一个开发者，当我想创建一个新的功能或者修改已有的功能的时候，我不需要担心会使原来的代码变的更糟。

什么都不需要下载​

MaintainableCSS 是不需要下载的。这只是一套帮助你构建大规模或者小规模网站的原则、指南和约定。

可维护的意义是什么？​

有一份可维护的代码意味着当你编辑一个模块的样式的时候不需要担心意外的改变的其他模块的代码。我清楚的知道我写出的代码是经过封装的。

可维护的意义是什么？​

这意味着, 当CSS代码库的大小增长的时候, 维护这些代码不会有任何困难. 如果你曾经继承了一个大的CSS代码库并且害怕去编辑这些已有的样式,你就会深有感触了。

模块化的意义是什么？​

模块是一个特殊的、独立的单元，可以与其他的模块进行组合，以便形成更加复杂的单元。例如在一个客厅，你可以把电视、沙发和墙分别看成模块，这些组合在一起就是一个可以使用的房间。

如果你带走其中一个单元，其他的任然能够工作的很好，没有电视你也能坐在沙发上，在一个网站上，页眉、页脚、产品列表和文章，这些都可以考虑为一个模块。

这适合谁？​

如果你曾经经历过维护CSS的痛苦，这本书可以帮助你避免常见的问题。无论的你的组是1个人或者是100个人，你都能在这本书上找到有用的建议。如果你的网站正在发展，你更加需要这本书。

这学起来难吗？​

我想说的是这很容易学。你可以在20分钟内读完这本书并且在几分钟内使用这些规则。如果你发现了任何错误请及时通知我。

是应该使用最新的语言特性，ES6+的语法，还是应该使用第三方库与polyfills来编写一个JavaScript库？相信这个问题一定困扰着写JavaScript库的你，因为这很难说前者会比后者有更大的优势。私以为，前者能减少代码冗余，让代码更可读，使用更少的抽象，让代码库更容易维护与扩展，提高开发效率等等。

如果你正在开发一个全新的基于Node.js平台的JavaScript库(npm 包), 那基于Node.js v6环境使用最新的特性将是一个很好的选择。你也可以同时提供给Node v5或者更老版本的开发者一个回退版本(fallback)，如此一来Node v6的用户也可以正常地使用你的库：

const MyLibrary = require('my-library');

在Node.js v6的环境，代码将是最简洁优雅的。同时也得保证使用Node 0.x, 4.x, 5.x的用户能够导入ES5.1版本的库：

var MyLibrary = require('my-library/legacy');

除此以外，强烈推荐将使用ES2015模块语法的版本也放在你的NPM包中。虽然ES2015的模块系统还无法在Node.js或者V8中使用，但Node.js和前端社区早已大量地使用这种规范组织代码，这一切都归功于模块打包工具(module bundlers)，如Webpack, Berify, JSPM，Babel等等。

若要使用ES6的方式发布你的包，你项目的目录结构看起来可能会像这样：

.
├── /dist/                  # Temp folder for compiled output
│   ├── /legacy/            # Legacy bundle(s) for Node 0.x, 4.x
│   │   ├── /main.js        # ES5.1 bundle for Node 0.x, 4.x
│   │   └── /package.json   # Legacy NPM module settings
│   ├── /main.js            # ES6 bundle /w CommonJS for Node v6
│   ├── /main.mjs           # ES6 bundle /w Modules for cool kids
│   ├── /main.browser.js    # ES5.1 bundle for browsers
│   ├── /my-library.js      # UMD bundle for browsers
│   ├── /my-library.min.js  # UMD bundle, minified and optimized
│   └── /package.json       # NPM module settings
├── /node_modules/          # 3rd-party libraries and utilities
├── /src/                   # ES2015+ source code
│   ├── /main.js            # The main entry point
│   ├── /sub-module-a.js    # A module referenced in main.js
│   └── /sub-module-b.js    # A module referenced in main.js
├── /test/                  # Unit and end-to-end tests
├── /tools/                 # Build automation scripts and utilities
│   └── /build.js           # Builds the project with Babel/Rollup
└── package.json            # Project settings

在 src 目录里包含了你项目的源代码(当然是ES2015+规范)，dist (或者 build )目录则是在你构建工程时动态生成的。通过 dist 目录，你可以发布你的NPM包(package)，里面包含了使用Babel和Webapck编译出来的符合CommonJS, ES6，和UMD规范的包(bundle).

在你的 package.json 文件里面会包含这些bundle的引用：

{
  "name": "my-library",
  "version": "1.0.0",
  "main": "main.js",
  "jsnext:main": "main.mjs",
  "browser": "main.browser.js",
  ...
}

tools/build.js脚本是一种便捷的方式去配置你的编译过程，它看起来可能会像这样：

'use strict';

const fs = require('fs');
const del = require('del');
const rollup = require('rollup');
const babel = require('rollup-plugin-babel');
const uglify = require('rollup-plugin-uglify');
const pkg = require('../package.json');

const bundles = [
  {
    format: 'cjs', ext: '.js', plugins: [],
    babelPresets: ['stage-1'], babelPlugins: [
      'transform-es2015-destructuring',
      'transform-es2015-function-name',
      'transform-es2015-parameters'
    ]
  },
  {
    format: 'es6', ext: '.mjs', plugins: [],
    babelPresets: ['stage-1'], babelPlugins: [
      'transform-es2015-destructuring',
      'transform-es2015-function-name',
      'transform-es2015-parameters'
    ]
  },
  {
    format: 'cjs', ext: '.browser.js', plugins: [],
    babelPresets: ['es2015-rollup', 'stage-1'], babelPlugins: []
  },
  {
    format: 'umd', ext: '.js', plugins: [],
    babelPresets: ['es2015-rollup', 'stage-1'], babelPlugins: [],
    moduleName: 'my-library'
  },
  {
    format: 'umd', ext: '.min.js', plugins: [uglify()]
    babelPresets: ['es2015-rollup', 'stage-1'], babelPlugins: [],
    moduleName: 'my-library', minify: true
  }
];

let promise = Promise.resolve();

// Clean up the output directory
promise = promise.then(() => del(['dist/*']));

// Compile source code into a distributable format with Babel and Rollup
for (const config of bundles) {
  promise = promise.then(() => rollup.rollup({
    entry: 'src/main.js',
    external: Object.keys(pkg.dependencies),
    plugins: [
      babel({
        babelrc: false,
        exclude: 'node_modules/**',
        presets: config.babelPresets,
        plugins: config.babelPlugins,
      })
    ].concat(config.plugins),
  }).then(bundle => bundle.write({
    dest: `dist/${config.moduleName || 'main'}${config.ext}`,
    format: config.format,
    sourceMap: !config.minify,
    moduleName: config.moduleName,
  })));
}

// Copy package.json and LICENSE.txt
promise = promise.then(() => {
  delete pkg.private;
  delete pkg.devDependencies;
  delete pkg.scripts;
  delete pkg.eslintConfig;
  delete pkg.babel;
  fs.writeFileSync('dist/package.json', JSON.stringify(pkg, null, '  '), 'utf-8');
  fs.writeFileSync('dist/LICENSE.txt', fs.readFileSync('LICENSE.txt', 'utf-8'), 'utf-8');
});

promise.catch(err => console.error(err.stack)); // eslint-disable-line no-console
// https://gist.github.com/koistya/1abc156c61814fc307210f33e127f124