ClamAV 是一个开源（GPLv2许可）的反病毒工具包，专为邮件网关上的电子邮件扫描而设计。它提供了多种实用工具，包括灵活且可扩展的多线程守护进程、命令行扫描器以及用于自动更新数据库的高级工具。该工具包的核心是一个作为共享库形式提供的反病毒引擎。

环境要求

安装

安装 EPEL 源

1

yum install -y epel-release

安装 ClamAV

1

yum install clamav clamd clamav-update -y

修改 ClamAV 配置文件

1
2
3
4
5
6

/etc/clamd.d/scan.conf 取消下面行注释
LogFile /var/log/clamd.scan
LogFileMaxSize 2M
PidFile /run/clamd.scan/clamd.pid
DatabaseDirectory /var/lib/clamav
LocalSocket /run/clamd.scan/clamd.sock

修改病毒库刷新配置文件

1
2
3
4
5
6

/etc/freshclam.conf 取消下面行注释
DatabaseDirectory /var/lib/clamav
UpdateLogFile  /var/log/freshclam.log
PidFile  /var/run/freshclam.pid
DatabaseMirror database.clamav.net
Checks 12

启动 ClamAV 服务

1
2

systemctl start clamd@scan.service
systemctl start clamav-freshclam.service

开机自启动

1
2

systemctl enable clamd@scan.service
systemctl enable clamav-freshclam.service

查看 ClamAV 服务状态。

1
2

systemctl status clamd@scan.service
systemctl status clamav-freshclam.service

故障排除

参考

• ClamAV 官方文档
• 1Panel
• Ask Different

最近想预约路考，发现怎么也约不上，提示 You're not eligible to take driving test at this time。重新检查发现我领取 premit 时没有走完流程。这里记录一下在 Santa Clara DMV 获取 premit 的流程。

创建MyDMV帐户

首先需要在 MyDMV 上注册一个帐户。

填写表格

如果已经成功注册 MyDMV 账户，就能在DMV官网在线填写驾照申请表格 DL-44表格。如果没有MyDMV账户，则须前往DMV办公室那天纸本填写。

下面是入口，可以一步一步点下去。注意选好好要线上笔试还是线下。最后需要缴费，我记得是 40 多刀。

最好选 Real ID，这样以后飞机上也不用带护照了。我一开始选的是普通的，在领取 premit 时，工作人员帮我改了。

在 DMV 网上考试

理论考试可以线上也可以线下，我是线上考的，所以这里记录线上流程。

我提前刷了一遍模拟题库，并且看了一遍驾照指南

觉得没问题了就可以打开 MyDMV，找到先前的 Application，点击 Start Test 开始考试。

注意仔细看考试提示，需要安装插件，全称录像，并且旁边不能有其他人。

笔试通过后

笔试通过后，就可以预约领取 premit 了。也可以不预约，直接去 DMV 排队。最好等一两天之后再去，因为有些信息需要时间同步。

笔试通过后会收到一封 confirmation code 邮件，里面有一个链接，点击链接就能预约。同时要保留这封邮件，去领取 premit 的时候需要。

上一张 Santa Clara DMV 手画图。

1. 携带地址证明（至少两种，我用的电费账单和银行账单）、SSN、护照、笔试通过的证明（confirmation code 邮件）去 DMV 领取 premit。
2. 在门口等待排队进入，有三个队伍 appointment, no appointment, test。不要排错了。
   
3. 进去之后排队，等待窗口人员示意，到窗口后说明来领取 premit，给窗口人员护照、地址证明。窗口会给你一张纸，上面有你的排队号码。
4. 去等待区等待，等待号码被叫到，去窗口。
   1. 要说明来意，此时的窗口人员并不知道你的来意。
   2. 给工作人员护照、地址证明和笔试通过的证明。
   3. 视力测试。示例测试就在窗口工作人员后方，不用担心。就是读出某一行或者某一列字母。
   4. 记录指纹（右手拇指）。
   5. 确认信息，签名。
   6. 拿到 receipt。
5. 带着 receipt 去 Photo(Line C) 排队拍照。拍完照后会得到一张带照片的纸，工作人员会将 receipt 等订到一起。
6. 拍完照后去旁边的 Line D 排队，等待 window 1 窗口或者左手边的 D 窗口示意。(这里很重要，我就是拍完照就回家了，结果无法预约路考，今天去 DMV 重新排的这个)
   1. 给工作人员订好的那一达纸。
   2. 最后得到下面的纸就是 premit 了。
   3. 
7. 可以回家预约路考了(要 24 小时之后，这边 DMV 更新数据需要一些时间)。

我使用的是 1panel 面板，它的网站管理使用的是 OpenResty。

当使用 OpenResty 默认配置，设置网站反向代理到 Cloudflare Worker 时，出现 502。

解决办法，移除所有默认 proxy 配置

1
2
3
4
5
6
7

#proxy_set_header Host $host; 
#proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
#proxy_set_header X-Forwarded-Host $server_name; 
#proxy_set_header X-Real-IP $remote_addr; 
#proxy_http_version 1.1; 
#proxy_set_header Upgrade $http_upgrade; 
#proxy_set_header Connection "upgrade"; 

移除后出现 403/421 错误。

找到社区里有出现过相关问题: https://community.cloudflare.com/t/access-cloudflare-workers-with-nginx-proxy/478073

解决办法，添加以下配置

1

proxy_ssl_server_name on;

备份所有数据

1

docker exec some-mysql sh -c 'exec mysqldump --all-databases -u root -p "$MYSQL_ROOT_PASSWORD"' > /some/path/all-databases.sql

恢复所有数据库

1

docker exec -i some-mysql sh -c 'exec mysql -u root -p "$MYSQL_ROOT_PASSWORD"' < /some/path/all-databases.sql

