![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 90
关注前端小帅
永远期待美好的事情将会发生~
展开
-
性能爆表的SolidJS
使用预编译、无虚拟DOM、究极融合怪、性能爆表、React的异父异母亲兄弟——SolidJS原创 2022-12-11 23:15:05 · 617 阅读 · 1 评论 -
【前端组件化】系列文章第一篇——方案探究
这种方式,总体来说还是比较原始的,无论从沟通方式的效率来说,还是对于组件业务逻辑的深入理解都是非常低效的。因此,对于探索一种高效的、简单的、现代化方案是非常有必要的。原创 2022-12-11 22:45:45 · 399 阅读 · 0 评论 -
使用json、yaml、toml作为配置文件,你知道他们的区别吗
前端领域使用最广的JSON文件格式,以及在k8s领域大显身手的yaml文件格式,最近兴起的toml文件格式。他们的区别是什么?各自的优势又是什么?有什么缺点呢?作为配置文件使用的区别又是什么呢?原创 2022-12-11 22:23:08 · 912 阅读 · 0 评论 -
vite + vue3 + ts 使用总结
现阶段开发 `vue3` 项目使用 `vite` + `ts` 应该已成为标准范式了吧,新的语法体验 `vue composition api` 再配合 `script setup` 谁用谁知道啊,开发和构建方面,`vite` 作为下一代构建工具,想必大家也有所了解,使用 `ES6 module` + `ESbuild` 支持本地开发,速度和效率起飞啊,就一个字——爽,对于 `TypeScript`,感觉都没必要说了,现在还没上车的赶紧的了~原创 2022-01-17 15:22:54 · 1978 阅读 · 0 评论 -
vite + vue3 + setup + pinia + ts 项目实战
一个使用 `vite` + `vue3` + `pinia` + `ant-design-vue` + `typescript` 完整技术路线开发的项目,秒级开发更新启动、新的`vue3 composition api` 结合 `setup`纵享丝滑般的开发体验、全新的 `pinia`状态管理器和优秀的设计体验(`1k`的size)、`antd`无障碍过渡使用UI组件库 `ant-design-vue`、安全高效的 `typescript`类型支持、代码规范验证、多级别的权限管理~原创 2022-01-17 15:21:44 · 3528 阅读 · 0 评论 -
JavaScript事件通信研究之自定义事件
前言公司前段时间开发A项目的时候,因为A项目涉及的模块比较多,而且好多又是具有相当独立性等特点的,比如编辑器模块、可视化编辑模块、动态表单自定义配置模块、导航栏及权限页面配置模块等。而且,部分功能模块在B项目、C项目等中也有使用到,所以,综合考虑,这些模块还是作为单独组件模块开发比较合适,通过统一的包管理,如npm,可以方便其他人员和项目快速添加使用,避免重复劳动,也避免复制粘贴这种不易维护和稳定以及同步更新的麻烦~其中,有不少场景是需要跨组件模块传值的。而我们使用组件的常规方式基本是通过 impor原创 2021-09-16 21:48:25 · 204 阅读 · 0 评论 -
CSS布局flex、position、display、visibility、opacity分析
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的总和超出容器空间时,原创 2021-09-13 22:11:49 · 572 阅读 · 0 评论 -
JavaScript加减乘除精度问题
众所周知的 JS 二进制精度问题,特别是乘除法精确小数位计算的时候尤其容易出现。原理看下面链接详细说明,这里我们采用 JS 原生方法处理这个问题,不过也有专门的类库提供选择。原理分析、类库选择1. 类库 Math.js查看包体积大小可以查看我的这篇文章:npm 包体积介绍:Math.js 是专门为 JavaScript 和 Node.js 提供的一个广泛的数学库。特点:它具有灵活的表达式解析器,支持符号计算,配有大量内置函数和常量,并提供集成解决方案来处理不同的数据类型。像数字,大数字(.原创 2021-09-13 22:06:15 · 1165 阅读 · 0 评论 -
JavaScript类型检测的四种方式
类型检测的四种方式1.typeof 方法对于引用类型Arrary、Null、[]、{} 都会返回 object ,若对 object 无严格要求可以简单使用。console.log(typeof "hello"); //stringconsole.log(typeof null); //objectconsole.log(typeof []); //objectconsole.log(typeof {}); //object2. instanceof 方法不建议使用,问题有点多,尤原创 2021-09-13 22:04:17 · 246 阅读 · 0 评论 -
JavaScript事件通信研究
前言公司前段时间开发A项目的时候,因为A项目涉及的模块比较多,而且好多又是具有相当独立性等特点的,比如编辑器模块、可视化编辑模块、动态表单自定义配置模块、导航栏及权限页面配置模块等。而且,部分功能模块在B项目、C项目等中也有使用到,所以,综合考虑,这些模块还是作为单独组件模块开发比较合适,通过统一的包管理,如npm,可以方便其他人员和项目快速添加使用,避免重复劳动,也避免复制粘贴这种不易维护和稳定以及同步更新的麻烦~其中,有不少场景是需要跨组件模块传值的。而我们使用组件的常规方式基本是通过 impor原创 2021-09-13 22:00:47 · 243 阅读 · 0 评论 -
发布订阅模式vs观察者模式
背景最近在研究react的状态管理器zustand时,研究源码时发现其组件注册绑定是通过观察者模式结合react hooks实现更新的。而联想之前写vue的时候,经常会用到vue内置的自定义事件进行组件通信($emit/on),这个应该是发布订阅模式,搞得我有点头大,感觉这两种模式又十分相似,自己也是有点迷糊,感觉没有理解透,因此,这次就顺势深入研究下这两种模式,再尝试自己手写实现加深下理解。这篇文章是我个人的梳理心得,如有错误欢迎指正,共同进步~对比区别观察者模式:在软件设计中是一个对象,维护一原创 2021-09-13 21:58:39 · 644 阅读 · 0 评论 -
react状态管理器-zustand
特性不需要像redux那样在最外层包裹一层高阶组件,只绑定对应关联组件即可(当在其他组件/方法修改状态后,该组件会自动更新)异步处理也较为简单,与普通函数用法相同支持hook组件使用、组件外使用提供middleware拓展能力(redux、devtools、combine、persist)可通过 https://github.com/mweststrate/immer 拓展能力(实现嵌套更新、日志打印)先来看看用法创建 store// storeimport create from原创 2021-09-13 21:56:48 · 2379 阅读 · 0 评论 -
Webpack + React + TypeScript 构建一个标准化应用
Webpack + React + TypeScript 构建一个标准化应用效果图背景原因之一原因之二原因三开搞目标依赖目录规划ES6+、JSX 、TypeScript 支持JavaScript 语法特性支持React的JSX语法支持TypeScript 支持Antd按需加载、主题定制babel配置按需加载webpack/loader配置antd主题工程化规范配置Eslint代码检查Prettier 代码格式化Stylelint 样式规范Commitlint 代码提交规范vscode 配置HMR 热更新配置原创 2021-09-13 19:37:48 · 880 阅读 · 0 评论 -
Git常用命令
收集、记录、整理一些Git相关使用技巧。gitconfig查看配置信息命令参数--list,简写-l 格式:`gitconfig[–local|–global|–system]-l`//查看仓库级的configgitconfig--local-l//查看全局级的configgitconfig--global-l//查看系统级的configgitconfig--system-l//查看当前生效的配置...原创 2021-09-02 20:51:01 · 125 阅读 · 0 评论