- 博客(39)
- 收藏
- 关注
RSS订阅原创 Chrome extension 谷歌浏览器插件 YouTube 监听地址栏 url 变化
最近在开发一个 YouTube 视频 AI 总结的插件，过程中遇到了一个问题，每次用户点击当前页面其它视频时，组件并不会重新挂载，这就导致视频明明都变了，但是总结依旧还是上次的内容，很影响体验。
2024-09-05 22:42:14
347
原创 从零开始的 dbt 入门教程 （dbt cloud 自动化篇）
我们在第一篇文章介绍 dbt core 时顺带提了一句 dbt cloud，简单来理解，dbt core 是 dbt 的基础，它提供你本地 dbt 项目开发的一切，比如你要使用的 dbt 命令，构建过程中 sql 的编译，对于数据平台的链接通信以及抹平不同平台差异等等，而这一切仅限于你在本地项目写 model 以及构建你需要的数据模型。
2024-03-24 20:11:55
1295
原创 从零开始的 dbt 入门教程 （dbt core 开发进阶篇）
在 dbt 中我们可能会有这样的场景，我希望像写 js 或者 java 那样封装部分可复用的方法，供我在多个 sql 文件中使用，那么宏就能派上用场，打个比方，我在需要定义一个 dau 用于统计日活跃用户，那么我更新的时间应该是在今天去更新昨天的数据，这样昨天的数据才是精准且有效的，那么我需要在当天知道所谓的昨天是什么时候，于是我在macros目录下定义了一个名为然后我在dauSELECT *-- orSELECT *SELECTFROM(SELECTFROM-- ...
2024-02-18 21:20:02
1212
原创 从零开始的 dbt 入门教程 （dbt-core 基础篇）
最近一直在处理数据分析和数据建模的事情，所以接触了 dbt 等数据分析的工具，国内目前对于 dbt 比较详细的资料不多，所以打算写四道五篇 dbt 相关的文章，本文属于 dbt 系列的第一篇，本篇主要阐述 dbt 一些基本概念，教会你如何配置 dbt 连接远端数据库，并运行你的第一个数据模型，那么本文开始。其次，由于 Google 数据库不支持本地连接，所以我们需要把 clone 的项目整个上传服务器，通过远端来联调数据库，前端同学如果不清楚，可以问下服务端同学日常开发怎么做的就好了。
2023-12-31 23:37:29
1773
1
原创 Chrome Extensions v3 迁移清单
Chrome 计划完全停止 v2 版本维护，后续 v2 版本将无法上架谷歌插件商店，除此之外，未来新版本 Chrome 对于 v2 版本插件的限制会越来越大，比如安全性限制 iframe 嵌套只能通过沙盒模式数据通信传递而不能直接获取数据等等，因此 v2 迁移 v3 是必要的。
2023-10-12 23:30:07
1674
原创 快速上手 vercel，手把手教你白嫖部署上线你的个人项目
vercel 其实也分为开发环境，预览环境（测试环境）以及生产环境三个概念，在 vercel 团队版，你甚至能在预览环境直接进行评论（而且评论也能集成到 slack，挺符合目前我们的生态），比如 UI 觉得某些页面还原度不够他就能在预览环境进行评论，所以不同环境确实有本质上的区别以及作用。vercel dev： 这个命令用于启动本地的开发环境。它会模拟 Vercel 的云环境，让你可以在本地进行开发和测试。使用这个命令，你可以实时看到你的更改效果，而不需要将它们部署到预览或生产环境。vercel。
2023-07-03 22:08:10
3310
2
原创 客户线上反馈：从信息搜集到疑难 bug 排查全流程经验分享
本文是我在前端团队的第三次分享，应该很少会有开发者写客户反馈处理流程以及 bug 排查的心得技巧，全文比较长，写了一个多星期大概1W多字（也是我曾经2年工作的总结），如果你有耐心阅读，我相信在未来的问题排查上，一定会对你的思路拓展有些许帮助，考虑到篇幅问题，建议在阅读前泡上一杯茶，那么本文开始。
2023-06-05 16:26:00
998
原创 还在玩传统终端，不妨来试试全新 AI 终端 Warp
最近一段时间，AI领域如同雨后春笋般开始猛烈生长，processon，sentry，一些日常使用的工具都在积极接入AI，那么正好借着AI的风头，今天给大家推荐一款非常不错的智能终端（目前仅限macOS，Windows or Linux还需要等等），如果你还在用传统终端，那么你更应该看过来。毫不夸张的说，我在看完了它的7分钟演示视频，并在体验半小时后，毫不犹豫卸载了我之前使用了3年的终端 iterm2 ，多犹豫一秒我觉得都是对它的不尊重，那么跟传统终端相比有多好用呢，替我细细道来。
2023-04-25 10:14:42
1207
1
原创 【JS奇妙说】为何范围内随机取整要用Math.floor，而不是ceil或者round？
本文属于四年前我入行前端不久的一次思考，当时因为接触到了一到使用随机数的笔试题（），但在GitHub对于此题的讨论中，我发现大部分人对于随机数API使用不太清晰，使用floor或是ceil各执一词，于是让我有了对于随机取整为什么一定要使用floor的疑虑，所以在当时写下了这篇文章。最近因为工作繁忙，连迁移文章都变的缓慢了，我觉得这样不行，这篇文章现在来看过于基础了，但我觉得还有点乐趣，如果阅读完能让你有一点点收获，那就更好了。
2023-03-10 10:26:08
221
原创 react无效渲染优化--工具篇
造成无效渲染的第二大原因就是引用数据类型引用不稳定所导致，举个最简单的例子，组件A渲染前后都接受了一个空数组，且两次数组的引用都不同，这对于组件而言因为引用不同所以是新数据自然得再次渲染，但对于研发而言，我们心里其实是知道这是无意义的，所以如何保证其引用的稳定性就是解决无效渲染的核心了。而言，它一定是只帮你找出无效渲染，且理由都是上面这种引用数据前后完全一样，只是单纯的引用不同，如何保证引用那么又回到了上文提到的减少无效渲染的手段，如果一个组件一个无效渲染提示都没有，那说明这个组件非常健康。
2023-02-13 00:00:00
842
1
原创 react 快速接入 sentry，性能监控与错误上报踩坑日记
其实配置好sentry后，sentry会自动抓取项目使用过程中的所有错误，但有个问题，我们在请求接口时接口虽然200，但是后端会返回我们约定好的一些错误码，这对于sentry是无法感知的，所以需要我们自定义上报。我先假定大家理解请求拦截的概念，所以不管什么接口，我们都可以在拦截的responseextra:{}// 附带的数据level:'warning' // 错误等级，警告还是报错由你决定})title：错误上报后展示的标题extra：附带数据，比如你想把后端返回的完整数据带上去。
2023-01-04 11:35:56
1998
2
原创 从零手写一个深拷贝（进阶篇）
在一文中，我们阐述了深浅拷贝的概念与区别，普及了部分具有迷惑性的浅拷贝api。当然，我们也实现了乞丐版的深拷贝方法，能解决部分拷贝场景，虽然它仍有很多缺陷。那么这一篇文章我们将从零手写一个强大的深拷贝方法，在方法逐渐升级的过程中，我们也能亲身感受深拷贝中需要考虑的边界问题，那么本文开始。
2022-10-26 13:31:53
490
原创 前端面试第快速复盘，不标准的面试经验分享 （二）
如果说上篇面经能传达拿到offer的喜悦，那么这篇文章能传达的可能只有各类失败的总结。后续时间我又接触了红杉资本、小满科技、微派网络、作业帮、刀锋互娱，腾讯等。其中有挂技术的，有面试刷KPI走流程的，有腾讯会议等了十多分钟说面试官家里有事没下文的，整体体验就是一个字，难。如果上篇文章我还在说实力没问题可以试试，那么这篇文章我对身边每个有提桶想法的人的建议都是，苟住别离职，有想法你也等到明年春招再试试水温。而且我的直觉，因为目前市场上待业人数太多了（还在裁），到明年春招竞争一样会非常激烈。
2022-09-29 19:39:50
571
原创 前端面试第一周快速复盘，不标准的面试经验分享 （一）
从深圳离职回武汉也一周多了，上周不慌不忙的安排了两场面试，到本周一为止两家都收到了offer，考虑到某些原因还是把两个offer都拒了。其实说实话也没想到面试能有这么顺利，不过清楚自己在市场上的定位后，还是想之后花时间再搏一搏。说在前面，这两家均非大厂，第一家主要做海外SaaS服务，公司技术氛围与我上家很相似，比较看好。前后一共经历了五轮面试，一路过关斩将面了4天最后薪资还是没谈拢，实属遗憾。第二家为国内某知名网游加速器，这一家只有一轮面试（2个人一起），相对简单轻松。
2022-09-15 15:04:14
485
原创 JS 深入理解深拷贝和浅拷贝的区别，实现一个简单的深拷贝（基础篇）
深浅拷贝属于js中一个比较基础但重要的概念，日常开发中很多地方都会需要使用到深拷贝，在操作数据时，我们都应该潜意识的思考是否会对原数据造成影响。而且在面试时，我也遇到过如何实现一个深拷贝，需要注意哪些边界情况的问题，对于初学者而言，了解这个概念是非常有必要的。本文是我在17年刚从事前端不久时所写的一篇文章，我觉得作为基础入门去了解深拷贝的概念还挺不错，所以决定迁移过来，至于从零手写一个实用的深拷贝，我决定再开一篇文章，那么本文开始。
2022-08-23 15:41:25
308
原创 详解instanceof底层原理，从零手写一个instanceof
本道题的核心考点还是对于javascript原型的掌握程度，比如__proto__，prototype相关概念，以及instanceof底层原理的理解。若你对于原型已经非常熟悉，那么可以直接开始阅读，以及在看完instanceof原理后可以尝试自己先手写。若不太熟悉，强烈建议先阅读博主关于原型的博文，不然原型链这点可能会把你绕晕。那么请跟随我的思路，本文开始。...
2022-08-16 16:42:56
347
原创 React性能优化，六个小技巧教你减少组件无效渲染
在过去的一段时间，我一直围绕项目中体验不好或者无效渲染较为严重的组件做性能优化，多少积累了一些经验所以想着整理成一片文章，下图就是优化后的一个组件，可以对比优化前一次切换与优化后多次切换的渲染颜色深度与按钮的切换速度：关于减少组件无效渲染，与其说是提几点建议，不如说是在优化过程中所记录的一些不规范的写法，能写出更好的代码总是更棒的，也希望这几点建议能对大家能有些许帮助。当然，以下建议不管class组件还是hooks中其实都会犯，所以都有参考意义，那么本文开始。......
2022-08-14 16:07:10
1391
原创 JS 从零手写实现一个bind方法
在一文中，我们详细分析并模拟实现了call/apply方法，由于篇幅问题，关于bind方法实现只能另起一篇。在模拟bind之前，我们先了解bind的概念，这里引入bind()方法创建一个，在bind()被调用时，这个新函数的this被指定为bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。说的通俗一点，bind与apply/call一样都能改变函数this指向，但bind并不会立即执行函数，而是返回一个绑定了this的新函数，你需要再次调用此函数才能达到最终执行。可以到bind。...
2022-08-10 12:54:18
295
原创 JS 从零手写实现一个call、apply方法
我们在一文中，我们提到属于显示绑定，这三个方法都能直接修改this指向。其中call与apply比较特殊，它们在修改this的同时还会直接执行方法，而bind只是返回一个修改完this的并未执行，那么今天我们来讲讲如果通过JavaScript模拟实现call与apply方法。...
2022-08-05 11:02:36
244
原创 JS new一个构造器发生了什么？从零手写一个new方法
对于大部分前端开发者而言，new一个构造函数或类得到对应实例，是非常普遍的操作了。下面的例子中分别通过构造函数与class类实现了一个简单的创建实例的过程。但new不应该像一个黑盒，我们除了知道结果，更应该明白过程究竟如何。那么那么这篇文章主要围绕两点展开，，。...
2022-08-04 18:48:03
246
原创 JS 从零教你手写节流throttle
通过上面的分析，我们可以得知，如果要感知最后一次操作，定时器肯定不能少，但有了定时器，你又要等待wait之后才能执行，这里就有点相互矛盾了。我们其实可以简单点理解，假设，那表明当前可以立刻执行，假设并没有超过wait，考虑到之后我们还得执行，那我们就设置定时器，等waitlet time;// 保存this const this_ = this;// 获取当前时间 const cur = + new Date();// 如果时间差>=wait，执行 if(cur - pre >= wait) {...
2022-08-03 10:45:11
213
原创 JS 保姆级贴心，从零教你手写实现一个防抖debounce方法
防抖在前端开发中算一个基础但很实用的开发技巧，在对于一些高频操作例如监听输入框值变化触发更新之类，会有奇效。除了实际开发，在面试中我们也可能偶遇手写防抖节流的问题，鉴于不同公司考核要求不一，对于实现深度也会不同。本文主要围绕防抖从基础概念到手写实现展开，从基础版逐渐演变为一个相对强大的版本，且文中很多实现细节我都会一一说明，直接让你们少才踩坑，那么本文开始。...
2022-08-02 18:08:40
536
原创 this巩固训练，从两道执行题加深理解闭包与箭头函数中的this
在本文之前我已经花了两个篇幅专门介绍了JavaScript中的闭包与this，正好今早地铁上看到了两道面试题，试着做了下发现挺有意思，所以想单独写一篇文章来记录解析过程。那么本文开始。
2022-08-01 14:32:17
135
原创 一篇文章看懂JS闭包，从执行上下文角度解析有趣的闭包
如果在面试中被问及什么是闭包，大部分情况下得到的答复是（至少我以前是）A函数嵌套B函数，B函数使用了A函数的内部变量，且A函数返回B函数，这就是闭包。这段描述当然没问题，那么为了让下次面试回答的更为漂亮，就让我们从更专业的角度重新认识闭包。......
2022-08-01 14:21:46
492
原创 五种绑定彻底弄懂this，默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解
可以说this与闭包、原型链一样，属于JavaScript开发中老生常谈的问题了，但开发好几年，依然被几道this指向题安排明明白白的人应该不在少数。对于初学者而言，this概念抽象，变化多端总是让人晕头转向，但平心而论它并没有多难，今天我们就从this绑定的五种场景（默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定）出发，静下心来好好聊聊这个this，本文开始。...
2022-07-29 16:00:54
657
原创 JS 鸡生蛋与蛋生鸡问题，Object与Function究竟谁出现的更早？Function算不算Function的实例？
我在一文中介绍了JavaScript原型与原型链，以及衍生的__proto__、等一系列属性。在解答了多个问题的同时，也得出了很多有趣的结论。比如我们常说JavaScript中函数是一等公民，这是因为函数扮演了创造万物的角色，原始构造函数Function创造了、Object()、Array()、Number()、String()等诸多构造函数，而构造函数也拥有创造对应实例对象的能力，比如Array()生产数组，String()生产字符串，你会发现JavaScriptFunction()nullObject。
2022-07-28 16:19:34
327
1
原创 JS 疫情宅在家，学习不能停，七千字长文助你彻底弄懂原型与原型链
原型与原型链属于老生常谈的问题，也是面试高频问题，但对于很多前端开发者来说，组织语言去解释清楚是较为困难的事情，并不是原型有多难，稍微了解的同学都知道原型这一块涉及太多知识。比如我们可以灵魂提问自己的同事以下问题：...............
2022-07-27 11:17:56
251
原创 一篇文章看懂JS执行上下文
执行上下文是一个很重要的概念，通过阅读它，你会了解为什么会存在所谓的变量提升，为什么let声明但不赋值的变量使用就报错，但var却是undefined，串起来讲，它也会加深你对于this的理解。按照代码书写顺序，应该先输出听风是风，再输出echo才对，很遗憾，两次输出均为echo；这说明代码在执行前一定发生了某些微妙的变化，JS引擎究竟做了什么呢？这就不得不提JS执行上下文的了。...
2022-07-24 19:25:12
473
3
原创 JS什么是声明提前？函数与变量声明提前的先后顺序（执行上下文铺垫篇）
先来了解一个函数作用域的概念**变量在声明它们的函数体以及这个函数体嵌套的任意函数体内始终可见。**说直白点，在声明一个变量的前后，你都可以直接使用它，并不会报错。//undefinedvara="听风";//听风}())前面已经说了，变量在声明它们的函数体内始终可见，尽管第一个console输出在声明a之前，但它依旧能输出，并不会报错，那是因为声明统一提前，赋值原地不变。vara;//声明了但未赋值，所以输出undefined；a="听风";a在function第一个。......
2022-07-24 19:16:20
528
2
原创 一篇文章快速复习flex属性与用法
谈到flex布局，我不知道有多少人跟我一样，在本能的想到与两条属性之后，除此之外的其它属性居然显得格外陌生。可以说包括我在内的大部分人，都是在被flex垂直水平居中方式所惊艳后才对其有所了解，以至于在日常开发中对于flex的使用，也确实更偏向于元素对齐方式的使用。对我而言，flex布局不应该局限于对齐方式的使用，熟练掌握它对于页面布局也是有较大好处的，所以这篇文章主要是偏向于flex属性笔记式记录，那么本文开始。...
2022-07-20 12:21:03
146
原创 看似简单的input框输入竟异常卡顿，记一个日常性能问题的排查思路
我们公司产品主要提供企业项目管理服务，那么自然有配套的desk工单管理系统，用于搜集客户bug以及相关问题反馈。有一天我在测试功能时碰巧发现了一个bug，所以就想着提一个工单记录下方便日后修复。但就在创建工单填写标题时我发现标题输入卡爆了，本想着创建一个bug工单，结果又附带新建了一个性能bug单…下图便是当时问题表现可以看到我只要连续操作，输入框都存在非常明显的卡顿，输入并不流畅，那么本文主要记录此问题的排查思路，以及部分性能排查小技巧，本文开始。...
2022-07-19 12:10:09
4464
1
原创 react 新旧生命周期有什么区别？新增了哪些钩子？废弃了哪些钩子？为什么废弃？
在日常面试中，若对于了解的同学而言，多多少少会被问到生命周期相关的问题，比如大致阐述生命周期的运作流程，以及每个钩子函数大致的作用，而我在两位出去面试的同事那里了解到，他们都遇到了这个高频问题。我在以往文章中介绍旧版生命周期钩子函数的作用，当时也有同学留言到我未提及新增的部分钩子的作用，那么本文正好对于旧版本生命周期做一次运转对比，补全新钩子的作用，同时站在面试题的角度梳理下我们该如何组织语言，那么本文开始。在版本前后存在两套生命周期，之前为旧版，之后则是新版，虽有新旧之分，但主体上大同小异。新版也只是废弃
2022-07-09 14:28:30
852
原创 react 八千字长文深入了解react合成事件底层原理，原生事件中阻止冒泡是否会阻塞合成事件？
在前面两篇文章中，我们花了较大的篇幅介绍的方法，在介绍同步异步时提到，在合成事件中对于更新都是异步，但在原生事件中更新却是同步，这说明在合成事件处理上必定与原生事件存在部分差异，那么本篇文章就来着重介绍中的合成事件，在文章开始之前我们先罗列部分问题：在文章开始前，大家可以先自行思考这些问题，假设这些在面试中遇到，你能回答多少呢？那么本文开始。虽然本文的核心重点是介绍的合成事件，但文章开头既然给了合成事件与原生事件相关对比问题，因此了解原生事件是有必要的，考虑到可能有同学对此类知识存在遗忘，这里做个简单复习。
2022-07-06 10:15:00
608
原创 react 聊聊setState异步背后的原理，react如何感知setState下的同步与异步？
在react中的setState是同步还是异步？react为什么要将其设计成异步？一文中，我们介绍了同步异步问题，解释了何种情况下同步与异步，异步带来了什么好处，以及官方为何要将设计成异步。但因为文章篇幅问题，我们遗留了一个与底层相关的问题，为什么在合成事件中使用会批量异步合并，而原生事件中又是同步呢？是如何感知这两者的区分从而做不同处理，带着疑问文本开始。既然在合成与原生事件之间有所区分，那么在源码实现上一定会有所表现，这里我们摘出相关源码做一个简单分析。注意，这里的源码版本为，原因是我在阅读源码过程中发
2022-07-05 17:41:43
463
原创 [react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?
虚拟（Virtual DOM）在前端领域也算是老生常谈的话题了，若你了解过或者一定避不开这个话题，因此虚拟也算是面试中常问的一个点，那么通过本文，你将了解到如下几点：阅读前建议与提醒：那么本文开始。在聊虚拟之前，我还是想先聊聊在没有虚拟概念的时候，我们是如何更新页面的，所以在这里我将先引出前端框架（库）的发展史，通过这个变迁过程也便于大家理解虚拟dom的出现到底解决了什么问题。其实在15年以及更早之前，前端面试涉及到性能优化问题，往往都会提到尽可能少的操作这一点。为什么呢？因为在原生JS的年代，前端项目文件
2022-07-03 17:26:58
3464
6
原创 【react】什么是fiber？fiber解决了什么问题？从源码角度深入了解fiber运行机制与diff执行
我在[react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?一文中，介绍了虚拟的概念，以及中虚拟的使用场景。那么按照之前的约定，本文来聊聊中另一个非常重要的概念，也就是。那么通过阅读本文，你将了解到如下几个知识点：同样，若文中涉及到的源码部分，我依然会使用的版本，保证文章的结论不会过于老旧；其次，的概念理解起来其实比较枯燥，但我会尽量描述的通俗易懂一点，那么本文开始。我们学习任何东西，一定会经历两个阶段，一是这个东西是什么？二是这个东西有什么用（解
2022-07-03 17:19:32
11712
10
原创 React key究竟有什么作用？深入源码不背概念，五个问题刷新你对于key的认知
我在【react】什么是fiber？fiber解决了什么问题？从源码角度深入了解fiber运行机制与diff执行一文中介绍了对于处理的协调与提交两个阶段，而在介绍协调时又顺带解释了另一个较为重要的概念。那既然提到了我们还会顺带问一问中另一个有趣的概念，那么现在我来问大家，你是如何理解的，又有什么作用呢？请大家思考一会如何回答。我想，超过一大半的人会说，在时能起到标记的作用，比如往一个数组前面添加一个元素，通过能清晰知道它只用新增一个节点，而另外两个节点可以直接复用，从而极大优化性能。正如官网在介绍时的例子所
2022-07-03 17:08:50
453
原创 react中的setState是同步还是异步？react为什么要将其设计成异步？
了解react的同学都知道，react遵守渲染公式UI=Render(state)，状态决定了组件UI最终渲染的样子（props也可以理解为外部传入的状态），由此可见state对于react的重要性。而在实际使用中，若我们想修改状态必须得借用APIsetState，也只有通过此方法修改状态才能顺利触发react下次render，那么对于一个使用如此高频的方法你了解它多少呢？......
2022-07-01 16:30:00
1841
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人