- 博客(115)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 【封装UI组件库】手把手教你仿一下Element-ui的Button组件（发布至npm）
所谓UI组件库，就是封装了平常项目开发中经常会使用的页面组件，发布至npm库中作为插件供项目组成员及其他开发者使用（不发布也行），目的就是为了避免多次重复劳动。以插件的形式使用可以做到即插即用，非常方便。市面上热门的UI组件库有Element-ui（与Vue框架配合使用）、Ant Design（与React框架配合使用）等等…本文主要通过讲解Element-ui封装一个组件的思路，来带领大家自己上手实践一下如何封装自定义组件。最后也会讲述如何把成品发布至npm云端库来呈现我们的测试插件。先上一张效果
2022-05-29 17:10:48
2222
6
原创 【前端项目优化】React&Vue使用异步组件+代码分包+Suspense减少首页白屏时间
theme: fancy使用异步组件+Suspense的形式来实现代码分包是前端项目优化的有效&常用手段之一。何为代码分包？未进行代码分包的打包文件结构：如果项目里用了第三方库的话（echarts、elementUI…），理论上还会有一个vendor.xxx.js文件。 index.xxx.js里是我们项目打包后的主文件代码。进行代码分包的打包文件结构：通过上述两个图的对比，可以发现，代码分包指的是打包后的项目js文件有多个。代码分包的直观好处就是减少项目线上环境的首页白屏时.
2022-05-09 21:49:44
1195
原创 详解JS的四种异步解决方案：回调函数、Promise、Generator、async/await
同步&异步的概念在讲这四种异步方案之前，我们先来明确一下同步和异步的概念：所谓同步(synchronization)，简单来说，就是顺序执行，指的是同一时间只能做一件事情，只有目前正在执行的事情做完之后，才能做下一件事情。比如咱们去火车站买票，假设窗口只有1个，那么同一时间只能处理1个人的购票业务，其余的需要进行排队。这种one by one的动作就是同步。同步操作的优点在于做任何事情都是依次执行，井然有序，不会存在大家同时抢一个资源的问题。同步操作的缺点在于会阻塞后续代码的执行。如果当前
2022-04-04 22:19:42
2377
3
原创 js面试高频题：函数柯里化的实现（彻底弄懂）
函数柯里化的适用场景有：1. 参数复用2. 延时执行3. 提前确认函数柯里化的核心在于：函数里面返回函数，从而做到参数复用的目的。我们以一个js经典面试题为例开始讲解：实现一个函数，使得满足以下几个要求：add(1)(2)(3)(4)//输出10add(1,2)(3)(4)//也输出10add(1)(2,3)(4)//也输出10这是一道经典的函数柯里化手撕题，我们来讲一下该函数的具体实现：因为函数柯里化的核心就是 函数里面返回函数，因此我们可以初始构造一个柯里化函
2022-02-04 22:51:55
8430
9
原创 前端vue+后台node实现获取微信用户基本信息+调用微信JS-SDK（下篇）
1. 获取微信用户基本信息2. vue接入微信JS-SDK环境：前端：vue2.0后台：node.js公众号：微信提供的测试号以分享至微信和分享至朋友圈为例。微信网页接入微信JS-SDK后，微信网页分享至微信群和微信好友后将会以如下方式进行呈现：如果没有接入JS-SDK的话，呈现方式则是这种：观感有明显的区别，除此之外，接入微信的JS_SDK还可以方便的调用微信给第三方接口提供的功能，比如：拍照、定位、获取网络状态等等...接下来我们就正式开始实践吧~
2021-11-09 22:03:55
1665
1
原创 前端vue+后台node实现获取微信用户基本信息+调用微信JS-SDK（上篇）
获取微信用户基本信息为了减少开发成本，在进行获取微信用户基本信息+微信分享（详见下一篇博客）操作时，强烈建议先用微信公众号里的公众平台测试账号，并借助内网穿透工具进行测试，等成功后再转移到正式号上。测试号页面如下：接下来详细介绍获取微信用户基本信息的步骤：在测试号页面的体验接口权限表中，找到网页服务模块下的网页账号--网页授权获取用户基本信息一行，点击进入即可查看微信网页授权获取用户基本信息的官方文档：https://developers.weixin.qq.com/doc/of
2021-11-09 20:47:57
2283
原创 制作简易的个人主页(代码笔记）
//html<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="description" content="This is a testing demo page"> <meta name="keywords" content...
2017-11-22 21:49:12
37410
9
原创 花了三天的时间做了一个多功能 AI 助手
嗨！我是团子，大家新年快乐呀~前几天看到一些好朋友在朋友圈晒自己的年度总结，立新年 Flag，看到大家一年满满的收获，再看看自己，不由得想再看看人家，然后再看看自己，然后再看看人家…作为一个不喜欢立 Flag 的同学，团子觉得 2023 年最开心的事情就是通过公众号认识了超级多温暖的好朋友，本来想赶着元旦给大家送一波新年福利，制作一款来给大家用。
2024-01-14 01:30:44
618
原创 横向对比 npm、pnpm、tnpm、yarn 优缺点
总的来说，npm、tnpm、pnpm、yarn 这四种包管理器各有优缺点，相比于 pnpm 来说，幽灵依赖确实是 npm、tnpm、yarn 最明显的短板。但近年来，很多大佬们自己封装的幽灵依赖检测工具一定程度上也能避免幽灵依赖带来的困扰。就我个人而言，对npm、tnpm、pnpm、yarn没有明显的倾向，只要保证在同一个项目中从始至终使用一种包管理工具就可以啦～
2023-09-03 14:42:41
1086
原创 使用ChatGPT汇总了十道手撕高频题
在前端的技术面试中，手撕题是一个非常重要的环节。手撕题不仅能考察面试者的编程水平，还能考察面试者的思考方式和解决问题的能力。因此，今天就来分享一下借助ChatGPT为大家整理的十道前端高频手撕题！
2023-03-22 16:06:31
909
1
原创 面向新手的git实战教程
记得之前在网上学习git相关知识时，看到的文章大部分都是讲解git的基本命令有哪些，用处是什么，但是自己真正上手使用git时，仍然无从下手。所以今天就想从初始化一个git仓库开始，一边教大家实践git，一边讲解git的命令有哪些！
2023-02-15 13:08:45
552
原创 从浏览器里输入URL构建你的前端知识体系
嗨！我是团子，好久不见~记得22年寒假复习八股的时候，一直在苦恼怎样才能把八股的内容真正的转换为自己的知识。毕竟光靠死记硬背每个知识点，是不能在面试中给面试官留下不错的印象的。后面在整理《浏览器里输入URL后发生了什么》这道题时，发现可以。所以，今天就从浏览器里输入URL和大家分享一下我是如何构建自己的前端知识体系的吧！作为一个前端开发工程师，我们的日常工作就是和网页打交道。无论是PC端浏览器中的标签页，还是使用Electron构建出的桌面端应用，还是移动端的H5页面，它们的本质都是网页。
2023-01-11 16:57:08
378
原创 【年终总结】一个普通校招生的秋招之路
嗨~大家好，我是团子！一个23届双非本985硕的应届毕业生。从年初找暑期实习再到秋招收割5个互联网大厂的offer，这一路经历了很多，所幸结果还比较满意，最近也基本结束了我的校招求职历程，便想来和大家分享一下我的校招之路，希望能给24届及以后的学弟学妹们一些参考~
2022-12-22 14:13:20
404
原创 【前端面试高频题】LRU缓存，你的解法能拿满分吗？
LRU缓存是前端面试中常考的手撕题，能较全面的考察面试者的综合素质。它的整体实现逻辑不复杂，但是要拿满分的话也没那么容易。说实话，在碰到面试官给我出这道题时，心里还开心了一下，因为之前做过，因此很快就按照记忆里的解题思路实现了一下代码。结果没想到，我以为的标准答案，只能算是及格...还有很多可优化的空间!本文会介绍及格&满分两种解法，大家可以看看自己的解法能不能拿满分！
2022-10-02 13:26:47
797
原创 【封装原生ajax请求】也没那么复杂嘛！
请求技术是一种，可以让浏览器在无需重新刷新页面的情况下，通过向后台发送请求并等后台数据响应后呈现在页面上...
2022-06-18 13:30:47
219
原创 使用【React17】【Vue3】两种方式实现【交错式瀑布流】
先上一张效果图：什么是瀑布流？瀑布流是前端的一种常见的布局，具体表现形式是多栏布局，宽度固定，高度不定。与此同时，随着页面的滚动，会不断有新的元素添加到瀑布流尾部的最低列。常见的瀑布流有如下三种样式：卡片流：这种样式常见于移动端购物APP，一行只展示一件物品。随着页面的加载逐步出现更多的内容,也就是我们常说的下拉列表，算是最简单的一种瀑布流了： 固定式瀑布流：这种样式图片区域大小高度保持不变。统一的高度会使整个界面看起来比较整齐。PC端淘宝首页：移动端淘宝某页面：交错式瀑布
2022-05-16 22:48:11
1595
原创 【Electron+React入门Demo】用Web技术写桌面应用，这也太酷了
先上一张效果图：1. 何为Electron?Electron官网地址：Electron官网一句话来总结Electron，就是官网上写的：使用Web技术JavaScript、HTML和CSS构建跨平台的桌面应用程序。目前使用Electron来构建的热门应用有：VS Code、Facebook Messenger、Figma、Microsoft Teams…Electron的目标及优势就是：如果你可以建一个网站，你就可以建一个桌面应用程序。Electron是一个使用JavaScript、HTML
2022-04-27 11:03:54
2971
原创 【JS算法练习】彻底搞懂逆波兰表达式的求法,再复杂的表达式也不用慌~
前言表达式求值是校招面试/笔试中常考的一道算法题，即可以考察求职者的算法功底，又可以考察求值者思考问题的全面性。下面我们就来看看如何使用逆波兰表达式来求解各类复杂的表达式吧~问题描述：以字符串的形式给出表达式，请输出该表达式的求值结果。例如：输入：‘1+(12*3-4/2)-1’输出：34什么是逆波兰表达式？逆波兰表达式又称为后缀表达式，代表的含义是操作数在前，运算符在后。比如：1+2，用逆波兰表达式来写的话，就是12+.而1+2这种写法称为中缀表达式，即运算符在两个操作数之间，也是我们平
2022-04-23 13:19:13
2487
1
原创 【React】React.memo与useMemo的区别和联系
概述React.memo和useMemo都是React进行性能优化的手段，它们允许我们缓存需要进行高性能计算的结果，以便下次渲染页面时，返回缓存的值而不必重新计算函数，从而确保我们的应用程序运行的更快，避免不必要的开销。React.memo 详解为什么memo(memoization的简写)在React中这么重要呢？在React的组件中，如果子组件没有被React.memo包裹，或者没有使用useMemo来处理props传递参数，那么当父组件的任何值更新时，整个组件都将会进行重新渲染，包括父组件下面
2022-04-09 20:35:02
7476
1
原创 详解React性能优化手段之useMemo和useCallback
useMemo和useCallback都是React进行性能优化的手段，这两个hooks的作用就是进行数据缓存，避免页面重新渲染时，不必要的参数重复更新。它们的适用场景就是对于只需要单次进行复杂计算的内容进行数据存储，从而减少页面性能开销。这里先放一张旧版的react生命周期图，便于后续讲解useEffect、useMemo、useCallback对应的钩子函数执行时期时，有更清晰的认识：那么useMemo和useCallback的执行时期是什么呢？对应到react的生命周期来说，这
2022-03-30 22:59:42
3035
2
原创 JS新玩法：使用setTimeout()来模拟周期可变的setInterval()
问题描述：使用setTimeout动态的修改setInterval的周期依次为a,a+b,a+2b,a+3b,...,a+nb。并在指定时间后停止这个周期函数。问题关键点：（1）动态的修改setInterval的周期（2）在指定时间后停止这个周期函数问题实现思路：针对第一个点，动态的修改setInterval的周期，直接在原始的interval上修改是不会生效的，也就是下面这种写法：let count = 0;setInterval(() => { co
2022-03-28 21:20:51
927
原创 由Gitee图床设置防盗链事件来谈谈Referer属性的作用
今天各个技术群里都在讨论Gitee图床资源访问不起的事件：自己博客里来源于Gitee图床的图片资源全都变成了Gitee图标：emmm，虽然说拿公开代码仓库当图床不是上策，但是免费的东西它就是香呀~因此还是有不少小伙伴平常是用Gitee来当图床使的。但是Gitee在未提前声明的情况下，要求资源请求方在请求里包含Referer属性，从而实现图片防盗的目的属实是格局小了。。当然也不排除是其他技术漏洞导致的短暂bug。既然定位到了问题是出在了Gitee服务端通过Referer属性来限制图
2022-03-26 19:36:50
2627
原创 JS基于原型链的继承和基于类的继承学习总结
1. new关键字创建一个对象的过程 (1) 创建一个空的简单对象（即{}）（2）为步骤1新创建的对象添加属性_proto_,该属性连接至构造函数的原型对象（3）将步骤1新创建的对象作为this的上下文（4）执行new出来的对象指向的函数，如果该函数没有返回对象，则返回this示例代码如下：function Bar(name){ this.name = name;}let foo = new Bar('hello');foo就是我们new出来的对象，它的_pr..
2022-02-01 23:57:54
831
原创 win10电脑开机内存就飙到85%？解决方法来了
最近电脑不知道什么原因一开机内存就飙到了85%，再开一款编辑器，打开谷歌浏览器刷几个网页内存就飙到了90+，听着电脑风扇嗡嗡的响真是气死我了！！！网上搜了很久，找到了个解决办法（亲测有效）：在任务栏右键鼠标呼出菜单点击任务管理器切换至服务选项卡，滑动滚动条至底部，点击打开服务找了SysMain,把服务停掉然后重启电脑即可。上述方法如果内存降的不多，可以考虑清一下浏览器缓存~...
2022-01-27 19:56:13
4480
原创 一文彻底弄懂快速幂解法的核心
快速幂的核心在于底数最大化，指数最小化。这样做的目的是大大降低问题的时间复杂度，把原本需要4次的乘法运算转换为不需要进行乘法运算（指数是偶数），或者只需要进行一次乘法运算（指数是奇数）比如：3^4可以转换为9^2,再进一步可以转换为81^1.3^5可以转换为（9^2）*（3^1）,再进一步可以转换为（81^1）*（3^1）.从而做到底数最大化，指数最小化。其核心伪代码可表示为：if(指数&1){ // 代表指数是奇数 指数=指数 - 1；}while(指数
2022-01-24 20:54:01
223
转载 避坑-js正确地使用fill()初始化二维数组
先介绍一下坑fill()方法都知道，填充数组比如：let a = new Array(5).fill(0);console.log(a); // 输出结果为[0, 0, 0, 0, 0]当我们想使用fill创建一个二维数组时let arr=new Array(5).fill(new Array(5).fill(0))console.log(arr)输出看似没有什么问题，当我给某个元素重新赋值arr[1][1]=1console.log(arr)输出.
2022-01-01 22:27:04
1617
1
原创 LeetCode34题：在排序数组中查找元素的第一个和最后一个位置
问题描述：给定一个按照升序排列的整数数组 nums，和一个目标值 target。找出给定目标值在数组中的开始位置和结束位置。如果数组中不存在目标值 target，返回[-1, -1]。进阶：你可以设计并实现时间复杂度为O(log n)的算法解决此问题吗？样例：示例 1：输入：nums = [5,7,7,8,8,10], target = 8输出：[3,4]示例2：输入：nums = [5,7,7,8,8,10], target = 6输出：[-1,-1]...
2021-12-23 23:00:37
127
原创 一文彻底弄懂闭包，认真总结6千字
1. 什么是闭包？通俗来讲，闭包就是使内层函数可以访问到其外层函数的作用域。在JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。官方说法，闭包指的是一个函数和对其周围状态（词法环境）的引用捆绑在一起形成的组合。2. 什么是词法环境词法一词指的是，词法作用域根据源代码中声明变量的位置来确定该变量在何处可用。嵌套函数（闭包）可访问声明与它们外部作用域的变量。个人认为，在JS中，当前作用域内的变量，在该变量所处的作用域内(包含当前作用域的所有子作用域内），都可以
2021-12-11 22:44:02
811
4
转载 微信开发-微信JSSDK错误：invalid url domain
错误类型：invalid url domain调试返回参数：{ "errMsg": "config:invalid url domain" }截图：环境：微信测试号，非正式的公众号说明：在网上查找了很多资料，有的说是因为以为配置了二级域名，又有说端口的问题，最后我发现以上的说法都不准确，这是我配置的地址（错误的地址）最终我的解决办法是：去掉前边的协议：http://仔细看看上面截图中的说法就能发现，人家说的是“域名”，又不是“URL”大家可以看到我使用的三
2021-11-09 20:40:34
748
原创 this.$store挂载到原型链上失败，提示not defined
今天在Vue中想尝试引入vuex做前端的数据存储，主要用来存下token，这样就不用存到sessionStorage中了，没想到报了下面这个错：第一反应是store没有挂载到原型链上，检查了所有相关文件：1. 引入的vuex是小写2. store文件最后也导出了store3. 在main.js里也进行了挂载操作：结果仍然报this.$store not defined的错..尝试把this.$store改为store，并在头部引入store.js文件，就不报错了。..
2021-10-09 21:48:48
1695
原创 van-grid引入自定义图标无效，图标加载不出来
用van-grid布局后，想要替换默认的图标，结果发现替换后无效，用浏览器控制台定位图标后发现图标的类还用的是van-icon开头，这肯定是不对的，我们自定义的来自iconfont的图标的前缀应该是icon-third，然后就去翻vant的文档，发现它有一个参数是icon-prefix，用于设置图标类库前缀，默认值是van-icon,问题就出在这里van-prefix默认是没有写这个属性的，将其加上，值设置为：icon-prefix="icon-third"即可.
2021-10-05 17:28:02
2960
1
原创 好用的node热部署工具-nodemon
IDEA有jRebel热部署插件，在开发java项目时任何修改都可以自动重启，大力解放双手。转战node.js做后端，发现了一款热部署的工具-nodemon，官方文档详见：https://github.com/remy/nodemon安装过程如下：命令行切换至项目目录：如果选择全局安装，则输入以下代码：npm install -g nodemon如果选择安装到项目下（较推荐），则输入以下代码：npm install --save-dev nodemon回车后稍等几分钟
2021-09-05 20:29:08
419
原创 原生前端三大件实现餐厅经营小游戏
题目要求：设计一款H5端餐厅经营小游戏。角色包含：厨师、顾客、餐厅经营者（用户）场景包含：厨房做菜区、餐厅就餐区、顾客等候区菜单包含：凉菜、主菜、饮品需要实现的功能有：每隔一定时间就会有新顾客到达餐厅等候区 当餐厅有空位时，餐厅经营者引导最先等待的顾客入座点餐 顾客入座后开始点餐 点餐完成后，厨房开始做菜，同时点餐顾客开始等待 厨房做菜完成后，顾客状态变为就餐 就餐完毕后，结算饭钱，此桌顾客离开 餐厅经营者可以根据餐厅经营情况招聘厨师和解聘厨师约束条件：顾客等位时间有上
2021-08-25 00:18:37
1032
原创 前端三大件实现一个简易的ToDoList
界面如下图所示：暂且不说UI，谈谈已实现的功能：1. 添加计划2. 修改计划状态3. 删除计划4. 缓存数据源代码如下：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta nam.
2021-08-24 18:00:50
882
原创 Refused to apply style from ‘http://localhost:63342/.../user.css‘ because its MIME type(‘text/html‘)
今天新建HTML文档时，引用的css文件始终不生效报这个错。。最后发现，是自己引用的.css文件的href路径写错了。。
2021-08-09 22:52:38
2673
原创 JS清除定时器失败，清除单个定时器（有多个定时器时）
今天遇到一个bug是关于清除定时器。按理清除定时器后，定时器里的代码不会再执行。但是通过控制台输出后发现定时器还在定时执行。。最后debug出原因是因为，代码中包含了多个定时器。当一个定时器取消后，另一个还在继续。因此如果我们想多个定时器独立进行的话。每个定时的正确写法应该是：let timer = setInterval(() => { .... clearInterval(timer);//一定要写清楚是清除哪一个定时器},200);...
2021-07-19 14:27:12
1932
2
原创 利用SessionStorage实现监听页面重加载
页面刷新可能会导致页面上展示的部分实时数据丢失的问题。针对这种情况，我们可以通过监听页面重加载来做相应的处理。实现逻辑：1. 在页面第一次加载的时候，往sessionStorage中存一个状态值，例如：sessionStorage.setItem("firstLoad",true);2. 在页面交互过程不想因为刷新而丢失的值也放进sessionStorage中进行存储。并将firstLoad中的值更新为false。表示之后的刷新都不是首次刷新。3. 当页面刷新时，先去sessio
2021-07-16 13:11:21
532
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人