Author Archives: wenbin

关于

关于我

我叫吴文斌,来自温州,上学工作生活在杭州,软件工程师。

98年第一次接触电脑学习打字,05年通过步步高英语词典学习 BASIC 编程,08年学习 C 语言,12年开始全职前端,20年离职开始创业。

这是我业余时间编写和维护的开发知识库,如果你对代码感兴趣,可以看看有没有帮助。

工作经历

2012.07 ~ 2014.03 杭州优朋科技(杭州)
2014.04 ~ 2020.04 蘑菇街(杭州)
2020.04 ~ 至今 创业(杭州)
2023.03 ~ 2024.05 Yami Live (远程)
2023.07 – 至今 FlowGPT (远程)

技能列表

  • Web 前端
    • JavaScript、Typescript、React、Vue、Nuxtjs、Nextjs、uni-app
    • CSS、Less、Sass、Stylus、PostCSS、CSS Modules、CSS-in-JS、Tailwind、Antd、Mui、Bootstrap
    • Grunt、Gulp、Webpack
  • Web3
    • Solidity
  • Web 后端
    • Nodejs:Express、Koa、Nestjs、Eggjs、Midwayjs、Fastify
    • Java:Spring、SpringMVC、Strut2、Mybates、druid、webx、Freemark、jsp、jstl
    • Python:Django
    • PHP:wordpress、Laravel
  • 移动客户端
    • 跨端,react native, capacitor, flutter
    • Android,了解,开发过 Cordova 插件
    • iOS,了解,开发过 Cordova 插件,开发过 Web 离线缓存,和离线包更新功能。
    • 小程序,熟悉,参与开发过多款小程序,开发过 Vue 转小程序工具。
  • 桌面客户端
    • electron,熟悉,开发过聊天软件、直播管理软件。
    • tauri,了解
  • 数据库
    • MySql、Mariadb、PostgreSQL、MongoDB、SQLite
  • 运维
    • Nginx、Apache、Traefik
    • Docker、Docker-Compose、k3s
    • Linux Shell
  • 设计
    • Photoshop、Illustrator、CorelDraw、SolidWorks、Rhino、AutoCAD、3DsMax、Keyshot

我的演讲和讲义

SEO 静态化爬虫系统简介
微服务开发介绍
日志系统开发介绍
graphQL 介绍
Wordpress 开发实践
React 开发培训
Nodejs 命令行工具开发介绍 2018-12-21
Nodejs 命令行工具开发实践 2018-12-28
Aides Vue 脚手架分享 2019-01-12

联系作者

你可以在下面这些网站上找到我:

电子邮箱:bin2302@gmail.com
欢迎加我的微信交流:wuxx2024


关于博客

最早 06 年创建了博客,疏于打理备份,期间也换过好几次服务器和域名,老旧数据很多都丢掉了。现在不折腾了,没有遇到不可抗力因素的话,目前这个地址会长久用下去。
如果笔者的博客对你有些许的帮助,欢迎加入到收藏夹或者订阅到 RSS 阅读器。

留言:请在下方评论区留言

隐私政策

我们是谁

站点地址: https://blog.tongdelove.com.

评论

当访客留下评论时,我们会收集评论表单所显示的数据,和访客的IP地址及浏览器的user agent字符串来帮助检查垃圾评论。

由您的电子邮箱地址所生成的匿名化字符串(又称为哈希)可能会被提供给Gravatar服务确认您是否有使用该服务。Gravatar服务的隐私政策在此:https://automattic.com/privacy/。在您的评论获批准后,您的资料图片将在您的评论旁公开展示

媒体

如果您向此网站上传图片,您应当避免上传那些有嵌入地理位置信息(EXIF GPS)的图片。此网站的访客将可以下载并提取此网站的图片中的位置信息。

Cookies

如果您在我们的站点上留下评论,您可以选择用cookies保存您的名字、电子邮箱地址和网站地址。这是通过让您可以不用在评论时再次填写相关内容而向您提供方便。这些cookies会保留一年。