备份指定数据库

1

docker exec some-mysql sh -c 'exec mysqldump --databases db1 -u root -p "$MYSQL_ROOT_PASSWORD"' > /some/path/db1-backup.sql

恢复指定数据库

1

docker exec -i some-mysql sh -c 'exec mysql -u root -p "$MYSQL_ROOT_PASSWORD"' < /some/path/db1-backup.sql

先上网址

对于国内用户充值 ChatGPT Plus 比较困难，实测下面这个方法可以成功充值。

下载和注册 Depay

Depay 是一个虚拟信用卡服务提供商，可以将 USDT 转换为美元，以用于虚拟信用卡交易。您需要进行身份验证并传输您的身份证才能使用 Depay。

注册 Depay 账户

使用此链接: https://depay.depay.one/web-app/register-h5?invitCode=876620&lang=zh-cn，填写信息并输入邀请码 876620 来注册 Depay 虚拟 Master 卡或 Visa 卡。

完成身份认证

在 iOS App Store 中下载 Depay 应用，使用已注册的账户登录，然后完成 KYC 验证。

如果您使用安卓系统，请在官网下载 Depay 应用。

获取 USDT

• 如果您有朋友可以直接向您转移 USDT，则可以跳过此步骤。
• Depay 只能使用 TRC20 网络。如果是币圈新手，请牢记这一点。

下载和注册欧易 (OKX)

欧易 (OKX) 是虚拟钱包和交易平台之一，您需要在其中购买 USDT 并将其转移到 Depay 账户中。

下载欧易 (OKX)

在美国地区的应用商店中下载 OKX 应用。注册账户时，请使用中国手机号码，如果有邀请码，请输入 13041699。

存储资金

在 OKX 应用程序中，依次打开“资产” -> “总览” -> “资金账户” -> “充币”。按照指示存储 USDT ，注意选择 USDT-TRC20网络。

转移资金

使用 OKX 应用程序进行提款操作，在 Depay 应用程序中充值。在 OKX 应用程序中，依次打开“资产”->“总览”->“资金账户”->“提现”。在 TRC20 地址栏中粘贴您的 Depay 钱包地址，确保选择正确的网络(USDT-TRC20)。

开通虚拟信用卡

在 Depay 钱包收到 USDT 后，您需要先开通信用卡，然后兑换成美元。

开卡

首先开通标准套餐（0美元，月费1美元，充值手续费最少1.35％），然后根据需要升级套餐。

兑换 USD

在 Depay 应用程序中，依次打开“钱包”->“USDT”->“兑换”，将 USDT 兑换成美元。

充值

在 Depay 应用程序中，依次打开“卡”->“充值”，然后输入要充值的美元数，并支付手续费1.35％。

从本方法中损失的资金包括：1 USDT（给 OKX 的手续费）+ 1.35％ Depay 充值手续费 + USDT 转换为美元所需的费用。

订阅 ChatGPT Plus

为了订阅ChatGPT Plus，需要在全局代理下使用浏览器打开 https://chat.openai.com，并输入 Depay 虚拟信用卡信息。如果需要，可以使用美国地址生成器替代您的地址。

使用 github action 自动化可以让我们发布博客更加简单，只需要把代码提交到 github 仓库即可。

准备

关于如何使用 git 上传博客到自己的服务器可以查看我之前写的Hexo博客部署到服务器。

部署到 github page

action 配置

在项目根目录下创建 .github/workflows 文件夹，然后在该文件夹下创建 deploy-gh-page.yml 文件，内容如下：

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

name: Deploy to gh-page

# 根据实际情况调整分支
on:
  push:
    branches:
      - master

jobs:
  deploy-gh-page:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        with:
          ref: master
          fetch-depth: 0
      - uses: pnpm/action-setup@v2
        with:
          version: 7
          run_install: false
      - uses: actions/setup-node@v3
        with:
          node-version: "16"
          cache: "pnpm"
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      - name: Build
        run: npm run build
      - name: Deploy to gh-page
        uses: peaceiris/actions-gh-pages@v3
        with:
          # github 自带变量，无需配置
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

部署到服务器

SSH key

添加 SSH Private Key 到 github repo -> settings -> Secrets and variables -> Actions。

action 配置

在上文的配置基础上，增加如下配置:

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

deploy-to-server:
  runs-on: ubuntu-latest
  # 依赖 deploy-gh-page job
  needs: [deploy-gh-page]
  steps:
    - name: Deploy to server
      uses: wei/git-sync@v3
      with:
        source_repo: JakeLaoyu/blog
        source_branch: refs/remotes/source/gh-pages
        destination_repo: root@110.40.198.64:/www/wwwroot/blog.git
        destination_branch: refs/heads/master
        destination_ssh_private_key: ${{ secrets.SERVER_PRIVATE_KEY }}

效果

同步至 gitee 等

依赖 wearerequired/git-mirror-action 我们可以很方便实现。

在项目根目录下创建 .github/workflows 文件夹，然后在该文件夹下创建 sync-to-gitee.yml 文件，内容如下：

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

name: Sync to Gitee

on:
  push:
    branches: [master]

jobs:
  sync:
    runs-on: ubuntu-latest
    steps:
      - name: Sync to Gitee
        uses: wearerequired/git-mirror-action@master
        env:
          # 需要事先在 gitee 上创建 ssh key 并添加到仓库
          SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
        with:
          # GitHub 源仓库地址
          source-repo: git@github.com:JakeLaoyu/blog.git
          # Gitee 目标仓库地址
          destination-repo: git@gitee.com:jakelaoyu/HexoBlogBackup.git

最近ChatGPT真受欢迎，但是有些人注册时会经常面临不服务它们的地区问题，现在我们给你详细问题解决。

