前端
文章平均质量分 71
Coding101
每天进步一点点~
展开
-
Mako 试玩|编译速度6到飞起!
近年来,前端领域的脚手架层出不穷,前有开山鼻祖 Webpack , 后有 Turbopack、Rspack 等一些后起之秀。新出的脚手架都会以 冷启动、热更新、冷构建 的耗时作为性能对比的佐证。Mako, 是基于 Rust 的 极快 和 生产级 前端构建工具。冷启动根更新叶更新冷构建知识科普: Root HMR 与 Leaf HMR 是什么关系?Root HMR指的是应用根组件的热模块替换,通常是对应用的最外层组件(通常是根组件)进行热替换更新,确保整个应用能够保持一致性和状态。Leaf HMR。原创 2024-09-01 10:43:35 · 975 阅读 · 1 评论 -
横向对比 npm、pnpm、tnpm、yarn 优缺点
总的来说,npm、tnpm、pnpm、yarn 这四种包管理器各有优缺点,相比于 pnpm 来说,幽灵依赖确实是 npm、tnpm、yarn 最明显的短板。但近年来,很多大佬们自己封装的幽灵依赖检测工具一定程度上也能避免幽灵依赖带来的困扰。就我个人而言,对npm、tnpm、pnpm、yarn没有明显的倾向,只要保证在同一个项目中从始至终使用一种包管理工具就可以啦~原创 2023-09-03 14:42:41 · 1604 阅读 · 0 评论 -
使用ChatGPT汇总了十道手撕高频题
在前端的技术面试中,手撕题是一个非常重要的环节。手撕题不仅能考察面试者的编程水平,还能考察面试者的思考方式和解决问题的能力。因此,今天就来分享一下借助ChatGPT为大家整理的十道前端高频手撕题!原创 2023-03-22 16:06:31 · 1073 阅读 · 1 评论 -
面试官:聊聊你知道的跨域解决方案
封装一个具有请求转发功能的代理服务器原创 2023-03-18 13:11:08 · 801 阅读 · 0 评论 -
从浏览器里输入URL构建你的前端知识体系
嗨!我是团子,好久不见~记得22年寒假复习八股的时候,一直在苦恼怎样才能把八股的内容真正的转换为自己的知识。毕竟光靠死记硬背每个知识点,是不能在面试中给面试官留下不错的印象的。后面在整理《浏览器里输入URL后发生了什么》这道题时,发现可以。所以,今天就从浏览器里输入URL和大家分享一下我是如何构建自己的前端知识体系的吧!作为一个前端开发工程师,我们的日常工作就是和网页打交道。无论是PC端浏览器中的标签页,还是使用Electron构建出的桌面端应用,还是移动端的H5页面,它们的本质都是网页。原创 2023-01-11 16:57:08 · 425 阅读 · 0 评论 -
【年终总结】一个普通校招生的秋招之路
嗨~大家好,我是团子!一个23届双非本985硕的应届毕业生。从年初找暑期实习再到秋招收割5个互联网大厂的offer,这一路经历了很多,所幸结果还比较满意,最近也基本结束了我的校招求职历程,便想来和大家分享一下我的校招之路,希望能给24届及以后的学弟学妹们一些参考~原创 2022-12-22 14:13:20 · 495 阅读 · 0 评论 -
【前端面试高频题】LRU缓存,你的解法能拿满分吗?
LRU缓存是前端面试中常考的手撕题,能较全面的考察面试者的综合素质。它的整体实现逻辑不复杂,但是要拿满分的话也没那么容易。说实话,在碰到面试官给我出这道题时,心里还开心了一下,因为之前做过,因此很快就按照记忆里的解题思路实现了一下代码。结果没想到,我以为的标准答案,只能算是及格...还有很多可优化的空间!本文会介绍及格&满分两种解法,大家可以看看自己的解法能不能拿满分!原创 2022-10-02 13:26:47 · 869 阅读 · 0 评论 -
【封装原生ajax请求】也没那么复杂嘛!
请求技术是一种,可以让浏览器在无需重新刷新页面的情况下,通过向后台发送请求并等后台数据响应后呈现在页面上...原创 2022-06-18 13:30:47 · 235 阅读 · 0 评论 -
【封装UI组件库】手把手教你仿一下Element-ui的Button组件(发布至npm)
所谓UI组件库,就是封装了平常项目开发中经常会使用的页面组件,发布至npm库中作为插件供项目组成员及其他开发者使用(不发布也行),目的就是为了避免多次重复劳动。以插件的形式使用可以做到即插即用,非常方便。市面上热门的UI组件库有Element-ui(与Vue框架配合使用)、Ant Design(与React框架配合使用)等等…本文主要通过讲解Element-ui封装一个组件的思路,来带领大家自己上手实践一下如何封装自定义组件。最后也会讲述如何把成品发布至npm云端库来呈现我们的测试插件。先上一张效果原创 2022-05-29 17:10:48 · 2390 阅读 · 8 评论 -
使用【React17】【Vue3】两种方式实现【交错式瀑布流】
先上一张效果图:什么是瀑布流?瀑布流是前端的一种常见的布局,具体表现形式是多栏布局,宽度固定,高度不定。与此同时,随着页面的滚动,会不断有新的元素添加到瀑布流尾部的最低列。常见的瀑布流有如下三种样式:卡片流:这种样式常见于移动端购物APP,一行只展示一件物品。随着页面的加载逐步出现更多的内容,也就是我们常说的下拉列表,算是最简单的一种瀑布流了: 固定式瀑布流:这种样式图片区域大小高度保持不变。统一的高度会使整个界面看起来比较整齐。PC端淘宝首页:移动端淘宝某页面:交错式瀑布原创 2022-05-16 22:48:11 · 1734 阅读 · 0 评论 -
【前端项目优化】React&Vue使用异步组件+代码分包+Suspense减少首页白屏时间
theme: fancy使用异步组件+Suspense的形式来实现代码分包是前端项目优化的有效&常用手段之一。何为代码分包?未进行代码分包的打包文件结构:如果项目里用了第三方库的话(echarts、elementUI…),理论上还会有一个vendor.xxx.js文件。 index.xxx.js里是我们项目打包后的主文件代码。进行代码分包的打包文件结构:通过上述两个图的对比,可以发现,代码分包指的是打包后的项目js文件有多个。代码分包的直观好处就是减少项目线上环境的首页白屏时.原创 2022-05-09 21:49:44 · 1272 阅读 · 0 评论 -
【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 · 3483 阅读 · 0 评论 -
【JS算法练习】彻底搞懂逆波兰表达式的求法,再复杂的表达式也不用慌~
前言表达式求值是校招面试/笔试中常考的一道算法题,即可以考察求职者的算法功底,又可以考察求值者思考问题的全面性。下面我们就来看看如何使用逆波兰表达式来求解各类复杂的表达式吧~问题描述:以字符串的形式给出表达式,请输出该表达式的求值结果。例如:输入:‘1+(12*3-4/2)-1’输出:34什么是逆波兰表达式?逆波兰表达式又称为后缀表达式,代表的含义是操作数在前,运算符在后。比如:1+2,用逆波兰表达式来写的话,就是12+.而1+2这种写法称为中缀表达式,即运算符在两个操作数之间,也是我们平原创 2022-04-23 13:19:13 · 2676 阅读 · 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 · 7983 阅读 · 1 评论 -
详解JS的四种异步解决方案:回调函数、Promise、Generator、async/await
同步&异步的概念在讲这四种异步方案之前,我们先来明确一下同步和异步的概念:所谓同步(synchronization),简单来说,就是顺序执行,指的是同一时间只能做一件事情,只有目前正在执行的事情做完之后,才能做下一件事情。比如咱们去火车站买票,假设窗口只有1个,那么同一时间只能处理1个人的购票业务,其余的需要进行排队。这种one by one的动作就是同步。同步操作的优点在于做任何事情都是依次执行,井然有序,不会存在大家同时抢一个资源的问题。同步操作的缺点在于会阻塞后续代码的执行。如果当前原创 2022-04-04 22:19:42 · 2567 阅读 · 3 评论 -
详解React性能优化手段之useMemo和useCallback
useMemo和useCallback都是React进行性能优化的手段,这两个hooks的作用就是进行数据缓存,避免页面重新渲染时,不必要的参数重复更新。它们的适用场景就是对于只需要单次进行复杂计算的内容进行数据存储,从而减少页面性能开销。这里先放一张旧版的react生命周期图,便于后续讲解useEffect、useMemo、useCallback对应的钩子函数执行时期时,有更清晰的认识:那么useMemo和useCallback的执行时期是什么呢?对应到react的生命周期来说,这原创 2022-03-30 22:59:42 · 3185 阅读 · 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 · 1005 阅读 · 0 评论 -
由Gitee图床设置防盗链事件来谈谈Referer属性的作用
今天各个技术群里都在讨论Gitee图床资源访问不起的事件:自己博客里来源于Gitee图床的图片资源全都变成了Gitee图标:emmm,虽然说拿公开代码仓库当图床不是上策,但是免费的东西它就是香呀~因此还是有不少小伙伴平常是用Gitee来当图床使的。但是Gitee在未提前声明的情况下,要求资源请求方在请求里包含Referer属性,从而实现图片防盗的目的属实是格局小了。。当然也不排除是其他技术漏洞导致的短暂bug。既然定位到了问题是出在了Gitee服务端通过Referer属性来限制图原创 2022-03-26 19:36:50 · 2694 阅读 · 0 评论 -
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 · 8853 阅读 · 9 评论 -
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 · 877 阅读 · 0 评论 -
避坑-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 · 1829 阅读 · 1 评论 -
一文彻底弄懂闭包,认真总结6千字
1. 什么是闭包?通俗来讲,闭包就是使内层函数可以访问到其外层函数的作用域。在JavaScript中,每当创建一个函数,闭包就会在函数创建的同时被创建出来。官方说法,闭包指的是一个函数和对其周围状态(词法环境)的引用捆绑在一起形成的组合。2. 什么是词法环境词法一词指的是,词法作用域根据源代码中声明变量的位置来确定该变量在何处可用。嵌套函数(闭包)可访问声明与它们外部作用域的变量。个人认为,在JS中,当前作用域内的变量,在该变量所处的作用域内(包含当前作用域的所有子作用域内),都可以原创 2021-12-11 22:44:02 · 874 阅读 · 4 评论 -
前端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 · 1758 阅读 · 1 评论 -
前端vue+后台node实现获取微信用户基本信息+调用微信JS-SDK(上篇)
获取微信用户基本信息为了减少开发成本,在进行获取微信用户基本信息+微信分享(详见下一篇博客)操作时,强烈建议先用微信公众号里的公众平台测试账号,并借助内网穿透工具进行测试,等成功后再转移到正式号上。测试号页面如下:接下来详细介绍获取微信用户基本信息的步骤:在测试号页面的体验接口权限表中,找到网页服务模块下的网页账号--网页授权获取用户基本信息一行,点击进入即可查看微信网页授权获取用户基本信息的官方文档:https://developers.weixin.qq.com/doc/of原创 2021-11-09 20:47:57 · 2397 阅读 · 0 评论 -
微信开发-微信JSSDK错误:invalid url domain
错误类型:invalid url domain调试返回参数:{ "errMsg": "config:invalid url domain" }截图:环境:微信测试号,非正式的公众号说明:在网上查找了很多资料,有的说是因为以为配置了二级域名,又有说端口的问题,最后我发现以上的说法都不准确,这是我配置的地址(错误的地址)最终我的解决办法是:去掉前边的协议:http://仔细看看上面截图中的说法就能发现,人家说的是“域名”,又不是“URL”大家可以看到我使用的三转载 2021-11-09 20:40:34 · 1062 阅读 · 0 评论 -
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 · 1795 阅读 · 0 评论 -
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 · 3200 阅读 · 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 · 471 阅读 · 0 评论 -
原生前端三大件实现餐厅经营小游戏
题目要求:设计一款H5端餐厅经营小游戏。角色包含:厨师、顾客、餐厅经营者(用户)场景包含:厨房做菜区、餐厅就餐区、顾客等候区菜单包含:凉菜、主菜、饮品需要实现的功能有:每隔一定时间就会有新顾客到达餐厅等候区 当餐厅有空位时,餐厅经营者引导最先等待的顾客入座点餐 顾客入座后开始点餐 点餐完成后,厨房开始做菜,同时点餐顾客开始等待 厨房做菜完成后,顾客状态变为就餐 就餐完毕后,结算饭钱,此桌顾客离开 餐厅经营者可以根据餐厅经营情况招聘厨师和解聘厨师约束条件:顾客等位时间有上原创 2021-08-25 00:18:37 · 1148 阅读 · 0 评论 -
前端三大件实现一个简易的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 · 1021 阅读 · 0 评论 -
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 · 2820 阅读 · 0 评论 -
JS清除定时器失败,清除单个定时器(有多个定时器时)
今天遇到一个bug是关于清除定时器。按理清除定时器后,定时器里的代码不会再执行。但是通过控制台输出后发现定时器还在定时执行。。最后debug出原因是因为,代码中包含了多个定时器。当一个定时器取消后,另一个还在继续。因此如果我们想多个定时器独立进行的话。每个定时的正确写法应该是:let timer = setInterval(() => { .... clearInterval(timer);//一定要写清楚是清除哪一个定时器},200);...原创 2021-07-19 14:27:12 · 2061 阅读 · 2 评论 -
利用SessionStorage实现监听页面重加载
页面刷新可能会导致页面上展示的部分实时数据丢失的问题。针对这种情况,我们可以通过监听页面重加载来做相应的处理。实现逻辑:1. 在页面第一次加载的时候,往sessionStorage中存一个状态值,例如:sessionStorage.setItem("firstLoad",true);2. 在页面交互过程不想因为刷新而丢失的值也放进sessionStorage中进行存储。并将firstLoad中的值更新为false。表示之后的刷新都不是首次刷新。3. 当页面刷新时,先去sessio原创 2021-07-16 13:11:21 · 561 阅读 · 0 评论 -
HTML2PDF,网页局部区域转PDF,网页局部区域打印
不知有没有小伙伴和我一样在网上的博客网站浏览技术文章时,看到能解决自己问题并且是一篇有很价值的博客时,就想如果能对文章进行编辑就好了,这样以后再看到这篇文章时,就知道自己看到了哪一个地方,有什么感悟,从而大幅度提高阅读效率。直接在网页上对博客进行编辑并保存是不现实的。但我们可以将文章转存为PDF下载到本地进行阅读,这样就可以直接编辑并保存笔记啦~网页文章转PDF(网页局部区域打印)的出现就是为了解决这个问题。点击链接https://greasyfo...原创 2021-07-12 09:51:01 · 388 阅读 · 0 评论 -
手把手教你用原生js写一个文字提示框
先上效果图:其实文字提示框可以看做是一个三角形和长方形的组合,当文字提示框在下方弹出时,三角形在上,长方形在下,然后给长方形的边框设置一定的弧度,从而整个文字提示框看起来就很自然啦~然后设置为当鼠标移至按钮时气泡显示,移出按钮时气泡隐藏,这样就可以很自如的切换气泡的显示和隐藏效果啦~源代码如下:<!DOCTYPE html><html lang="en"><head> <title>Tooltips悬停文字提示框效果</原创 2021-07-01 21:00:33 · 1554 阅读 · 0 评论 -
vue2.x中methods一个方法调用另外一个方法
我看网上写的有各种各样的...经过本人亲测,直接使用this.方法名即可。原创 2020-07-16 17:34:00 · 739 阅读 · 0 评论 -
vue3.0 图形界面创建项目
vue创建项目有命令行和图形界面两种方式,命令行就不用说了,今天主要说下怎样打开vue图形界面,用图形界面来创建项目。自己踩的坑是在安装vue-cli全局脚手架时,使用的cnpm淘宝镜像,这样是可以安装全局vue-cli脚手架,但是却无法使用vue ui启动图形界面。因此,如果想要使用图形界面创建vue项目的话,安装vue-cli脚手架的采用的命令如下:npm install -g @vu...原创 2019-12-01 22:30:59 · 861 阅读 · 0 评论 -
javascript中max,min的用法
在js中,求一个数组中最大值或最小值常用的方法是:Math.max.apply(function,arr);这里的arr是具体我们将要求的 数组的 数组名。function为要调用的方法,当function为null时,默认为上文。同理同min.之所以专门把max在js中的用法提出来讲是因为在js中,直接使用Math.max()求一个数组的最大值是行不通的,亲测有效地是上述方法。例题如下:输入10...原创 2018-05-15 20:21:58 · 5124 阅读 · 1 评论 -
javascript常用函数
Javascript常用函数及基本教材集合 每一项都是js使用中的小技巧,基础但十分的实用!1.document.write(""); 输出语句2.JS中的注释为//3.传统的HTML文档顺序是:document->html->(head,body)4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,docum...转载 2018-05-15 20:27:56 · 370 阅读 · 1 评论 -
编写React框架时,引入相关js库文件不起作用
最近在学习react框架,看网上一般引入react.development.js,react-dom.development.js,babel.min.js文件都是采用 <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https:/...原创 2019-02-10 23:34:30 · 3300 阅读 · 1 评论