如果您访问我们的登录页,我们会设置一个临时的cookie来确认您的浏览器是否接受cookies。此cookie不包含个人数据,且会在您关闭浏览器时被丢弃。

当您登录时,我们也会设置多个cookies来保存您的登录信息及屏幕显示选项。登录cookies会保留两天,而屏幕显示选项cookies会保留一年。如果您选择了“记住我”,您的登录状态则会保留两周。如果您注销登陆了您的账户,用于登录的cookies将会被移除。

如果您编辑或发布文章,我们会在您的浏览器中保存一个额外的cookie。这个cookie不包含个人数据而只记录了您刚才编辑的文章的ID。这个cookie会保留一天。

来自其他网站的嵌入内容

此站点上的文章可能会包含嵌入的内容(如视频、图片、文章等)。来自其他站点的嵌入内容的行为和您直接访问这些其他站点没有区别。

这些站点可能会收集关于您的数据、使用cookies、嵌入额外的第三方跟踪程序及监视您与这些嵌入内容的交互,包括在您有这些站点的账户并登录了这些站点时,跟踪您与嵌入内容的交互。

我们与谁共享您的信息

若您请求重置密码,您的IP地址将包含于密码重置邮件中。

我们保留多久您的信息

如果您留下评论,评论和其元数据将被无限期保存。我们这样做以便能识别并自动批准任何后续评论,而不用将这些后续评论加入待审队列。

对于本网站的注册用户,我们也会保存用户在个人资料中提供的个人信息。所有用户可以在任何时候查看、编辑或删除他们的个人信息(除了不能变更用户名外)、站点管理员也可以查看及编辑那些信息。

您对您的信息有什么权利

如果您有此站点的账户,或曾经留下评论,您可以请求我们提供我们所拥有的您的个人数据的导出文件,这也包括了所有您提供给我们的数据。您也可以要求我们抹除所有关于您的个人数据。这不包括我们因管理、法规或安全需要而必须保留的数据。

您的数据将发送到何处

访客评论可能会被自动垃圾评论监测服务检查。

wenbin

2021-09-01

掘金似乎停止更新和优化功能了。目前没有实现文章聚类,使得站点上的文章杂乱无章。这样的情况使网站的发展潜能被限制。

所有文章只能按某个技术发现粗略的分类。同话题的文章随便搜索一下,就有几十上百篇相关文章。这样的设定确实能潜在的激励作者继续发表文章,增加平台内容的丰富度。但是没有快速的分类导航,也增加了用户在站点内随意流串的可能性。这样做确实能增加网站 pv,增加站点的收入。但这决定了掘金无法成为一个适合开发者学习专业知识的地方,只是做为了一个资讯类聚合网站。作者们也会用脚投票,把站点作为自身信息分发的渠道。对自媒体作者而言,平台成为自身积累粉丝赚钱的手段。对专业作者而言,平台价值不高。对读者来说,网站可能就是众多摸鱼站点之一。

小米电视去广告

ADB 停用应用

1、打开开发模式

  • 小米电视设置 – 关于 – 产品型号 – 点确定键
  • 小米电视设置 – 账号及安全 – 打开 ADB 调试
  • 小米电视设置 – 无线/有线 – 选择你已经连接的网络 – IPV4地址就是你电视的IP

2、连接电视

  • adb connect 192.168.2.10:5555

3、停用命令

adb shell pm uninstall --user 0 com.pptv.tvsports.preinstall

下面是功能对照表

建议清除

