茶无味的一天

node.js 初探Node.js 是一个 JS 的服务端运行环境，简单的来说，它是在 JS 语言规范的基础上，封装了一些服务端的运行时对象，让我们能够简单实现非常多的业务功能。 如果我们只使用 JS 的话，实际上只是能进行一些简单的逻辑运算。node.js 就是基于 JS 语法增加与操作系统之间的交互。 node.js 的安装我们可以使用多种方式来安装 node.js，node.js 本质上也是一种软件，我们可以使用直接下载二进制安装文件安装，通过系统包管理进行安装或者通过源码自行编译均可。 一般来讲，对于个人开发的电脑，我们推荐直接通过 node.js 官网的二进制安装文件来安装。对于打包上线的一些 node.js 环境，也可以通过二进制编译的形式来安装。 安装成功之后，我们的 node 命令就会自动加入我们的系统环境变量 path 中，我们就能直接在全局使用 node 命令访问到我们刚才安装的 node 可执行命令行工具。 node.js 版本切换在个人电脑上，我们可以安装一些工具，对 node.js 版本进行切换，例如 nvm 和 n。 nvm 的全称就是 node vers ...

什么是工程化?什么是前端工程化?随着发展的逐步发展，作为工程师除了需要关注需要写的⻚面，样式和逻辑之外，还需要面对日益复杂 的系统性问题，比如模块化文件的组织、ES6 JS 文件的编译、打包压缩所有的 JS 代码、优化和合并图片静态资源等等事情。 我们的项目需要以一种合理的方式进行组合，以应对在团队协作、需求迭代中保持项目 的稳定发展。这种方式就是工程化系统去运行我们的项目。 例如如下图所示就是前端工程化中一次打包的过程，左侧就是我们项目中出现的源文件，例如我们会通 过 sass 这种预处理样式来更好的组织我们的样式代码，使用各类其他语言比如 typescript、coffescript 等来书写我们的逻辑脚本。在最终上线时，我们需要把我们的这类文件，转化为能够在线上直接被浏览 器识别的 css 和 js 。 这种使用工程化思维，以工具的形式来进行上述过程的，就是前端方面的工程化。 一句话总结就是，前端工程化，就是在使用工具处理那些与实际业务无关的内容，比如处理 JS 编译、打包、压缩、图片合并优化等等各个方面的工程性代码。 前端工程化具体类目包管理工具对于一⻔成熟的语言来说，在有语言 ...

在以前，我们已经习惯了基于纯打包的开发方式，但是这种方式在实现过程中会有很多问题。首先，打包就意味着整个应用需要先打包好，浏览器和服务器才能启动，然后才能看到效果；其次，当应用中有很多的依赖时，初始化打包过程就会变得异常缓慢。 Vite基于此现状了一些改变，首先，它把整个应用拆分成了源代码层和依赖层，只要版本锁定，依赖里的代码就不会变，也就没有必要做热更新、保留细粒度的模块，Vite完全舍弃了对依赖的频繁处理过程。如果依赖很大，使用第三方打包器耗时会很久，而采用原生代码写的JS打包器，比如 esbuild，就可以快几十倍；其次，对于源代码，则是通过原生 ES modules 来做热更新，确保热更新的速度跟项目大小解耦（当然初次启动的速度还是会跟项目大小挂钩）。 回头看去年的时候，Vite势头正足，尤大曾多次在各个社区论坛表示过这个新的打包神器将会成为趋势，从谷歌搜索指数上来看在去年也确实非常活跃： 使用体验我从 Vite2.0 开始使用在实际项目当中，由于当时负责的项目是saas系统中的一个新板块，可以允许我使用新技术来开发，于是就上了vite，不得不说开发体验是真的好，但由于项目本身 ...

本文记录我对微前端原理的探索与思考，以及微前端框架qiankun项目实践。 当下前端所存在的一些问题 在技术浪潮的推动下，由vue、react所主导的单页面应用已成为主流，但在开发中，随着业务的深入和项目的复杂，带来了逻辑定位问题、打包速度问题、部署上线等等问题，往往我们可能只是更改了一行JS代码，到最后发布的时候，整个项目却要整个重新打包编译发布。 公司可能存在旧系统框架开发维护的项目，我们需要对以前的项目进行迭代或维护的时候，就不得不适应之前项目的开发环境，如果想要使用新技术，将会遇到阻碍。 单页面应用在应对大型项目的场景下，不可避免的会造成用户在首次进入的时候加载时间较长，因为几乎所有JS都在打包在一起，即使采用路由懒加载的技术进行优化，也依然无法避免这其中产生的DNS解析、三次握手、网络传输、代码解析等耗费的时间代价。 我们所希望的 能够使各个子模块或者子系统进行隔离。我们在开发或更新一个子模块的时候，只需要对这个子模块单独进行打包，发布上线，而不会影响到其他模块。各个子系统由于相互隔离，不会受限于技术栈的影响，更加轻量化，打包速度，前端性能等也会上去。 能够使各个子系 ...

