小帅の技术博客

使用预编译、无虚拟DOM、究极融合怪、性能爆表、React的异父异母亲兄弟——SolidJS

这种方式，总体来说还是比较原始的，无论从沟通方式的效率来说，还是对于组件业务逻辑的深入理解都是非常低效的。因此，对于探索一种高效的、简单的、现代化方案是非常有必要的。

前端领域使用最广的JSON文件格式，以及在k8s领域大显身手的yaml文件格式，最近兴起的toml文件格式。他们的区别是什么？各自的优势又是什么？有什么缺点呢？作为配置文件使用的区别又是什么呢？

微信通知，每天给女朋友发早安、情话、诗句、天气信息等~

现阶段开发 `vue3` 项目使用 `vite` + `ts` 应该已成为标准范式了吧，新的语法体验 `vue composition api` 再配合 `script setup` 谁用谁知道啊，开发和构建方面，`vite` 作为下一代构建工具，想必大家也有所了解，使用 `ES6 module` + `ESbuild` 支持本地开发，速度和效率起飞啊，就一个字——爽，对于 `TypeScript`，感觉都没必要说了，现在还没上车的赶紧的了~

一个使用 `vite` + `vue3` + `pinia` + `ant-design-vue` + `typescript` 完整技术路线开发的项目，秒级开发更新启动、新的`vue3 composition api` 结合 `setup`纵享丝滑般的开发体验、全新的 `pinia`状态管理器和优秀的设计体验（`1k`的size）、`antd`无障碍过渡使用UI组件库 `ant-design-vue`、安全高效的 `typescript`类型支持、代码规范验证、多级别的权限管理~

前言公司前段时间开发A项目的时候，因为A项目涉及的模块比较多，而且好多又是具有相当独立性等特点的，比如编辑器模块、可视化编辑模块、动态表单自定义配置模块、导航栏及权限页面配置模块等。而且，部分功能模块在B项目、C项目等中也有使用到，所以，综合考虑，这些模块还是作为单独组件模块开发比较合适，通过统一的包管理，如npm，可以方便其他人员和项目快速添加使用，避免重复劳动，也避免复制粘贴这种不易维护和稳定以及同步更新的麻烦~其中，有不少场景是需要跨组件模块传值的。而我们使用组件的常规方式基本是通过 impor

解放双手，每天自动把博客信息更新至GitHub主页背景最近在弄GitHub主页美化的时候，搞了一些感觉比较好玩有趣的东西，有兴趣的朋友可以看看这里贴个我的主页地址：https://github.com/JS-banana，有兴趣的可以看看~当时在编辑个人信息介绍的时候，产生了一个想法：可以在我的GitHub主页同步我的博客更新状态吗？当我更新博客的时候，我的GitHub主页会自动把我博客最新更新的内容同步过去，很棒啊有没有~这是当时产生的一个想法，后来就研究了一下。最开始是想用nodejs写.

flex:1 解析可以实现均分外层容器空间的效果。flex 是 flex-grow，flex-shrink，flex-basis 三个属性值的缩写flex-grow: 1;flex-shrink: 1;flex-basis: 0%;flex-growflex-grow用于设置各item项按对应比例划分剩余空间，若flex中没有指定flex-grow,则相当于设置了flex-grow:1flex-shrinkflex-shrink用于设置item的总和超出容器空间时，