adb shell pm uninstall --user 0 com.xm.webcontent # 电视活动中心
adb shell pm uninstall --user 0 com.sogou.speech.offlineservice # 搜狗离线语音识别引擎
adb shell pm uninstall --user 0 com.xiaomi.tweather # 天气
adb shell pm uninstall --user 0 com.xiaomi.mimusic2 # 本地音乐播放器
adb shell pm uninstall --user 0 com.mitv.videoplayer # 小米TV播放器
adb shell pm uninstall --user 0 com.android.providers.downloads # 下载管理程序
adb shell pm uninstall --user 0 com.xiaomi.mitv.handbook # 用户手册
adb shell pm uninstall --user 0 com.android.certinstaller # 证书安装
adb shell pm uninstall --user 0 com.android.captiveportallogin # wifi认证
adb shell pm uninstall --user 0 com.mitv.appstore.component.land # 应用商店内容land
adb shell pm uninstall --user 0 com.xiaomi.mitv.tvmanager # 电视管家
adb shell pm uninstall --user 0 com.mitv.alarmcenter # 定时提醒
adb shell pm uninstall --user 0 com.xiaomi.mitv.calendar # 日历
adb shell pm uninstall --user 0 com.mitv.gallery # 相册
adb shell pm uninstall --user 0 com.xiaomi.gamecenter.sdk.service.mibox # 小米服务安全插件
adb shell pm uninstall --user 0 com.mitv.care # adcare
adb shell pm uninstall --user 0 com.xiaomi.mitv.karaoke.service # 卡拉OK服务
adb shell pm uninstall --user 0 com.xiaomi.miplay # MIOTHOST
adb shell pm uninstall --user 0 com.xiaomi.mibox.gamecenter # 游戏中心
adb shell pm uninstall --user 0 com.xiaomi.mitv.upgrade # 系统更新
adb shell pm uninstall --user 0 com.xiaomi.account # 小米帐号
adb shell pm uninstall --user 0 com.droidlogic # droidlogic系统
adb shell pm uninstall --user 0 com.xiaomi.mitv.payment # 小米支付
adb shell pm uninstall --user 0 com.xiaomi.mitv.pay # 电视支付
adb shell pm uninstall --user 0 com.xiaomi.tv.appupgrade # 应用更新
adb shell pm uninstall --user 0 com.android.vpndialogs # VPN
adb shell pm uninstall --user 0 com.xiaomi.mitv.tvpush.tvpushservice # 电视推送
adb shell pm uninstall --user 0 com.xiaomi.account.auth # 小米帐号授权
adb shell pm uninstall --user 0 com.xiaomi.statistic # 统计
adb shell pm uninstall --user 0 com.mipay.wallet.tv # 小米钱包
adb shell pm uninstall --user 0 com.xiaomi.smarthome.tv # 米家
adb shell pm uninstall --user 0 com.xiaomi.mitv.appstore # 应用商店
adb shell pm uninstall --user 0 com.miui.tv.analytics # 分析
adb shell pm uninstall --user 0 com.xiaomi.mitv.shop # 小米商城
adb shell pm uninstall --user 0 com.xiaomi.devicereport # 设备报告
adb shell pm uninstall --user 0 com.xiaomi.mibox.lockscreen # 锁屏
adb shell pm uninstall --user 0 com.mi.umi # 小米音响服务
adb shell pm uninstall --user 0 com.mi.umifrontend # 音响前端
adb shell pm uninstall --user 0 com.android.proxyhandler # 代理
adb shell pm uninstall --user 0 com.xiaomi.mitv.advertise # 广告应用
adb shell pm uninstall --user 0 com.android.location.fused # 一体化位置信息
adb shell pm uninstall --user 0 com.xiaomi.screenrecorder # 录屏
adb shell pm uninstall --user 0 com.miui.systemAdSolution # 去除开机广告
adb shell pm uninstall --user 0 com.xiaomi.tv.gallery # 时尚画报
adb shell pm uninstall --user 0 com.duokan.videodaily # 今日头屏
adb shell pm uninstall --user 0 com.pptv.tvsports.preinstall
adb shell pm uninstall --user 0 com.pplive.atv

不建议清除

