Attack on Life ⚔️

Personal blog

发表于 更新于 本文字数： 298 阅读时长 ≈ 1 分钟

最近做网页热键处理，对于事件还是需要温故下。

图形化展示事件派发过程

JS相关方法

  1. 事件绑定当然很简单

    比如使用addEventListener，通过第三个参数控制是否在捕获阶段。如果只是冒泡阶段的话，直接使用onclick等

  2. event对象下有个方法是stopPropagation，字面意思是停止传播，无论是冒泡还是捕获，均可通过该方法来阻止继续传播，结合图也就好理解了

  3. event下还有个preventDefault，但该方法

    • 并不阻止事件的继续传播

    • 会阻止默认行为，比如说a标签的跳转

相关文档

阅读全文 »

发表于 更新于 本文字数： 687 阅读时长 ≈ 1 分钟

xterm.js官方repo中除了浏览器组件/插件外，还有headless组件支持，那么xterm-headless是什么东西呢。

最近在翻看inshellisense时看到其中用到了xterm-headless，研究后理解了headless的作用。这里Mark下。

headless-nodejs支持

首先通过官方介绍也就知道了headless是用在nodejs侧的。即服务端也可以实例化一个terminal的客户端组件，然后操作执行。

注意点

阅读全文 »

发表于 更新于 本文字数： 3.3k 阅读时长 ≈ 6 分钟

IDE style command line auto complete

以下inshellisense简称为is

安装

1
2
3
4
5
6
# 如果还未安装node,推荐nvm方式先安装node
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

nvm install 18
npm install -g @microsoft/inshellisense
npm install -g node-gyp
阅读全文 »

发表于 更新于 本文字数： 393 阅读时长 ≈ 1 分钟

今年油猴脚本用的多些。这里总结下目前的使用情况。

定位

油猴用于强化网页，比如支持网页视频多倍速，网页样式修改，自动化一些操作等

常用脚本

  1. JD Review

    右键-自动评论，获得一点京豆

  2. 中信还款

    进入中信银行页面后，自动进入我的贷款页面，统计当前利息占比等信息。银行网页并不这些信息，而这些才是最重要的。

  3. 视频变速

    有些网页没有开放视频的多倍速变速，因此脚本增加了右键菜单的多倍速切换

  4. 文本选中支持

  5. 工作定制化脚本

    • 比如加载某网页时，自动执行一些选项操作等
阅读全文 »

发表于 更新于 本文字数： 923 阅读时长 ≈ 2 分钟

当使用WebStorm/Visual Studio Code时针对package.json中定义的脚本，我们都可以直接点击debug启动脚本，为什么这样做就可以调试呢，这里粗粒度解释下

IDE下的debug

比如原脚本是 "start": "node app.js",当我们需要调试这个node服务时，点击debug按钮，打印信息如下

1
2
3
4
5
6
7
8
9
10
/Users/alanhe/.nvm/versions/node/v18.16.1/bin/npm run start

> express-demo@0.0.1 start
> node app.js

Debugger listening on ws://127.0.0.1:63206/3fc8664c-10d9-4f99-8ed8-04efd382d9ae
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
Example app listening on port http://127.0.0.1:8000!

阅读全文 »

发表于 更新于 本文字数： 97 阅读时长 ≈ 1 分钟

这里罗列下作为前端开发者常用到的npm包

  1. local-web-server

    ws一下，随时起一个web server

  2. whistle

    代理服务

  3. chalk

    console输出彩色化

  4. readline

    终端交互输入

发表于 更新于 本文字数： 312 阅读时长 ≈ 1 分钟

前端代码中经常需要打开新页面，这里总结下做法和遇到的问题

做法

  1. a标签
  2. window.open

两者具体来说window控制会更为精细，比如可以控制窗体宽高等。a标签的话需要DOM下需要创建出a标签元素，只是具体可见不可见就看情况了。a标签相比较更为推荐，因为代表着用户行为驱动的交互形式。

pwa中的行为表现

阅读全文 »

发表于 更新于 本文字数： 5 阅读时长 ≈ 1 分钟
  1. ajv
    校验

发表于 更新于 本文字数： 1k 阅读时长 ≈ 2 分钟

Caddy相较Nginx更为简单，做服务器代理太方便了，尤其是HTTPS证书获取。这里记录下常用操作。

安装

推荐走包管理器安装，比如Mac下

1
brew install caddy

CentOS7如下

阅读全文 »

发表于 更新于 本文字数： 506 阅读时长 ≈ 1 分钟

最近遇到个问题，即远程桌面开启后，切换到别的tab页，输入事件失效了。

1
2
3
4
5
6
7
8
9
10
var keyboard = new Guacamole.Keyboard(document);

keyboard.onkeydown = function(keysym) {
// Do something ...
};

keyboard.onkeyup = function(keysym) {
// Do something ...
};

代码大致如上。

原因

Guacamole.Keyboard进行了事件捕获且阻止了冒泡，因此只要没有销毁就会一直捕获网页所有按键。

阅读全文 »
0%