众所周知的 JS 二进制精度问题，特别是乘除法精确小数位计算的时候尤其容易出现。原理看下面链接详细说明，这里我们采用 JS 原生方法处理这个问题，不过也有专门的类库提供选择。原理分析、类库选择1. 类库 Math.js查看包体积大小可以查看我的这篇文章：npm 包体积介绍：Math.js 是专门为 JavaScript 和 Node.js 提供的一个广泛的数学库。特点：它具有灵活的表达式解析器，支持符号计算，配有大量内置函数和常量，并提供集成解决方案来处理不同的数据类型。像数字，大数字(.

类型检测的四种方式1.typeof 方法对于引用类型Arrary、Null、[]、{} 都会返回 object ,若对 object 无严格要求可以简单使用。console.log(typeof "hello"); //stringconsole.log(typeof null); //objectconsole.log(typeof []); //objectconsole.log(typeof {}); //object2. instanceof 方法不建议使用，问题有点多，尤

前言公司前段时间开发A项目的时候，因为A项目涉及的模块比较多，而且好多又是具有相当独立性等特点的，比如编辑器模块、可视化编辑模块、动态表单自定义配置模块、导航栏及权限页面配置模块等。而且，部分功能模块在B项目、C项目等中也有使用到，所以，综合考虑，这些模块还是作为单独组件模块开发比较合适，通过统一的包管理，如npm，可以方便其他人员和项目快速添加使用，避免重复劳动，也避免复制粘贴这种不易维护和稳定以及同步更新的麻烦~其中，有不少场景是需要跨组件模块传值的。而我们使用组件的常规方式基本是通过 impor

前言什么是GitHub Action、GitHub PageGithub Action 可以帮助您自动完成软件开发周期内的任务，它是事件驱动的，而且已经和GitHub深度整合，可以运行很多GitHub事件，最普遍的是推送到master分支。但是actions并不仅仅只是部署和发布，它们都是容器，毫不夸张地说你可以做任何事情 —— 有着无尽的可能性！你可以用它们压缩合并CSS和JavaScript，有人在你的项目仓库里创建issue的时候向你发送信息，以及更多……没有任何限制。GitHub ..

背景最近在研究react的状态管理器zustand时，研究源码时发现其组件注册绑定是通过观察者模式结合react hooks实现更新的。而联想之前写vue的时候，经常会用到vue内置的自定义事件进行组件通信（$emit/on），这个应该是发布订阅模式，搞得我有点头大，感觉这两种模式又十分相似，自己也是有点迷糊，感觉没有理解透，因此，这次就顺势深入研究下这两种模式，再尝试自己手写实现加深下理解。这篇文章是我个人的梳理心得，如有错误欢迎指正，共同进步~对比区别观察者模式：在软件设计中是一个对象，维护一

特性不需要像redux那样在最外层包裹一层高阶组件，只绑定对应关联组件即可（当在其他组件/方法修改状态后，该组件会自动更新）异步处理也较为简单，与普通函数用法相同支持hook组件使用、组件外使用提供middleware拓展能力（redux、devtools、combine、persist）可通过 https://github.com/mweststrate/immer 拓展能力（实现嵌套更新、日志打印）先来看看用法创建 store// storeimport create from

背景之前公司项目采用的是umi脚手架一体化构建工具，得益于对webpack与各框架的集成和封装，使得快速上手的能力大大加强，但是随着项目的不断迭代与功能增加，依赖的库也是越来越多，目前最明显的感受就是每次启动与打包构建的时长，往往是好几分钟~，热更新有时也要耗费数秒，对于开发效率与体验影响很大。。。之前尤大发布vite1.0时也了解了一点，最明显感受就是一个字“快”，不过一直没仔细研究过，只知道是基于`esbuild`和`rollup`，目前`vite2.0`已经发布，完全作为一个独立的构建工具，对`

背景最近不是在弄博客嘛，之前活动的时候买的阿里云服务器过期了，现在也没优惠了，淦，搬砖党买不起啊，现在就想搞个服务器把我博客弄上去跑起来~我主要就是玩下静态博客和nodejs啥的，对服务端没啥需求，docker和mysql我也不搞，所以就算搞了服务器也是浪费呀，没必要没必要~我白嫖党只是单纯的想要个白嫖的机会????简单说明下我的需求：有个可以部署博客的服务器（当然最好是免费的，这个很重要????）可以和GitHub绑定实现自动化部署（我代码都是放在GitHub的，我提交代码的时候希望可以实

Webpack + React + TypeScript 构建一个标准化应用效果图背景原因之一原因之二原因三开搞目标依赖目录规划ES6+、JSX 、TypeScript 支持JavaScript 语法特性支持React的JSX语法支持TypeScript 支持Antd按需加载、主题定制babel配置按需加载webpack/loader配置antd主题工程化规范配置Eslint代码检查Prettier 代码格式化Stylelint 样式规范Commitlint 代码提交规范vscode 配置HMR 热更新配置

收集、记录、整理一些Git相关使用技巧。gitconfig查看配置信息命令参数--list，简写-l 格式：`gitconfig[–local|–global|–system]-l`//查看仓库级的configgitconfig--local-l//查看全局级的configgitconfig--global-l//查看系统级的configgitconfig--system-l//查看当前生效的配置...

这里以vue项目为例，配置包括但不限于vue项目。其他项目按类似逻辑配置即可。CDN加速分析：通过把类似**echart、element-ui、lodash**等第三方依赖库单独提取出，从而减小打包的体积大小，关键属性`externals`配置后的依赖插件不会被打包进**chunk**。而使用**CDN**加速、缓存也能加快访问速度。操作：这里我们主要通过`chainWebpack`中配置`externals`进行处理。提醒：**对于`exte...