adb shell pm uninstall --user 0 com.mitv.screensaver # 智能屏保
adb shell pm uninstall --user 0 com.android.packageinstaller # 软件包安装程序
adb shell pm uninstall --user 0 com.sohu.inputmethod.sogou.tv # 搜狗输入法
adb shell pm uninstall --user 0 com.mitv.mivideoplayer # 小米电视播放器
adb shell pm uninstall --user 0 com.pacprocessor # pacprocessor
adb shell pm uninstall --user 0 com.xiaomi.mitv.mediaexplorer # 高清播放器
adb shell pm uninstall --user 0 com.android.bluetooth # 蓝牙共享
adb shell pm uninstall --user 0 com.xiaomi.mitv.tvplayer # 模拟电视
adb shell pm uninstall --user 0 com.xiaomi.upnp # upnp
adb shell pm uninstall --user 0 com.xiaomi.mitv.smartshare # 无线投屏
adb shell pm uninstall --user 0 com.xiaomi.milink.udt # 米联
adb shell pm uninstall --user 0 com.mi.miplay.mitvupnpsink # upnpapp
adb shell pm uninstall --user 0 com.xiaomi.dlnatvservice # DLNA连接
adb shell pm uninstall --user 0 com.xiaomi.mitv.assistant.manual # 投屏神器
adb shell pm uninstall --user 0 com.duokan.airkan.tvbox # milink服务
adb shell pm uninstall --user 0 com.android.statementservice # AppLinks功能
adb shell pm uninstall --user 0 com.mitv.tvhome # 桌面
adb shell pm uninstall --user 0 mitv.service # 无说明未测试
adb shell pm uninstall --user 0 com.xiaomi.mitv.service # 无说明未测试

更新时间:2021-02-15

zsh autosuggestions 插件引起黏贴变慢问题修复

zsh 开启 autosuggestions 插件的时候,在终端中的黏贴操作变的非常慢,在 .zshrc 配置里加入下面的代码可以修复这个问题

# This speeds up pasting w/ autosuggest
# https://github.com/zsh-users/zsh-autosuggestions/issues/238
pasteinit() {
  OLD_SELF_INSERT=${${(s.:.)widgets[self-insert]}[2,3]}
  zle -N self-insert url-quote-magic # I wonder if you'd need .url-quote-magic?
}
pastefinish() {
  zle -N self-insert $OLD_SELF_INSERT
}
zstyle :bracketed-paste-magic paste-init pasteinit
zstyle :bracketed-paste-magic paste-finish pastefinish

参考:https://github.com/zsh-users/zsh-autosuggestions/issues/238

NODEJS 命令行工具开发简介

SHELL可执行脚本

写一个 shell 命令行脚本。

# test001.sh
echo "Hello World !"

如何运行这个脚本?

sh test001.sh

这还不是一个命令行工具,这里命令行工具是 sh,test001.sh 是这个工具的一个参数。

如何转转换成命令行工具?

# test001.sh
#!/bin/bash
echo "Hello World !"
chmod +x test001.sh

以命令行工具的形式执行。

./test001.sh

和平常的命令行工具有点不一样?

重命名成 test001,放入系统路径中,就可以直接用 test001 全局执行命令。

export PATH="/usr/local/opt/ruby/bin:$PATH"

复杂多文件的情况?

test001
|--bin/
|----test001
|--lib/
|----...
export PATH="/path/to/test001/bin:$PATH"

扩展一

cat /etc/shells
# List of acceptable shells for chpass(1).
# Ftpd will not allow users to connect who are not using
# one of these shells.
# /bin/false was added for FTP users that do not have a home directory.
/bin/bash
/bin/csh
/bin/ksh
/bin/sh
/bin/tcsh
/bin/zsh
/usr/bin/false

扩展二

#!/usr/bin/env shell

1、兼容性,/usr/bin/env 从系统路径中查找脚本解释器路径

2、/usr/bin/env 有 -S -P 参数,可以指定其他查找路径

#!/usr/bin/env -S -P /custom/search/path:${PATH} bash

NODEJS 可执行脚本

同理

# test002.js
console.log('hello world');
node test002.js
# test002.js
#!/usr/bin/env node
console.log('hello world');
chmod +x test002.js 
./test002.js

去扩展名,复杂多文件的情况?

# aveng/meili-all-fwtool-aides Aides 3 项目
.
├── bin
│   ├── aides
│   ├── aides_application
│   ├── aides_component
│   ├── aides_fwtool
│   ├── enums
│   └── tools
├── jsconfig.json
├── lib
│   ├── application
│   ├── commons
│   ├── component
│   ├── fwtool
│   └── index.js
├── node_modules
|   |...
├── package-lock.json
├── package.json
├── src
│   ├── application
│   ├── commons
│   ├── component
│   ├── fwtool
│   └── index.js
├── README.md
└── yarn.lock