作者 twitter

准备

1. 代理。要求是韩国，日本，印度，新加坡，美国这些国家的地址都合适。对其他的我们还不太清楚，反正香港或中国的代理肯定不行。推荐机场
2. 找一个国外手机号码，如果你没有用过接码平台也行，有些接码平台是无法接的，所以我们推荐一个就是 sms-activate.org
3. 准备一个浏览器

开始一步一步注册

第一步是接验证码

打开接码平台 sms-activate.org，注册一个账号

然后要充值余额

一次接码OpenAi的验证码费用是大概11卢布，人民币来看差不多是1块钱，不过只能充美金，就先充直个1美金钱。可以选择对你任何方便方式。支付宝也有

充值完成可能需要等一会，就先放着，直接进行下一步。

第二部是注册一个OpenAI账号

首先打开ChatGPT的账户注册页面。谷歌注册或者邮箱注册都可以，无所谓，我们这里用邮箱注册作为例子。

用邮箱注册后你要验证邮件。进去邮箱，查看email里的链接。

这里你需要输入需要的信息。

当然，有一些人会在这里遇到一个问题，会出现说不能在当前国家服务的提示。

不用怕，这个这文章就帮助你解决这个问题。

这方面那，给你一招。一般你出现这种问题，就是因为你的代理没有全局，或者位置不对。香港或中国的的代理是100%无法通过的。

这个问题是非常神奇的，只要你出现了这个提示，那么你接下来怎么切换代理，都是没用的。现在提供给你你一招解决。

解决地区问题

先，你要把你的代理切换到任何合适的地区，我们这里选择了韩国。

然后，先复制下面这段代码

1

window.localStorage.removeItem(Object.keys(window.localStorage).find(i=>i.startsWith('@@auth0spajs')))

接着在地址栏里输入

1

javascript:

请注意，这里一定要输入，因为你复制的话是粘贴不了的。

然后再粘贴我们第一段复制的内容：

然后按下回车键，刷新页面。如果你的代理没问题，就可以看到正常工作的注册页面了。

输入手机号码

这里选的是韩国，这是因为我们使用韩国的代理，但是我们最好选择印度。然后到我们的接码网站上去。在左侧搜索OpenAi，然后点击印度。

点击”小黄车”。

然后我们复制这个号码，粘贴过去。然后我们点击发送验证码就完成了。

等一会网站会提示验证码，我们复制粘贴。

这里你要选择你打算如何使用OpenAI。随便选择吧。

使用ChatGPT

注册完后，打开ChatGPT网站去登陆。

在下面这个地方就可以开始写你的任何巧妙的句子了。取乐吧！

前言

vscode 插件提供了很强大个能力，借助插件可以帮助我们提升开发效率。

在写 node 项目时经常需要相对路径寻找引用 Service 文件等，写一个插件帮我们自动补全。

借助 vscode.languages.registerCompletionItemProvider 方法，我们可以注册相关补全提示。

注册服务

1
2
3
4
5
6
7

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.languages.registerCompletionItemProvider("typescript", {
      provideCompletionItems,
    })
  );
}

provideCompletionItems

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

const provideCompletionItems = async (
  document: vscode.TextDocument,
  position: vscode.Position
) => {
  const serviceFiles = await vscode.workspace.findFiles("app/services/**/*.ts");

  if (!serviceFiles.length) {
    return;
  }

  return serviceFiles.map((file) => {
    // 生成相对当前编辑文件的相对路径
    const relativePath = path.relative(
      path.dirname(document.uri.path),
      path.dirname(file.path)
    );

    const basename = path.basename(file.path);
    const extname = path.extname(file.path);
    const filename = basename.replace(extname, "");
    const insertText = `import ${filename} from '${relativePath}/${filename}';\n${filename}`;

    const completionItem = new vscode.CompletionItem(
      filename,
      vscode.CompletionItemKind.Class
    );

    completionItem.detail = basename;
    completionItem.insertText = insertText;
    completionItem.documentation = `${insertText}`;

    return completionItem;
  });
};

配置

同时我们需要在 package.json 中添加相应配置

1
2
3
4
5

{
  "activationEvents": [
    "onLanguage:typescript"
  ],
}

参考

• VS Code API
• VS-Code-Extension-Doc-ZH

下载 clash

去 github 下载最新 linux 版本，一般使用 linux-amd64。

1
2
3
4

gunzip clash-linux-amd64-v1.8.0.gz
mv clash-linux-amd64-v1.8.0 ~/clash
chmod +x ~/clash
./clash

一套执行完后会生成默认配置文件 ~/.config/clash

1
2
3

l ~/.config/clash
-rw-r--r-- 1 root root 190K 11月 24 16:38 config.yaml
-rw-r--r-- 1 root root 5.7M 11月 24 16:02 Country.mmdb

配置

我是用的是 Arisaka。

复制订阅地址

这个配置我们不能直接使用，需要使用 https://acl4ssr-sub.github.io/ 服务生成订阅地址，然后打开订阅地址就可以看到明文配置。

使用这份配置覆盖 ~/.config/clash/config.yaml。

启动代理

然后启动 clash

1

./clash

设置终端使用 clash 代理

1

export ALL_PROXY=socks5://127.0.0.1:7891

可以使用 curl 测试是否连接成功。

1

curl https://www.google.com

远程管理

修改配置文件

1

vim ~/.config/clash/config.yaml

1
2
3

external-controller: 0.0.0.0:9090
# 一定要配置 secret，用来远程访问安全
secret: xxxx

重启 clash 服务。

打开官方 http://clash.razord.top/，在设置中填写相应的端口，secret 配置。配置完成就即可远程管理

推荐

无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