事情的起因还要从某天突然发现服务有明显异常的访问记录说起，虽然我这1核2鸡的小机器没什么攻击的价值，但也有了部署一套监控系统的想法。 ↓ 这仅是免费CDN静态加速的记录。 一番简单的调研之后，我发现主流的日志监控系统为ELK组合(Elasticsearch, Logstash, Kibana)，还有Prometheus体系等，但这些相对而言有着较高学习成本与资源占用，适合复杂场景与企业级别使用，不太适合个人使用，于是最终我选择了曾经的老朋友Grafana作为基础快速搭建起轻量可扩展的日志监控系统。 Grafana本身支持多种数据对接，扩展性极高，本文不深入展开，所有监控指标围绕着Nginx，因为我的服务都是通过Nginx来代理端口的，所以日志的数据源由Nginx提供，但Nginx提供的log只是一个文本文件，我们要解析文本内的数据来进行分析，也可以解析转换为其他日志堆栈来获得更好的数据处理能力，这里我使用了Grafana团队自研的Loki来作为数据堆栈，Loki同时提供了一个代理服务，负责将日志进行解析和推送。 部署之后的默认界面展示，什么都没做的情况下这个界面也算有点味了： D ...

最近开始频繁尝试着如火如荼的Vue3，于是开始对之前随手写的Ant Design后台下手了，准备使用Vue3 + Element Plus 重构一波，但是之前用来写博客文章的MD编辑器还不适配Vue3，于是只好赶紧找了一个替代工具，用了一下感觉还不错，非常适合个人快速开发属于自己的编辑器。 快速开始12345# 使用 npmnpm i @kangc/v-md-editor@next -S# 使用 yarnyarn add @kangc/v-md-editor@next 引入配置在入口文件处配置 （如 main.ts ） 12import VMdEditor from '@kangc/v-md-editor'import githubTheme from '@kangc/v-md-editor/lib/theme/github.js' // 主题 引入代码高亮： 12345678// import hljs from 'highlight.js' // 引入全部import hljs from ' ...

假设在一个列表中，用户滑动几页点击了详情，此时若再回到列表页，页面状态都已经刷新，用户又需要再进行滑动，这显然是不合理的。 在PC端我们有很多天然优势可以处理这类问题，比如使用分页器让列表不要过长，比如打开详情跳转个新标签页，又或者将详情页面做成抽屉，做成遮罩弹窗等等。。但是在移动端开发中，我们无法避免这个问题，所以有时候就必须记录下页面的状态，让用户在返回时保持页面原有的样子。 在Vue中，我们可以很方便的使用keep-alive来缓存页面，通常情况下，我们可以通过如下方式改写路由视图： 1234<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view></keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 如上使用了两个if判断，不然会不生效 12345<!-- 错误写法： -->& ...

0. 背景介绍：移动端混合开发，APP中90%的内容均为内嵌H5，由于种种原因，我在客户端内无法使用单页面路由跳转，只能新开窗口跳转页面，于是被迫形成了“多页面”的情形。（即使是连贯的页面） 1. 需求场景例如当处于一个列表中，此时点击某一项跳转至详情进行操作，并改变了这一项的状态，那么列表也需要同步改变该项的状态。（此时列表与详情是两个webview） 最终实现效果：（使用两个标签页模拟真机情况） 2. 问题思考既然是多页面，Vue中的各种通信方式就用不了了，首先想到的是小程序的onShow()生命周期，我们的APP也提供了类似的协议方法，意味着H5页面中可以监听到页面重回，但是该方式依赖原生，且正常情况下也无法做到数据通信，页面重回时直接重新请求新数据会导致整个页面刷新，方案pass。 3. 最终解决方案localStorage是我前端开发中最常用到的数据持久储存方案没有之一，在同源情况下，完全可以作为多页面之间的数据通信桥梁，我决定采用发布订阅模式，编写一个eventBus，来解耦多页面之间的通信，使用window原生的事件监听充当事件总栈，监听localStorage的变动并 ...

在做商城类项目的时候，我们可能都会经历过“优惠券”这类需求，笔者在过往工作中，都是直接要求UI切图来实现，直到有一天产品告诉我一个奇思妙想：这个优惠券的宽度会随内容变化的！一下子让我陷入了人生的大思考，这样图片方式可不好整呐，因此萌生一个想法：能不能用纯css实现这些效果呢？ 0. 内倒角首先我们来看下css如何实现内倒角 1234567891011.card { width: 200px; height: 100px; position: relative; background-image: radial-gradient(circle at left 50px, #fff, #fff 10px, transparent 10px), radial-gradient(circle at right 50px, #fff, #fff 10px, transparent 11px), radial-gradient(circle at 100px top, #fff, #fff 10px, transpare ...

前段时间在用框架开发H5页面时，碰到框架中的组件内置了一个属性用于适配异形屏，虽然是组件内部实现的，但这个方式让我萌生一个想法：能不能自己写一个属性来实现这样的功能？ 经过一番思索，我发现Vue的指令模式就很像属性的写法，在Vue中，我们利用模板指令诸如v-if v-for等完成了许多工作，而Vue同样也支持自定义属性： 123456789const app = Vue.createApp({})// 注册一个全局自定义指令 `v-focus`app.directive('focus', { // 当被绑定的元素挂载到 DOM 中时…… mounted(el) { // 聚焦元素 el.focus() }}) 然后你可以在模板中任何元素上使用新的 v-focus attribute，如下 1<input v-focus /> 注：这里除了全局注册，也可以采用局部注册的方式，实际开发中可以使用vue另一项方便的功能mixin来将对应的指令混入你想使用的文件中，以达到代码的复用 ...