扩展一

对 nodejs 命令行工具,不需要手动设置系统路径

{
  "name": "test002",
  "bin": {
    "test002": "path/to/entry\ file"
  }
}
npm link

NODEJS 命令行工具开发

获取命令行参数

1、普通方式

在 nodejs 脚本中,通过 process.argv 获取命令行参数,process.argv 是个数组:

#!/usr/bin/env node
console.log('process.argv: ', process.argv);
node test001.js -a -b -c -d 123 --aaa --bbb --ccc --ddd 123 456
process.argv:  [ '/usr/local/Cellar/node/11.3.0_1/bin/node',
  '/Users/eqielb/Test/test/test001.js',
  '-a',
  '-b',
  '-c',
  '-d',
  '123',
  '--aaa',
  '--bbb',
  '--ccc',
  '--ddd',
  '123',
  '456' ]
./test001.js -a -b -c -d 123 --aaa --bbb --ccc --ddd 123 456

输出结果是一样的。

2、commander 模块

手动分析管理参数非常麻烦,可以使用 commander 模块

https://www.npmjs.com/package/commander

3、 yargs 模块

https://www.npmjs.com/package/yargs

4、 minimist 模块

https://www.npmjs.com/package/minimist

5、模块对比

调用系统其他命令

1、基础模块

可以通过 nodejs 的 child_process 模块,新建子进程执行其他命令

#!/usr/bin/env node
var name = process.argv[2];
var exec = require('child_process').exec;

var child = exec('echo hello ' + name, function(err, stdout, stderr) {
    if (err) throw err;
    console.log(stdout);
});
2、通用模块

如:安装 shelljs 模块

#!/usr/bin/env node
var name = process.argv[2];
var shell = require("shelljs");

shell.exec("echo hello " + name);

如:安装 execa 模块

const execa = require('execa');

(async () => {
    const {stdout} = await execa('echo', ['unicorns']);
    console.log(stdout);
    //=> 'unicorns'
})();

模块对比:

3、特定模块

如: 安装 nodegit 模块

var Git = require("nodegit");
// Clone a given repository into the ./tmp folder.
Git.Clone("https://github.com/nodegit/nodegit", "./tmp")
    // Look up this known commit.
    .then(function(repo) {
        // Use a known commit sha from this repository.
        return repo.getCommit("59b20b8d5c6ff8d09518454d4dd8b7b30f095ab5");
    })

命令行交互

1、inquirer 包

美化控制台输出

1、chalk、colors 包

2、ora 包、cli-spinners

3、blessed-contrib 包

https://github.com/yaronn/blessed-contrib

4、命令行字体 figlet

 _ __ ___    ___    __ _  _   _