由于localStorage是基于当前访问源(origin)的本地存储空间，所以当我们在 a.jakeyu.top 中存储一段数据，并想要在 b.jakeyu.top 中读取数据的时候是无法取到的。

最近遇到这样的需求，考虑过 cookie 方案，但是可能存储大量的数据，cookie 不可行。最终我们使用iframe来实现，我觉得这是一个很有趣的方法。

思路

a.jakeyu.top 和 b.jakeyu.top 通过 iframe 加载同一个域名的页面，并使用 postMessage 和 iframe 中的页面进行通信，这样就可以实现跨域名存取 localStorage。

缺点是 postMessage 是基于回调的，所以所有 api 都是异步的。不过我们有 promise，可以让使用方式优雅一些。

实现

父级页面

创建 iframe

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

function createIframe() {
  const iframeInBody = document.querySelector('#iframe') as HTMLIFrameElement;

  if (iframeInBody) {
    return iframeInBody;
  }

  const iframe = document.createElement('iframe');
  iframe.setAttribute('id', '#iframe');
  iframe.src = 'https://jakeyu.top/localstorage';
  iframe.style.display = 'none';

  document.body.insertAdjacentElement('beforeend', iframe);

  return iframe;
}

核心 Class

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

class localStorage {
  iframe: HTMLIFrameElement;

  // iframe 是否加载完成
  isReady: Boolean;

  // 同时调用方法时，需要在 iframe 回调之后执行 reslove
  waitMap: Map<string, Function>;

  // 在 iframe ready之前调用方法，需要保存一下，ready后执行
  beforeReady: [Function?];

  constructor() {
    this.listenMessage();

    this.isReady = false;

    this.beforeReady = [];

    this.iframe = createIframe();

    this.waitMap = new Map();
  }

  /**
   * 设置数据
   * @param key
   * @param value
   */
  setItem(key: string, value: any) {
    const eventType = 'set';
    const randomKey = this.getRandomString(eventType);

    return new Promise((resolve) => {
      this.waitMap.set(randomKey, resolve);

      this.postMessage({
        eventType,
        key,
        value,
        randomKey
      });
    });
  }

  /**
   * 监听消息
   */
  listenMessage() {
    // 接收 iframe 消息
    window.addEventListener('message', this.receiveMessage.bind(this), false);
  }

  /**
   * 处理接收消息
   * @param event
   */
  receiveMessage(event: MessageEvent) {
    const { data = {} } = event;
    if (typeof data === 'string') return;

    const { eventType, randomKey, value } = data;

    if (eventType === 'return') {
      const handler = this.waitMap.get(randomKey);

      if (handler) {
        handler(value);
        this.waitMap.delete(randomKey);
      }
    } else if (eventType === 'ready') {
      this.isReady = true;

      while (this.beforeReady.length) {
        const fun = this.beforeReady.shift() as Function;
        fun();
      }
    }
  }

  /**
   * 获取随机字符串
   * @param eventKey
   */
  getRandomString(eventKey: string) {
    let randomString = '';
    let eventKeyRandom = '';

    do {
      randomString = makeRandomString(5);
      eventKeyRandom = `${eventKey}_${randomString}`;
    } while (this.waitMap.has(eventKeyRandom));

    return eventKeyRandom;
  }

  /**
   * 向iframe中发送消息
   * @param params
   */
  postMessage(params: Record<string, string>) {
    if (this.isReady) {
      (this.iframe.contentWindow as Window).postMessage(params, '*');
    } else {
      this.beforeReady.push(() => {
        (this.iframe.contentWindow as Window).postMessage(params, '*');
      });
    }
  }
}

iframe 页面

iframe 页面只需要通过 postMessage 和父级页面进行通信，所以并不需要 ui。

ready

页面加载完成时，需要通知父页面，并执行 before 栈中的函数。

1
2
3
4
5
6

window.parent.postMessage(
  {
    eventType: 'ready',
  },
  '*'
);

监听消息

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

function receiveMessage(event) {
  // 用来标记当前事件是 读/取 或者其他
  const eventType = get(event, 'data.eventType', '');
  // 数据 key
  const key = get(event, 'data.key', '');
  // 数据
  const value = get(event, 'data.value', '');
  // 当前事件标识，用于父级页面区分当前消息来自哪次调用
  const randomKey = get(event, 'data.randomKey', '');

  // 只以存数据为例
  if(eventType === 'set') {
    localStorage.setItem(key, value);

    // 通知父级页面存储成功
    window.parent.postMessage(
      {
        eventType: 'return',
        value,
        randomKey,
        error,
      },
      '*'
    );
  }
}

window.addEventListener('message', receiveMessage, false);

使用

在 a.jekeyu.top 中存储数据

1

new localStorage().setItem('name', 'jake')

在 b.jekeyu.top 中存储数据

1

const name = await new localStorage().getItem('name')

介绍

Docker 是一个开源的应用容器引擎，基于 Go 语言 并遵从 Apache2.0 协议开源。

Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。

容器是完全使用沙箱机制，相互之间不会有任何接口（类似 iPhone 的 app）,更重要的是容器性能开销极低。

文件

DockerFile

创建 DockerFile

配置中的路径根据自己实际路径调整

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
44
45
46
47
48
49
50
51
52
53
54

FROM centos:6
ENV container docker

# 添加环境
RUN yum -y update &&\
    yum -y install epel-release &&\
    yum -y install nginx &&\
    yum -y install vim &&\
    yum install passwd openssl openssh-server openssh-clients -y &&\
    yum install initscripts -y

# 更新源，用于安装 git 2.x，修复 --work-tree 不能和 --git-dir 同名问题
RUN yum -y install wget &&\
    wget http://opensource.wandisco.com/centos/6/git/x86_64/wandisco-git-release-6-1.noarch.rpm &&\
    rpm -ivh wandisco-git-release-6-1.noarch.rpm &&\
    yum -y install git

