- 博客(195)
- 收藏
- 关注
RSS订阅原创 【工程化】你还在用ESLint+Prettier吗？可以试试antfu的eslint-config，5分钟配置完
为什么我不使用 Prettier (antfu.me)。如果懒得看，或者打不开链接，那我帮大家梳理下~自定义的配置并不是很丰富，这是 Prettier 设计者为了保证所有用户的风格一致化的理念。强制换行和行合并功能有时候反而不合适阅读。与 ESLint 有许多规则冲突。只单纯使用 Prettier 十分合理 - 开箱即用是个很棒的功能。如果你需要使用 ESLint，它也可以像 Prettier 一样格式化代码 - 而且更加可配置。
2024-08-29 10:55:26
889
原创 【场景方案】目前我见过的最容易的主题色切换方案~
最近我在研究换肤方案，在某个UI组件库的源码中，我发现了一个既容易实现又方便使用的方案。现在，我将这个方案分享给大家~Less预处理器CSS变量Color第三方颜色处理库。
2024-04-20 15:05:50
250
原创 【react框架】跟我一起速读Next.js官方入门教学课程文档
对于那些对Next.js一无所知的前端伙伴来说，最佳的快速入门方法无疑是官方提供的交互式入门教程文档。尽管如此，由于官方教程至今未提供中文版本，这无疑增加了中文用户的学习难度。为了帮助大家节省宝贵的时间，我决定亲自深入学习这些材料，并将我所学到的关键信息整理成文。通过阅读我的文章，你也能迅速掌握Next.js的核心要点。当然学Next.js之前你必须会CRA创建的React项目。文档如果有错误欢迎指正！
2024-03-09 21:50:33
1831
原创 【场景方案】前端如何结合GPT提升我们的开发效率，个人经验总结，不定期更新~
在与GPT进行提问时，为了让它能够更准确地理解你的意思，你应该尽量提供详细的问题描述。提一下，国内那些对接了GPT key的套壳网站就没必要去用了，基本上要么充好多钱，要么签到领token。如果对方一直无法给出正确答案，不要再优化提问方式了，立马放弃，自己想办法去解决，不要把自己耗死在里面。以此类推，不断地把api.js这个文件完善，最终咱们得到的就是一个可靠的二次封装方法了。有时候提问的方式合理，容易得到更好的答案，下面我介绍几个提问技巧。了，你们后续的对话主题不是割裂的，出现偏差回答的概率大大降低。
2023-11-07 21:50:58
1225
原创 【react框架】记录一些TypeScript在React中的注意事项，新人值得一看！
自从GPT出现后，这篇文章原来的内容就显得没啥作用了，这也是这这篇文章不常更新的原因。以后我就记录一些使用心得和注意事项。还是值得新人看的import也可以导入，和import type有什么区别呢？import 和 import type的区别我这里也补充一个原因，在一些第三方库中，他们的package.json中有个types字段，值为这个库的tpye定义文件总入口，也就是说当我们用了import type去引入类型的时候，会根据package.json中types指定的文件去找对应的类型。例如。
2023-09-25 15:25:05
281
原创 【场景方案】我所积累的一些跨页面的数据传递方式，持续更新，欢迎补充~
还有一个要注意的，如果postMessage时传入的是框架里的响应式变量是会报错的，传入的时候用…用添加监听器的方式去监听channel的信息传递，这样好销毁内存。当a标签页点击了按钮，b标签页就能够接收到数据。iframe嵌套相同域名的页面应该也是可以正常使用的，不过。这里提个醒sessionStorage每个页签都是独立的。的这个html5特性去跨域传递数据，不受跨域限制。这里推荐篇基础使用文章：【
2023-09-02 11:21:42
284
原创 【react框架】如何手写一个超级mini的React，学完后对框架的理解也会更进一步
本篇文章只是对网站内容，做的一个内容的压缩，结合上自己的理解与想法，告诉已经理解虚拟dom的人怎么去一步一步的写一个超级mini的React。看完后，相信你对框架的理解也会更进一步。有错误欢迎评论指出！以下“网站”一词指代上面的网站（绕口令哈哈）
2023-08-21 22:37:12
328
原创 【JS基础】一些个人积累的原生JS编码设计思想，和大家一起开拓下思维
以下都是我个人遇到的前端JS原生编码设计上的一些案例记录，希望能帮助新手开拓写代码的思想，并且能够结合自己的想法应用在实际的项目中，写出更加易读，拓展，维护的代码。在其中会有一些案例展示，并不是说某个写法只能用于该案例上，要学会举一反三。还有一点就是不要死记这些东西（我自己也记不住，叫我重写都未必能写出），留有个印象就好，等到某天你发现某个场景可以使用到下面的写法时，再对应的拿取用。
2023-08-20 22:34:07
188
原创 【react框架】别把Fiber整得那么难理解，来参考下我是咋理解的，用大白话解释
看b站的视频和网上一些博客，在讲fiber的时候，动不动就上源码解释，各种高大上的概念词汇，对于第一次接触fiber想了解它的人来说极其的不友好。所以我就在网上看了各种文章和视频，结合自己的理解，梳理了一下，写下这一篇用大白话解释fiber的文章，希望能帮助到新人。文中还有很多不严谨的地方，但这都是为了好理解，我认为学习一个东西，要先理解大概，再去补充细节。
2023-08-20 17:45:58
344
原创 【计算机原理交集】看了无数篇文章后，我自己梳理了下浏览器是怎么解析HTML文件的
理解浏览器怎么解析HTML文件的，我认为有利于我们去分析一些性能问题，并且能对浏览器的工作有更加深入的了解。ok，咱们开始来看看浏览器拿到HTML文件后到底做了什么。因为网上关于这块的讲解各种各样，毫不统一，所以以下内容纯属个人的理解，如果有错误，或者讲的比较含糊的地方，欢迎大佬指正。
2023-08-14 22:41:27
521
原创 【webpack】一些零碎的知识点记录：eslint配置、source-map配置、devServer配置
有些知识点不知道咋归类，就先暂时放在同一个文章里了。这里只记录配置方式，配置的东西是什么就不过多解释了，因为一般需要配置这些东西的也都了解是什么了。
2023-08-05 17:34:07
744
原创 【H5移动端】常用的移动端方案合集-键盘呼起、全面屏适配、图片大小显示、300ms点击延迟、首屏优化（不定期补充~）
这篇文章总结了我在工作中做H5遇到的一些问题，包括我是怎么解决的。可能不是当下的最优解，但是能保证解决问题。【H5移动端】前端H5移动端的单位适配方案集，包括给你用例子讲明白什么是1像素的问题（不定期补充~）本文章未来也会不定期的补充~
2023-07-31 17:47:10
1264
原创 【场景方案】提供一个用hooks编写的简单登录登出功能的方案（react）
如果你是一个vue工程师，第一次使用react（hooks）去编写，恭喜你，看这篇文章就对了。我将用react-hook的写法去实现一个简单的登录登出功能，让你体会react代码编写思维和vue是有一些不同的。还需要借助第三方hooks库ahooks，用户数据暂不考虑权限。
2023-07-17 16:52:06
514
原创 【场景方案】分享平时做表单页面时，积累的一些心得体会
作为一个前端最常遇见的需求场景就是写表单、写表格。写多了会逐渐的积累一些开发心得，此文章根据我使用vue和react的经验记录了一些东西，抛砖引玉的给大家看看。
2023-06-04 10:19:20
731
2
原创 【JS基础】浅浅了解下前端所需要的一些常用设计模式，提供例子说明
目前没精力深入了解，所以先简单记录一些比较常用的设计模式。日后有空了，待我深入了解后再更新文章~
2023-05-28 15:36:14
685
原创 【工程化】react工程起步工作，我是如何配置eslint、prettier、git提交钩子、环境区分的
由于使用ACR的方式创建react工程时，并不会像vue一样有每一步的安装提示，需要我们在创建工程后自己手动添加需要的基础库，例如我们今天要使用的eslint、prettier等。所以写个博客记录下如何添加。记得vscode该装的插件都要装上。【工程化】记录在vue工程中eslint、prettier等formatter以及git提交等规范的知识点。
2023-05-21 11:38:53
1058
5
原创 【场景方案】如何去设计并二次封装一个好用的axios，给你提供一个另类写法，另加一些思考
以下演示基于vue3与element-plus，react可以仿造这个写，原理都是一样的。之前在b站上的前端三十up主那里看来的，感觉写的挺有意思的。特此写篇文章记录下，还加上自己的一些思考。我们平时封装的axios函数其实网上一搜一大把，但这个up给我们展示了一种“另类”的封装方法，我重新按自己想法重构了遍，来看看咋写的。
2023-05-20 19:21:03
782
1
原创 【场景方案】我所遇到的有关前端文件上传的知识点归纳，欢迎大家来补充
本文章总结了本人在网上和实际公司项目中遇到的有关前端文件上传功能的知识点，如有更好的方案或者发现错误，欢迎评论区中指出。文章部分知识来源网上博客、gpt问答，以及b站up主【三十的前端课】的视频。
2023-05-07 13:02:51
868
原创 【vue3学习系列】对比vue2生命周期做了哪些改变，vue3初学者快来看看
看了下官方的生命周期的说明，感觉讲的不算太清晰，所以个人就去百度研究了下，把理解到的记录在这篇博客，方面日后查看。【vue回顾系列】25-一图看懂生命周期，并教你怎么口述出来。
2023-04-22 15:52:05
676
1
原创 【工程化】收集平时积累的一些性能优化措施，以及提示一些性能检测方案，还有分享我面试是怎么去回答这类问题的
平时在项目中如果遇到了一些性能优化的问题，在通过自己的专研解决了之后，再忙也要挤时间记录下，且要把对应的项目场景记录下来。因为这种经验是你真正硬实力的体现，并且面试都喜欢问这个问题。以下代码举例混合了vue和react，且不同层面的优化方法存在一些交集，归类到哪里其实不重要。
2022-11-19 11:51:08
412
原创 【css基础】都这个时候了，还不学学gird布局
设置子项宽度，每一个值代表一列。如果子项自己有设置单独宽度，还是会以gird设置的为主，但子项单独设置大了多的会溢出。其实设置的宽度高度只是给子项加了一个套，可以简单的理解为子项外面套了一个设置了宽高的元素。设置子项宽度还可以用自动伸缩填充，如下说明左右各占1/4，中间占1/2。每个子项都对其垂直线的中间。值和flex布局一样。
2022-10-21 22:03:14
242
原创 【JS基础】回顾一下垃圾回收机制，对付一些普通问答
js垃圾回收机制有好几种，不过这里就只记录一下引用计数和标记清除。有人大概总结是，只要是开发人员不期望使用，但又长期保留的存储内容，就是垃圾。大白话就是，这个存储内容我现在用完了，且用完后就不需要了，但是我没主动清掉或js引擎没给我清掉，还一直存在着，就是垃圾。
2022-09-24 16:42:18
306
原创 【vue3学习系列】怎么在vue3里写hooks，提供一些写法的例子
文章目录函数式调用的写法判断是否点击指定元素外的区域创建一个全局dom类minxins的写法函数式调用的写法一般都是use的函数式调用的用法，这里记录一下结合TS的案例：判断是否点击指定元素外的区域可用于下拉框点击外部后收起的逻辑判断。/* 功能：传入一个DOM对象，判断是否点击除本身以外的其他dom上 */import { Ref, ref, onMounted, onUnmounted } from "vue";interface Result { isClickOutside: R
2022-05-28 17:03:24
1162
原创 【场景方案】适用于简单后台管理的登陆退出鉴权解决方案（vue）
文章内容是我的crm解决方案里实现的原理的解析crm解决方案。有些代码示例中看不到引入，因为我这里只记录实现的思路，具体的可以看我项目源码。
2022-05-24 22:55:33
916
原创 【react框架】更新更麻了，React Router 6的使用学习记录
文章目录前言安装选择路由模式historyhashLInk/routes/routeNavigateNavlinkuseRoutes使用路由表嵌套路由前言代码来源B站尚硅谷教学视频，可结合之前的路由文章【react框架】学习记录9-学习路由react-router-dom的使用React Router 以三个不同的包发布到 npm 上，它们分别为：react-router：路由的核心库，提供了很多的：组件、钩子。react-router-dom：包含react-router所有内容，
2022-05-14 21:34:13
1572
2
原创 【react框架】React18 Hooks：我的避坑指南（上）
React的hooks我的理解是分为两个类型，一个是原生的hooks，一个是后期我们开发人员自己封装的自定义hooks。原生的hooks提供了React的基本功能，且使用起来也非常顺手。但我在日常开发中发现了这些hooks在使用上有非常多的注意事项，或者叫做坑，而且有些还挺容易忘记的，所以写个博客记录下。下篇地址文章更新记录：简化篇幅，优化记忆点对于一些平时开发根本不会这样做，但是面试会问到的“坑点”，我用（非必须）来标识标题，不是为了准备面试的人了解一下就行。
2022-05-14 11:18:51
777
原创 【场景方案】捋一捋Vben Admin之登陆方案（学习记录）
文章目录前言点击登陆validFormPiniauserStore.loginuserStore.afterLoginActionuserStore.getUserInfoAction尾巴前言本文章只是一个思路的梳理，只扒TS的逻辑过程（模板的暂时不涉及，以后有机会再补上吧），作为个人的源码学习记录，不喜勿喷。源码来源 Vben Admin点击登陆点击登陆按钮的相关文件在src/views/sys/login/LoginForm.vue中，我们来逐句分析，遇到一些封装的地方再往下翻翻可以看到（
2022-04-16 17:06:01
6481
3
原创 【网络基础】学学headers里面有什么东西，包括强缓存和协商缓存
文章目录前言Request HeadersResponse Headers强制缓存协商缓存为什么需要缓存强缓存和协商缓存的配合前言一个http请求中会有headers，它包含了请求头Request Headers和响应头Response Headers。headers前后端都是可以自定义的Request Headers记住常用的如下：内容含义accept浏览器可接收的数据格式accept-encoding浏览器可接收的压缩算法，例如gzipaccept-l
2022-02-27 11:10:16
3099
原创 【JS基础】给大家简单讲讲事件流机制，包含例子说明
文章目录前言事件流事件冒泡事件捕获前言例子就不兼容IE了，需要再去网上查阅即可。事件流直接一句话概括，事件的流向。主要分为事件冒泡和事件捕获。事件冒泡直接上例子，首先我们写个视图看看：<style> ul { border: 1px solid red; width: 200px; height: 100px; position: relative; } li { width: 50px; height: 50px;
2022-02-25 23:43:35
426
原创 【JS基础】这些是web api中的DOM和BOM必然要会使用的东西
JS由两个标准构建，一个ES是基础语法标准，一个W3C是web api标准。前者是后者的基础。
2022-02-20 23:15:44
835
原创 【es6入门】函数中的this到底指向谁？箭头函数有this指向吗？初学者不再晕了
很多JS初学者第一次接触this的时候，很容易被他的指向搞晕。我当时自学的时候也不例外，看了些文章也是越看越蒙，于是我自己总结了一下自己发现的规律来判断。
2022-02-15 23:06:01
743
原创 【vue3学习系列】数据传输有关api的改动，v-model、$attr、mitt/event-emitter、v-bind
文章目录v-model简单写法结合计算属性$attrs事件监听器mitt安装使用v-model官方文档：v-model改写vue2中和v-model功能类似的.sync已经在vue3中被去掉了。来学下，如何改写v-model。简单写法props: { modelValue: String, // 接收值},setup(props, context) { // 输入框数据 const inputRef = reactive({ val: props.mode
2021-12-09 11:20:41
993
原创 【vue3学习系列】组合式api中，替代setup()函数的＜script setup＞特性写法
在使用composition api的时候，setup()函数的写法写多了会感觉有些繁琐，比如每次都需要return出去，不同类型变量要分ref和reactive调用等。这里就记录一下尤大大在vue3正式版发布不到两个月后推出的script setup特性。响应式基础。
2021-12-05 22:38:46
1665
原创 【工程化】记录在vue工程中eslint、prettier等formatter以及git提交等规范的知识点
在多人开发项目中，因为每个工程师之间不仅存在着技术与经验的差别，还存在着自己习惯的书写方式，最终项目里呈现的代码就会风格各异。这个时候就需要一个强制的统一规范，让项目的代码样式看起来像一个人写的一样。幸运的是，在vue有几个解决此类问题的好工具。保证npm版本在7以上以最新的vue3.2脚手架为主。
2021-12-02 23:11:04
1700
原创 【TS基础】记录一些不错的综合案例，没事看看复习
文章目录断言与类型赋予的区别断言与类型赋予的区别interface Shape { color: string;}/** 接口继承 */interface Square extends Shape { sideLength: number;}let square = <Square>{}; // 断言let square1 = {} as Square; // 断言let square2: Square; // 类型赋予square.color = "blue"
2021-11-17 10:49:50
281
原创 【vue3学习系列】个人对reactive源码的初略分析
文章目录前言第一次执行源码分析实践分析createReactiveObject函数的入参mutableHandlersgetsetdeleteProperty前言如果源码解释不对，麻烦过客留下宝贵的留言，感激不尽。源码文件入口vue-next\packages\reactivity\src\reactive.ts文章版本v1.0（后续会文章优化迭代）第一次执行源码分析平时使用reactive时，调用的就是reactive.ts文件里的reactive()函数：setup(props) {
2021-11-13 14:13:48
1216
2
原创 【vue3学习系列】monaco在vue3中tsx文件里的使用
文章目录概念使用安装一个使用了monaco的tsx文件引用组件效果问题概念monaco是一个可提供在线编辑器的库。使用安装cnpm i monaco-editor -D 因为安装这个库后，我们使用它作出的组件需要用js去编写css所以还需要jss库，这里安装使用在vue上的：cnpm i vue-jss -S // 以及vue-jss的依赖包 cnpm i jss jss-preset-default -S一个使用了monaco的tsx文件这里是从github上的开源项目嫖过来的文
2021-11-06 21:31:24
1405
原创 【vue3学习系列】json-schema的初识与学习
文章目录概念安装使用format自定义关键字概念json-schema我觉得把它类比成json的增强interface就比较好理解。引用：Json Schema定义了一套词汇和规则，这套词汇和规则用来定义Json元数据，且元数据也是通过Json数据形式表达的。Json元数据定义了Json数据需要满足的规范，规范包括成员、结构、类型、约束等。安装此次我们使用一个比较流行的基于json-schema标准实现的库，AJV。还是在vue3的项目上：cnpm i ajv -S使用可以新建个src
2021-11-02 22:51:59
1933
原创 【场景方案】关于前端对接口行为的控制合集：轮番查询、并发请求、服务端通知、token无感刷新、请求取消
以下收集了我工作以来遇到的对接口行为控制的操作方案，有一些暂时记不得了，等以后想到了再做补充。
2021-10-31 21:23:21
934
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人