| '_  _ \  / _ \  / _ || | | |
| | | | | || (_) || (_| || |_| |
|_| |_| |_| \___/  \__, | \__,_|
                   |___/

其他事项

1、返回值

根据 Unix 传统,程序执行成功返回 0,否则返回 1 。

if (err) {
    process.exit(1);
} else {
    process.exit(0);
}
process.exitCode = 1; 
process.exit(); // 默认情况下 exitCode 是 0

扩展一

process.exit 有回调方法

process.on('exit', (code) => {
   // 同步方法 
    console.log(About to exit with code: ${</span><span class="cm-variable-2">code</span><span class="cm-string-2">});
});

扩展二

一般情况下,不建议直接调用 process.exit() 方法,直接调用会导致异步方法中断。需要手动异常退出的话,可以设置 process.exitCode ,并抛出 uncaught error,让进程根据异常自动退出。

2、重定向
ps aux | grep 'node'

nodejs 中实现这种功能

process.stdin.resume();
process.stdin.setEncoding('utf8');
process.stdin.on('data', function(data) {
    process.stdout.write(data);
});
3、系统信号

接受系统信号

process.on('SIGINT', function () {
  console.log('Got a SIGINT');
  process.exit(0);
});

发送系统信号

kill -s SIGINT [process_id]

扩展

这些功能开发不太常用,运维会用到,看公司发布系统的脚本

发布

命令行工具就是一个 npm 包,执行 npm publish 进行发布,npm i 安装后就可以使用。

NODEJS 命令行工具应用举例

1、主机管理

aws、google cloud、aliyun、qcloud 等都支持 oauth 2.0认证,可以命令行下做验证通过命令行管理服务。

2、命令行爬虫

3、自动提交表单

Ansible 简单介绍

最近迁移一个公益网站 http://www.tongdelove.com 到一台新的 VPS 上。原来安装 nignx,php,mysql 等繁琐的操作已经被 docker 取代了,但是麻烦的还是需要手动连上服务器,安装 docker 服务,rsync 项目到服务器上,还是麻烦。所以查询了下有没有什么解决方案。
了解到现在比较常用的是 Ansible 工具。Ansible是—基于 Python paramiko 开发,分布式,无需客户端,轻量级,配置语法使用 YMAL 及 Jinja2模板语言,更强的远程命令执行操作。在了解 Ansible 之前,我也听过 Puppet 、fabric等工具,但看起来像是比较专业的运维管理工具,也比较复杂,没有深入去研究。但是 Ansible 一看非常简单,几行命令就跑了环境。
Ansible 直接基于 ssh 协议 和 python,不需要在服务器上安装特定的客户端。一般开发者个人用的 VPS 已经和开发机配置有 ssh 密钥自动登录,直接在开发机上安装个 ansible 就可以了。如果是苹果电脑,执行下 brew install ansible 就完成了。
Ansible 有 3 个配置文件 /etc/ansible/hosts、/etc/ansible/roles、/etc/ansible/ansible.cfg
有command、cron、user、group、file、ping、service、shell、script、yum、setup等几个常用模块。
执行 ansible <host-pattern> [-f forks] [-m module_name] [-a args]  传入 module_name 模块名就可以调用到服务器上对应的各个功能,非常方便。host-pattern 还可以按分组或者单台服务器去执行命令。
当然初次尝试也不是一帆风顺的,我把遇到的一些问题记录在语雀上了,遇到问题的话,可以参考下看有没有相同的问题:https://www.yuque.com/wuwb/ops/ansible
具体如何使用,本文就不展开讲了,官方文档,或者社区有很多教程,ansible 比较简单,看下就差不多了。

普吉岛旅游小记

理想是每年能去一次长途旅行的,这样活到70岁也不过去了40来个地方。40个地方,和那么多国家,那么多美丽的地方比,有些微不足道。只能加倍努力赚更多的钱啦。
去年和前年,借着公司的 outing,去了柬埔寨和日本。去年和今年,公司业绩不好,原本的长途旅行换成了郊游,去年去了舟山。而今年还没决定去哪里,公司补贴已经从 3500 元砍到了 1000 元。这么少的补贴下,那些不愿意自己出打钱的同事都选择了杭州周边的郊游。最多的是选择去千岛湖希尔顿酒店躺尸。
我对公司的Outing已经不报什么希望了,所以自力更生筹划了自己的长途旅游。
本来以为出去玩还是挺麻烦的,自己这样的流程走下来,发现真的是非常方便。
1、淘宝办理签证,加急,318 元一个人,另外送一张有效期 7 天的泰国手机卡。正好可以用来在境外打电话上网。
2、深圳航空官网预定机票。临时决定的出游,没有提前预定便宜的机票,预定的时候机票已经没有多少折扣了。为了便宜几块钱,选择了转机票,到广州转机。另外两张票一起定竟然比分开分别定要贵。还好我机智看出来其中的差别,选择了分开预定,省下了 200 块钱。
3、携程预订酒店,出去玩 8 天,定了 7 晚的酒店。第一天到酒店是凌晨 2 点多,12点就要退房了,就几个小时,也要三百多块钱,感觉非常不值,但是这么晚也没地方去,只能先定了。最终那天由于飞机晚点等原因,到酒店时候将近 4 点钟,那个时间点,要是每个床睡一觉,笔者这样的老年人也是受不了。
4、马蜂窝预定游玩项目。预定了个皮皮岛浮潜一日游。
5、预定机场接机。普吉岛机场到酒店还是有些距离的,人生地不熟,到站后再找出租车的话比较麻烦,而且是半夜的飞机,查了看机场已经没有合法营运的出租车了,一些黑车价格非常高。提前预定一个接机可以省很多事情。在马蜂窝预定皮皮岛项目的时候送了个加价购的权益,加 18 元送接机服务。顺手加购了一个。接机的是一辆小轿车,不限人数和行李,只要塞得下都可以。
准备的就这些啦。行李什么的就比较简单了
1、穿。泳装、夏装、帽子、雨伞,防嗮手臂护套,防晒围巾,拖鞋。
2、清洁。沐浴露、洗发露、防晒霜、老婆的各种化妆品、防蚊液。
3、吃。坐车坐飞机酒店吃的零食等。
4、手机充电器充电宝。
普吉岛玩的总体上是非常悠闲的。就是沙滩,逛街,夜市,游泳,浮潜。没有像去柬埔寨那要可以看到很多壮观靓丽的景色,没有像日本一样琳琅满目的商品。体验是比较平平,和国内的三亚也差不多。
一天的行程基本是睡到差不多自然醒,下楼吃酒店最后一班早餐。然后出门小镇里逛下一只逛到沙滩。蹚一会儿海水,再回镇上逛一会儿,吃午饭。接着再逛一会儿。等到脚差不多有点累了,就回酒店躺一会儿,然后下楼酒店泳池游泳。游泳完出门吃完饭。吃完逛夜市。差不多就是这样,非常悠闲。
下次去旅游的话,肯定不会再选择这种海边度假的方式了。虽然非常轻松,但笔者这样喜欢新鲜的事物的人来说,这样的游玩显得比较单调。

vert.x 简单介绍

Vert.x is a tool-kit for building reactive applications on the JVM
Vert.x 是用于在JVM上构建响应式应用程序的工具包
今天看公司配置服务中心代码的时候,看到项目底层是用 vert.x 实现的。
笔者对 java 不太熟,随便搜索了解下。
1、先看下官方介绍
1.1、Scale 事件驱动,非阻塞模型,支持高并发。
1.2、多语种支持。支持 Java, JavaScript, Groovy, Ruby, Ceylon, Scala 和 Kotlin 等不同语言。
1.3、灵活。大小项目都适用。很多公司用来做实时游戏开发。不限制框架或容器,可以灵活创建应用。
2、再看下使用方法
代码看起来和 nodejs 非常像,类似于一个运行在 jvm 上的 nodejs
HttpServer server = vertx.createHttpServer();
server.requestHandler(request -> {
// This handler gets called for each request that arrives on the server
HttpServerResponse response = request.response();
response.putHeader("content-type", "text/plain");
// Write to the response and end it
response.end("Hello World!");
});
server.listen(8080);

Vert.x 底层使用 netty,但比 netty 要简单,支持 cluster。
光是看看这些介绍,还是不了解实际的使用场景是什么。
参考:
https://vertx.io/
https://leokongwq.github.io/2017/11/22/vertx-http-server-analyze.html
https://www.zhihu.com/question/22021343
https://www.cnblogs.com/rongfengliang/p/3531110.html
https://github.com/codefollower/My-Blog/issues/10
https://www.jianshu.com/p/2ab64267ae2c

position sticky 失效问题

写了个图墙组件,其中用到了 sticky 做滚动固定。测试发现部分使用情况下会失效。搜了下,看到下面情况会导致 sticky 失效:
1、具有 sticky 属性的元素,其父级高度必须大于sticky元素的高度。
2、sticky 元素的底部,不能和父级底部重叠。
3、sticky 元素的父级不能含有 overflow:hidden 和 overflow:auto 属性。
4、必须具有 top,或 bottom 属性。
对应排查后,发现父元素上使用了 overflow:hidden,去除后问题修复了。