# 安装zsh
RUN yum install -y zsh &&\
    wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | sh

# 创建目录
RUN mkdir -p /home/blog
WORKDIR /home

# 添加 blog git钩子
RUN git init --bare blog.git
RUN echo -e '#!/bin/bash\ngit --work-tree=/home/blog --git-dir=/home/blog.git checkout -f' >> blog.git/hooks/post-receive
RUN chmod +x blog.git/hooks/post-receive

# 创建日志文件
RUN mkdir -p /home/log
WORKDIR /home/log
RUN touch blog.log

# 配置 nginx
WORKDIR /etc/nginx
COPY ./nginx ./conf.d
# 解决执行 nginx 报错
RUN nginx -c /etc/nginx/nginx.conf

# 导入自动执行脚本
COPY ./start.sh /root/start.sh
RUN chmod +x /root/start.sh

# 切换工作目录
WORKDIR /home

# 启动服务
CMD /root/start.sh

# 端口，使用81 端口避免和 nginx默认端口冲突
# 22 端口为 ssh 所用
EXPOSE 9022:22 9081:81

nginx

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

server {
    listen 81;
    server_name i.jakeyu.top;
    # 处理 nginx 自动 301 加斜杠以及端口问题
    server_name_in_redirect on;
    port_in_redirect off;

    location / {
        root /home/blog;
        error_page   404 https://i.jakeyu.top/404.html;
    }

    access_log  /home/log/blog.log;
}

start.sh

1
2
3
4
5
6
7
8
9
10

#!/bin/sh

# 启动 sshd 服务
service sshd start

# 启动nginx
nginx

# 防止容器退出
/bin/sh

构建

在 DockerFile 所在目录执行

1

docker build -t blog:v1 .

启动容器

1

docker run -ti -d -p 9081:81 -p 9022:22 blog:v1

ssh配置

查看所有容器，找到想要配置的 container id

1

docker ps -a

进入容器

1

docker exec -ti [container id] /bin/zsh

把宿主机的 ~/.ssh/id_rsa.pub 文件 copy 到容器 ~/.ssh/authorized_keys 中

重启ssh服务：

1

service sshd restart

部署博客

配置

修改 Hexo 博客的配置文件 _config.yml

1
2
3
4
5

deploy:
  type: git
  repo:
    ssh: ssh://root@ip:port/home/blog.git
  branch: master

把 ip 和 port 换成和自己相对应的，比如在这里 port 就是 9022。

部署

1

hexo d

访问

使用 curl 测试

1

curl 127.0.0.1:81

删除

批量删除容器

1

docker container rm $(docker container ls -a -q)

批量删除镜像

1

docker image rm $(docker  image  ls   -a  -q)

参考

• Hexo博客部署到服务器
• Docker学习之SSH连接docker容器
• Docker 入门教程

代码

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

function traverseFileTree(item, path) {
  path = path || "";
  if (item.isFile) {
    // Get file
    item.file(function(file) {
      console.log("File:", path + file.name);
    });
  } else if (item.isDirectory) {
    // Get folder contents
    var dirReader = item.createReader();
    readerEntries(dirReader, path, item)
  }
}

// readEntries 每次最多返回100个，需要重复调用
// https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries
functoin readerEntries (dirReader, path, item) {
  dirReader.readEntries(entries => {
    for (var i = 0; i < entries.length; i++) {
      traverseFileTree(entries[i], path + item.name + '/')
    }
    if (entries.length) readerEntries(dirReader, path, item)
  })
},

dropArea.addEventListener("drop", function(event) {
  event.preventDefault();

  var items = event.dataTransfer.items;
  for (var i=0; i<items.length; i++) {
    // webkitGetAsEntry is where the magic happens
    var item = items[i].webkitGetAsEntry();
    if (item) {
      traverseFileTree(item);
    }
  }
}, false);

兼容性

参考

• FileSystemDirectoryReader - MDN

简介

在软件管理的领域里存在着被称作“依赖地狱”的死亡之谷，系统规模越大，加入的包越多，你就越有可能在未来的某一天发现自己已深陷绝望之中。

在依赖高的系统中发布新版本包可能很快会成为噩梦。如果依赖关系过高，可能面临版本控制被锁死的风险（必须对每一个依赖包改版才能完成某次升级）。而如果依赖关系过于松散，又将无法避免版本的混乱（假设兼容于未来的多个版本已超出了合理数量）。当你专案的进展因为版本依赖被锁死或版本混乱变得不够简便和可靠，就意味着你正处于依赖地狱之中。

因此，Github 起草了一个具有指导意义的，统一的版本号表示规则，称为 Semantic Versioning(语义化版本表示)。该规则规定了版本号如何表示，如何增加，如何进行比较，不同的版本号意味着什么。

版本格式

版本格式：主版本号.次版本号.修订号，版本号递增规则如下：

1. 主版本号：当你做了不兼容的 API 修改，
2. 次版本号：当你做了向下兼容的功能性新增，
3. 修订号：当你做了向下兼容的问题修正。

先行版本号及版本编译元数据可以加到主版本号.次版本号.修订号的后面，作为延伸。

先行版本

当要发布大版本或者核心的 Feature 时，但是又不能保证这个版本的功能 100% 正常。这个时候就需要通过发布先行版本。比较常见的先行版本包括：内测版、灰度版本了和 RC 版本。Semver规范中使用alpha、beta、rc (以前叫做gama)来修饰即将要发布的版本。它们的含义是：

• alpha: 内部版本
• beta: 公测版本
• rc: 即Release candiate，正式版本的候选版本

比如：1.0.0-alpha.0, 1.0.0-alpha.1, 1.0.0-beta.0, 1.0.0-rc.0, 1.0.p-rc.1 等版本。alpha, beta, rc 后需要带上次数信息。

版本发布准则

列举出比较实用的一些规则：

• 标准的版本号必须采用XYZ的格式，并且X、Y 和 Z 为非负的整数，禁止在数字前方补零，版本发布需要严格递增。例如：1.9.1 -> 1.10.0 -> 1.11.0。
• 某个软件版本发行后，任何修改都必须以新版本发行。
• 1.0.0 的版本号用于界定公共 API。当你的软件发布到了正式环境，或者有稳定的API时，就可以发布 1.0.0 版本了。
• 版本的优先层级指的是不同版本在排序时如何比较。判断优先层级时，必须把版本依序拆分为主版本号、次版本号、修订号及先行版本号后进行比较。

npm包依赖

1
2
3
4
5

{
  "dependencies": {
    "react": "^15.6.1",
  }
}

项目对包的依赖可以使用下面的 3 种方法来表示(假设当前版本号是 16.2.0):

• 兼容模块新发布的补丁版本：~16.2.0、16.2.x、16.2
• 兼容模块新发布的小版本、补丁版本：^16.2.0、16.x、16
• 兼容模块新发布的大版本、小版本、补丁版本：*、x

^

允许在不修改 [major, minor, patch] 中最左非零数字的更改（匹配大于 X、Y、Z 的更新 Y、Z 的版本号）

在 X.Y.Z 结构的版本号中，X、Y、Z 都是非负的整数，上面定义的意思就是说从左向右，遇到第一个非零数字是不可修改的，下一个数字可以更改，比如:

• X、Y、Z 都不为 0，^15.6.1,最左的非零数字是15，所以 X 是不允许更新的，也就是说主版本号不会超过15，表示的就是版本号>=15.6.1 && <16.0.0
• 如果 X 为 0，那么第一个非零数字就是 Y，就只能对 z 做出修改，^0.1.2表示版本号>=0.1.2 && < 0.2.0
• 如果 X、Y 的数字都是 0 的话，第一个非零数字就是 Z，表示的就是版本号不允许更新；^0.0.2，主版本号和次版本号都是 0，修订号为非零，表示的就是版本号>=0.0.2 && < 0.0.3

~

匹配大于 X.Y.Z 的更新 Z 的版本号

• X、Y、Z 都不为 0，~1.2.3 表示版本号 >=1.2.3 && < 1.3.0
• X 为 0，~0.2.3 表示版本号 >=0.2.3 && < 0.3.0，这种情况下，~ 等价于 ^
• X、Y 为0，0.0.3 表示版本号 >=0.0.3 && < 0.1.0

x

可以替代 X、Y、Z 中任意一个，表示该位置可更新

• 1.2.x: >=1.2.0 && < 1.3.0
• 1.x: >=1.0.0 && < 2.0.0
• *: 任意版本都可以

上面的 x 可以用 * 代替，其实，用 x 或 * 的地方可以省略不写，比如 1.2.x 和 1.2 表示的意思是一样的

npm包发布

通常我们发布一个包到 npm 仓库时，我们的做法是先修改 package.json 为某个版本，然后执行 npm publish 命令。手动修改版本号的做法建立在你对 Semver 规范特别熟悉的基础之上，否则可能会造成版本混乱。npm 考虑到了这点，它提供了相关的命令来让我们更好的遵从 Semver 规范：

• 升级补丁版本号：npm version patch
• 升级小版本号：npm version minor
• 升级大版本号：npm version major

当执行 npm publish 时，会首先将当前版本发布到 npm registry，然后更新 dist-tags.latest 的值为新版本。
当执行 npm publish --tag=next 时，会首先将当前版本发布到 npm registry，并且更新 dist-tags.next 的值为新版本。这里的 next 可以是任意有意义的命名（比如：v1.x、v2.x 等等）

参考

• https://semver.org/lang/zh-CN/
• Semver(语义化版本号)扫盲 - 腾讯IVWEB团队
• 语义化版本控制模块-Semver

base64

这个组件是基于ant-design改写的，在issues中发现了解决办法 #10102

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

/**
 *  将图片转换成base64
 * @param {String} url 图片地址
 */
export const base64Url = function (url) {
  let xhr = new XMLHttpRequest()
  xhr.onload = function () {
    let reader = new FileReader()
    reader.onloadend = function () {
      self.postMessage(reader.result) //web worker 通信
    }
    reader.readAsDataURL(xhr.response)
  }
  xhr.open('GET', url)
  xhr.responseType = 'blob'
  xhr.send()
}

通过ajax获取图片，并将图片转为base64。

Web Worker

但是由于我开发的业务页面中有大量图片，如果每个图片都这样操作，页面会有些卡顿。所以需要进行优化。

我选择使用Web Worker，关于Web Worker可以查看阮一峰老师的文章：

• Web Worker 使用教程

创建一个生成Web Worker的函数：

1
2
3
4
5
6
7
8
9
10
11

/**
 * 创建web worker
 * @param {Function} f 要在worker中执行的函数
 * @param {Strint} args 函数参数
 */
export const createWorker = (f, args) => {
  var blob = new Blob(['(' + f.toString() + ')("' + args + '")'])
  var url = window.URL.createObjectURL(blob)
  var worker = new Worker(url)
  return worker
}

调用

1
2
3
4
5
6

let myWorker = createWorker(base64Url, url)
// 监听message事件
myWorker.onmessage = (data) => {
  console.log(data.data)  //打印转换后的base64
  myWorker.terminate()  //销毁 web worker
}

介绍

2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

关于详细flex使用，可以查看阮一峰的两篇文章:

• Flex 布局教程：语法篇
• Flex 布局教程：实例篇

正文

首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况：

flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。同理，如下是等同的：

1
2
3
4
5
6

.item {flex: 2333 3222 234px;}
.item {
    flex-grow: 2333;
    flex-shrink: 3222;
    flex-basis: 234px;
}

当 flex 取值为 none，则计算值为 0 0 auto，如下是等同的：

1
2
3
4
5
6

.item {flex: none;}
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}

当 flex 取值为 auto，则计算值为 1 1 auto，如下是等同的：

1
2
3
4
5
6

.item {flex: auto;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

当 flex 取值为一个非负数字，则该数字为 flex-grow 值，flex-shrink 取 1，flex-basis 取 0%，如下是等同的：

1
2
3
4
5
6

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

当 flex 取值为一个长度或百分比，则视为 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，有如下等同情况（注意 0% 是一个百分比而不是一个非负数字）：

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

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}
.item-2 {flex: 24px;}
.item-2 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

当 flex 取值为两个非负数字，则分别视为 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，如下是等同的：

1
2
3
4
5
6

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

当 flex 取值为一个非负数字和一个长度或百分比，则分别视为 flex-grow 和 flex-basis 的值，flex-shrink 取 1，如下是等同的：

1
2
3
4
5
6

.item {flex: 2333 3222px;}
.item {
    flex-grow: 2333;
    flex-shrink: 1;
    flex-basis: 3222px;
}

flex-basis 规定的是子元素的基准值。所以是否溢出的计算与此属性息息相关。flex-basis 规定的范围取决于 box-sizing。这里主要讨论以下 flex-basis 的取值情况：

• auto：首先检索该子元素的主尺寸，如果主尺寸不为 auto，则使用值采取主尺寸之值；如果也是 auto，则使用值为 content。
• content：指根据该子元素的内容自动布局。有的用户代理没有实现取 content 值，等效的替代方案是 flex-basis 和主尺寸都取 auto。
• 百分比：根据其包含块（即伸缩父容器）的主尺寸计算。如果包含块的主尺寸未定义（即父容器的主尺寸取决于子元素），则计算结果和设为 auto 一样。

举一个不同的值之间的区别：

1
2
3
4
5

<div class="parent">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
</div>

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

.parent {
    display: flex;
    width: 600px;
}
.parent > div {
    height: 100px;
}
.item-1 {
    width: 140px;
    flex: 2 1 0%;
    background: blue;
}
.item-2 {
    width: 100px;
    flex: 2 1 auto;
    background: darkblue;
}
.item-3 {
    flex: 1 1 200px;
    background: lightblue;
}

• 主轴上父容器总尺寸为 600px
• 子元素的总基准值是：0% + auto + 200px = 300px，其中
  • 0% 即 0 宽度
  • auto 对应取主尺寸即 100px
• 故剩余空间为 600px - 300px = 300px
• 伸缩放大系数之和为： 2 + 2 + 1 = 5
• 剩余空间分配如下：
  • item-1 和 item-2 各分配 2/5，各得 120px
  • item-3 分配 1/5，得 60px
• 各项目最终宽度为：
  • item-1 = 0% + 120px = 120px
  • item-2 = auto + 120px = 220px
  • item-3 = 200px + 60px = 260px
• 当 item-1 基准值取 0% 的时候，是把该项目视为零尺寸的，故即便声明其尺寸为 140px，也并没有什么用，形同虚设
• 而 item-2 基准值取 auto 的时候，根据规则基准值使用值是主尺寸值即 100px，故这 100px 不会纳入剩余空间

参考

• https://segmentfault.com/q/1010000004080910/a-1020000004121373

正文

看看下面这题，定义两个 div A 和 B，被包括在同一个父 div 标签下。HTML结构如下：

1
2
3
4

<div class="container">
    <div class="inline-block">#divA display:inline-block</div>
    <div class="float"> #divB float:left</div>
</div>

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

.container{
    position:relative;
    background:#ddd;
}
.container > div{
    width:200px;
    height:200px;
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

大概描述起来，意思就是拥有共同父容器的两个 DIV 重叠在一起，是 display:inline-block 叠在上面，还是 float:left 叠在上面？

注意这里 DOM 的顺序，是先生成 display:inline-block ，再生成 float:left 。当然也可以把两个的 DOM 顺序调转如下：

1
2
3
4

<div class="container">
    <div class="float"> #divB float:left</div>
    <div class="inline-block">#divA display:inline-block</div>
</div>

会发现，无论顺序如何，始终是 display:inline-block 的 div 叠在上方。

DEMO戳我

这里其实是涉及了所谓的层叠水平（stacking level)，有一张图可以很好的诠释：

运用上图的逻辑，上面的题目就迎刃而解，inline-blcok 的 stacking level 比之 float 要高，所以无论 DOM 的先后顺序都堆叠在上面。

不过上面图示的说法有一些不准确，按照 W3官方 的说法，准确的 7 层为：

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

稍微翻译一下：

1. 形成堆叠上下文环境的元素的背景与边框
2. 拥有负 z-index 的子堆叠上下文元素 （负的越高越堆叠层级越低）
3. 正常流式布局，非 inline-block，无 position 定位（static除外）的子元素
4. 无 position 定位（static除外）的 float 浮动元素
5. 正常流式布局， inline-block元素，无 position 定位（static除外）的子元素（包括 display:table 和 display:inline ）
6. 拥有 z-index:0 的子堆叠上下文元素
7. 拥有正 z-index: 的子堆叠上下文元素（正的越低越堆叠层级越低）

所以我们的两个 div 的比较是基于上面所列出来的 4 和 5 。5 的 stacking level 更高，所以叠得更高。

不过！不过！不过！重点来了，请注意，上面的比较是基于两个 div 都没有形成 堆叠上下文 这个为基础的。下面我们修改一下题目，给两个 div ，增加一个 opacity:

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

.container{
    position:relative;
    background:#ddd;
}
.container > div{
    width:200px;
    height:200px;
    opacity:0.9; // 注意这里，增加一个 opacity
}
.float{
    float:left;
    background-color:deeppink;
}
.inline-block{
    display:inline-block;
    background-color:yellowgreen;
    margin-left:-100px;
}

DEMO戳我

会看到，inline-block 的 div 不再一定叠在 float 的 div 之上，而是和 HTML 代码中 DOM 的堆放顺序有关，后添加的 div 会 叠在先添加的 div 之上。

这里的关键点在于，添加的 opacity:0.9 这个让两个 div 都生成了 stacking context（堆叠上下文） 的概念。此时，要对两者进行层叠排列，就需要 z-index ，z-index 越高的层叠层级越高。

堆叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的 z 轴上延伸，HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

那么，如何触发一个元素形成 堆叠上下文 ？方法如下，摘自 MDN：

• 根元素 (HTML),
• z-index 值不为 “auto”的 绝对/相对定位，
• 一个 z-index 值不为 “auto”的 flex 项目 (flex item)，即：父元素 display: flex|inline-flex，
• opacity 属性值小于 1 的元素（参考 the specification for opacity），
• transform 属性值不为 “none”的元素，
• mix-blend-mode 属性值不为 “normal”的元素，
• filter值不为“none”的元素，
• perspective值不为“none”的元素，
• isolation 属性被设置为 “isolate”的元素，
• position: fixed
• 在 will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值
• -webkit-overflow-scrolling 属性被设置 “touch”的元素

所以，上面我们给两个 div 添加 opacity 属性的目的就是为了形成 stacking context。也就是说添加 opacity 替换成上面列出来这些属性都是可以达到同样的效果。

在层叠上下文中，其子元素同样也按照上面解释的规则进行层叠。 特别值得一提的是，其子元素的 z-index 值只在父级层叠上下文中有意义。意思就是父元素的 z-index 低于父元素另一个同级元素，子元素 z-index 再高也没用。

理解上面的 stacking-level 与 stacking-context 是理解 CSS 的层叠顺序的关键。

参见

• 谈谈一些有趣的CSS题目（1~5） · Issue #1 · chokcoco/iCSS

Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。 私有的CSS属性值可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问。

语法

1

let style = window.getComputedStyle(element, [pseudoElt]);

• element: 用语获取计算样式的Element
• pseudoElt: 指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。

例如:

1
2
3

var dom = document.getElementById("test")
var style = window.getComputedStyle(dom , ":after")
var style = window.getComputedStyle(dom , ":after").content

getComputedStyle与style的区别

我们使用element.style也可以获取元素的CSS样式声明对象，但是其与getComputedStyle方法还有有一些差异的。

1. 只读与可写

• 正如上面提到的getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写，能屈能伸。

2. 获取的对象范围

• getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。

getComputedStyle与defaultView

许多在线的演示代码中，getComputedStyle是通过 document.defaultView 对象来调用的。大部分情况下，这是不需要的，因为可以直接通过window对象调用。但有一种情况，你必需要使用 defaultView, 那是在firefox3.6上访问子框架内的样式 。

getPropertyValue

getPropertyValue方法可以获取CSS样式申明对象上的属性值（直接属性名称），例如：

1

window.getComputedStyle(element, null).getPropertyValue("float");

如果我们不使用getPropertyValue方法，直接使用键值访问，其实也是可以的。但是，比如这里的的float，如果使用键值访问，则不能直接使用getComputedStyle(element, null).float，而应该是cssFloat与styleFloat，自然需要浏览器判断了，比较折腾！

使用getPropertyValue方法不必可以驼峰书写形式（不支持驼峰写法），例如：style.getPropertyValue("border-top-left-radius")

获取变量

例子：

1
2
3

:root{
  --testMargin:75px;
}

1
2
3
4
5
6
7
8

//  读取
var root = getComputedStyle(document.documentElement);
var cssVariable = root.getPropertyValue('--testMargin').trim();

console.log(cssVariable); // '75px'

// 写入
document.documentElement.style.setProperty('--testMargin', '100px');

CSSStyleDeclaration

概要

CSSStyleDeclaration 表示一个CSS属性键值对的集合。它被用于一些API中：

• HTMLElement.style - 用于操作单个元素的样式()；
• (TODO: reword) 作为 declaration block 的接口，当规则为 CSSStyleRule 时，由stylesheet中的 style 属性返回 。
• CSSStyleDeclaration也是由window.getComputedStyle()返回的只读接口.

方法

• CSSStyleDeclaration.getPropertyPriority(): 返回可选的优先级，”Important”, 例如：

1

priString= styleObj.getPropertyPriority('color')

• CSSStyleDeclaration.getPropertyValue(): 返回属性值。例如:

1

valString= styleObj.getPropertyValue('color')

• CSSStyleDeclaration.item(): 返回属性名。 例如:

1

nameString= styleObj.item(0) Alternative: nameString= styleObj[0]

• CSSStyleDeclaration.removeProperty(): 返回被删除的属性。例如:

1

valString= styleObj.removeProperty('color')

• CSSStyleDeclaration.setProperty(): 没有返回值。例如:

1

styleObj.setProperty('color', 'red', 'important')

• CSSStyleDeclaration.getPropertyCSSValue(): 仅支持通过getComputedStyle的方式。 在Firefox (CSSPrimitiveValue中返回 ROCSSPrimitiveValue, 在其他实现 CSSValue，或为null 速记属性。

兼容性

参考

• MDN
• 获取元素CSS值之getComputedStyle方法熟悉–张鑫旭
• CSSStyleDeclaration–MDN