- 博客(287)
- 收藏
- 关注
RSS订阅原创 三个伪类让你的CSS代码更加优雅
大部分浏览器的新版本都已支持:is():where()和:has()这三个伪类了，如果你的项目跑在低版本的浏览器中，那么需要考虑一下回退策略。
2024-03-01 13:26:49
277
原创 （上）async/await高级用法，你会多少种呢？
众所周知，在ECMA17中加入了两个关键字asyncawait，简单来说它们是基于Promise之上的语法糖，可以让异步操作更加简洁明了。在掌握asyncawait的基础用法后，下面将介绍一些高级用法，以便充分利用实现更复杂的异步流程控制。
2024-02-28 10:57:57
406
原创 常见需求：CSS 实现弧形卡片的 3 种方式
以上就是本文的全部内容了，共介绍了 3 种不同的方式，下面总结一下各自优缺点border-radius 支持斜杠语法，可以单独控制圆弧的x、y半径，实现“外凸”圆弧最简单，缺点是圆弧不能自定义弧度，也不能实现“内凹”效果伪元素最符合常规思维，可以解决以上问题，缺点是需要占用伪元素，略微麻烦渐变实现和伪元素拼接思路类似，缺点是语法复杂，需要熟练掌握渐变语法大家可以根据自己的实际场景自行选择适当的方式，当然最好都能够掌握，这样碰到类似需求时才能游刃有余，如果你有其他的思路，欢迎留言讨论。
2024-02-27 11:40:35
3818
原创 你还不会大厂必考的10个经典排序算法吗？
众所周知，10个经典排序算法在大厂的校招、社招面试中频繁出现，那么今天我们就来用JS语言实现一下这10个经典排序算法吧。
2024-02-23 17:21:50
276
原创 如何看待 “程序员下班后不想学习”
996后没有时间、精力学习怎么办？那就好好玩、好好休息。不追求高绩效，因为高绩效还跟公司经营状况相关，这是我们程序员无法左右的。即使被裁员，也能随时找到工作的能力即使不工作，也能谋生的能力能够提高我们技术影响力的能够提高我们技术能力的。
2024-02-22 12:19:25
587
1
原创 React 19 即将迎来大更新！
公众号: 程序员白特，欢迎一起交流学习~近日，React团队发布消息称，不会再发布v18.3版本了，而是将重点放在React v19版本。新版本将推出四个新的hook，旨在解决React虽然这些hook目前作为实验性API在React预览版本中可用，但它们预计将成为React 19的稳定功能，但是最终发布React v19之前，API 可能会有所变化。
2024-02-21 13:47:40
1218
原创 从 V8 引擎内部看看闭包到底是什么
对于我们前端开发来说，无时无刻不在接触着闭包。比如在中利用了闭包来捕获组件的状态，并在组件的生命周期中保持状态的一致性。在Vue中利用闭包来定义计算属性和监听器，以及在组件之间共享数据。在Angular中利用闭包可以用于创建服务和依赖注入。所以理解闭包产生的原因和原理对我们的日常开发非常重要。
2024-02-20 11:23:09
1034
原创 都2024了，你还在使用websocket实现实时消息推送吗？
在日常的开发中，我们经常能碰见服务端需要主动推送给客户端数据的业务场景，比如数据大屏的实时数据，比如消息中心的未读消息，比如聊天功能等等。本文主要介绍SSE的使用场景和如何使用SSE。在很久很久以前，前端一般使用轮询来进行服务端向客户端进行消息的伪推送，为什么说轮询是伪推送？因为轮询本质上还是通过客户端向服务端发起一个单项传输的请求，服务端对这个请求做出响应而已。通过不断的请求来实现服务端向客户端推送数据的错觉。并不是服务端主动向客户端推送数据。显然，轮询一定是上述三个方法里最下策的决定。
2024-02-19 12:34:39
1609
原创 教你怎么前端实现埋点上报
只有了解用户，我们才能服务好用户，而最接近用户的我们，自然要承担起更多的责任。那么在一个企业中，我们要如何去了解用户呢？最直接有效的方式就是了解用户的行为，了解用户在网站中做了什么，呆了多久。而如何去实现这一操作，这就涉及到我们前端的埋点了。因为埋点实际上是对关键节点的数据进行上报是和服务端交互的一个过程，所以我们可以和后端约定一个接口通过ajax去进行数据上报。方法可用于通过HTTP POST将少量数据 异步 传输到 Web 服务器。前端埋点上报常使用。不推荐使用ajax。
2024-02-08 17:29:31
1115
原创 前端预加载的3种方式 - 产品大佬都说好
性能优化一直是个热门的话题，但是随着设备性能和网络速度的提升，需要做性能优化的项目可能并不是很多，所以每次做优化都是技术实践和累积的好机会。性能优化的方式有很多，本文将从实例出发带你了解性能优化之预加载。本文从示例出发，带你了解了如何根据项目具体情况做对应的优化。预加载知识你可以亲自去体验下，会有更深的理解。
2024-02-07 16:26:01
1599
原创 IntersectionObserver：前端性能优化的新利器
公众号：程序员白特，可加前端群在当今网页设计中，用户体验和性能优化变得越来越重要。本文将带你深入了解一种强大的前端技术。通过使用IntersectionObserver API，那些性能上的优化。
2024-02-07 15:36:09
1613
转载 3.40秒到231.84毫秒，我用Performance面板分析性能瓶颈全流程（多图流量预警⚠️
公众号：程序员白特，可加前端群工作中发现了一个下拉框打开的数据比较慢，并且打开弹框的时候会有相当长一段时间的延迟，下拉的弹框不是使用组件库的，而是自己封装的一个组件，怀疑存在数据量过大影响的情况，所以借助性能分析工具来找出具体的原因。如何优化不是本文的关键，本文主要和大家一起学习如何使用performance面板来进行性能瓶颈的定位，学习面板的使用，找到性能瓶颈源码并解决问题。
2024-01-27 10:50:27
424
2
转载 反思我写过的烂代码
每个人的性格、技术水平和工作经历都不一样，看待“好代码与烂代码”的标准也各不相同，下图是一张比较出名的关于在Code Review中评判代码质量的图片。
2024-01-17 18:03:40
85
原创 React 18 中的并发性
并发是一种执行模型，其中程序的不同部分可以无序执行，而不会影响最终结果。您可能听说过不同风格的并发性多线程或多处理。由于浏览器中的 JavaScript 只能访问一个线程（worker 在单独的线程中运行，但它们与 React 并不真正相关），因此我们不能使用多线程来并行我们的一些计算。为了确保资源的最佳使用和页面的响应能力，JS 必须采用不同的并发模型：协作式多任务处理。这听起来可能过于复杂，但不要害怕，您已经熟悉这个模型并且肯定已经使用过它。我说的是 -s 和 /。
2024-01-15 13:31:10
980
原创 20行JavaScript 中的简单屏幕录像机
假设您厌倦了屏幕录像机的付费墙和限制状态，并希望继续自己编写代码 - 事实证明，您已经可以在几行代码中拥有基本功能。
2024-01-12 16:55:02
478
原创 用于脚本支持的 CSS 媒体查询
Chrome 120 于近日发布，在这个版本中，我们获得了用于脚本支持的 CSS 媒体查询。简单地说，此媒体查询允许我们测试脚本语言是否可用，并根据支持定制页面内容和样式。我是白特，让我们一起来学习下吧。
2024-01-11 17:16:37
412
原创 2024年前端的前景如何？
2024 年前端的前景如何？自从我们打破了前后端不分离的局面以来，The New Stack 与来自 React、Next.js、Angular 和 Solid 的创建者和维护者讨论了他们 2024 年的计划。以下是前端开发人员在未来一年可以期待的概述。
2024-01-09 15:41:49
1562
原创 实现响应式布局的五种方式
响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。
2022-11-06 15:41:34
19452
1
原创 ES6类的继承
大家好，我是小庄。今天来梳理一下ES6中的继承。顺带记录一下其中比较容易遗忘的知识点。1、extends关键字 实际上，继承的关键是extends：class myClass{}class children extends myClass{}分析：上面通过extends 继承了myClass的所有属性和方法。2、super关键字 super关键字在类中有两种完全不同的表现形式：1、代表函数时使用ES6 要求，子类的构造函数必须执行一次super函
2022-07-03 16:58:14
3266
转载 GitHub上8个很棒的Vue项目
作者：前端充电宝文章：https://mp.weixin.qq.com/s/Hrdc564YZCiaX9-G8PifVw大家好，我是小庄。学习优秀的前端项目有助于我们成长，同时积累编码经验。今天就来分享下 Github 上面 8 个很棒的 Vue 项目！一、项目汇总 Marktext： 笔记应用YesPlayMusic： 第三方网易云播放器PicGo： 图片上传应用PPTist： 在线PPT应用vue2-elm： 仿饿了么vue-element-admin： 后台管理系统Cider： Ap..
2022-07-02 13:43:12
2524
原创 LeetCode 3. 无重复字符的最长子串
Hi，大家好，我是小庄。今天打卡的算法题是 —— 力扣 3. 无重复字符的最长子串该题是校招+社招中，考查频率排名第二的算法题，考察频率排名第一的是反转链表，详细解法请看公众号中的上一篇文章。该题将采用「哈希表 + 滑动窗口」实现，话不多说，一起来学习吧～一、Leetcode题目 1、题目地址点击查看Leetcode题目2、具体题目二、实现代码 1、思路：哈希表 + 滑动窗口（1）具体代码/** * @param {string} s&nbs
2022-06-29 23:39:00
438
原创 LeetCode 206. 反转链表（迭代+递归）
Hi，大家好，我是小庄。今天打卡的算法题是 —— LeetCode 206.反转链表该题将采用「迭代法」和「递归法」分别实现话不多说，一起来学习吧～一、Leetcode题目 1、题目地址点击查看Leetcode题目2、具体题目二、实现代码 1、思路：迭代法；（1）具体代码/** * Definition for singly-linked list. * function ListNode(val,&n
2022-06-22 23:02:48
472
原创 为提高面试通过率，技术岗可以提前做好哪些面试准备？
Hi，大家好，我是小庄。目前2023届秋招提前批已经陆续开始了，考虑到一些校招的同学可能是第一次接触面试（该文章适用于校招、社招），所以这篇文章就是为了记录一些面试技巧，希望可以为同学们的面试助力，早日拿到心仪的offer~话不多说，一起来学习吧～整个面试可以分为面试前、面试中、和面试后三个阶段，每个阶段都有每个阶段的套路。面试前 一、简历好的简历是获取更多面试机会的前提。简历通常有这⼏部分构成：基本资料、教育背景、专业技能、⼯作经历、项⽬经历。1、简历中的重要部分你目前掌握的技能
2022-06-20 14:00:59
573
转载 解决node环境下SyntaxError: Cannot use import statement outside a module的问题
解决node环境下SyntaxError: Cannot use import statement outside a module的问题
2022-06-09 16:59:55
5482
原创 webpack和webpack-dev-server区别解析
webpack和webpack-dev-server这两者自身是有区别的，以及在这两者中使用output.publicPath，效果也是不同的，如何不同呢？
2022-06-08 17:39:33
1387
原创 前端工程化&掌握webpack极速配置技巧
大家好，我是小庄，一个专心于互联网技术的深漂打工人。我们都知道，现在属于前端工程化时代，前端工程化对于我们前端开发来说，是非常重要的。但是小庄觉得自己对于前端工程化了解还是不足的，还有很多需要学习的地方。故这一节，小庄打算就来带大家一起好好认识下前端工程化。包括在这一节中，小庄将详细记录一下，其中一个前端构建工具的配置技巧，即webpack极速配置技巧。一、前端工程化—概述随着前端开发功能要求不断提高，业务逻辑日益复杂。传统的刀耕火种的开发方式，已经不适合现代的开发要求，前端工程化是指遵循一定的标
2022-05-29 20:05:57
774
原创 剑指 Offer II 056. 二叉搜索树中两个节点之和（javascript）
一、题目链接https://leetcode.cn/problems/opLdQZ/二、具体代码/** * Definition for a binary tree node. * function TreeNode(val, left, right) { * this.val = (val===undefined ? 0 : val) * this.left = (left===undefined ? null : left) * this.right = (rig
2022-05-28 16:33:46
250
原创 22届校招生精心整理——前端学习路线(超详细)
大家好，我是小庄，一个22届校招生，同时也是一个专心于互联网技术的深漂打工人。众所周知，前端现在变化很快，框架更新速度非常迅速。那么目前，如果作为一个完全没有接触过前端的小白，应该从哪里开始学习前端呢？【前提准备】一、物质准备有一台可以自己支配的电脑；注意：只看教程，不敲代码就是在浪费时间，有一台自己的电脑用于练习是必须的哈。至少保证每天4个小时以上的学习时间；注意：对于零基础想要学好前端找到一份工作的人来讲，每天至少要保证4个小时以上的学习时间，把学习周期控制在至少六个月以及以上
2022-05-28 14:13:43
282
原创 剑指 Offer 61. 扑克牌中的顺子(javascript)
一、题目地址https://leetcode-cn.com/problems/bu-ke-pai-zhong-de-shun-zi-lcof/comments/二、具体代码/** * @param {number[]} nums * @return {boolean} */// hashmap + 遍历// 时间复杂度: O(1)// 空间复杂度: O(1)var isStraight = function(nums) { let set = new Set(); let
2022-04-21 13:47:19
1155
原创 剑指 Offer 58 - I. 翻转单词顺序(javascript)
一、题目地址https://leetcode-cn.com/problems/fan-zhuan-dan-ci-shun-xu-lcof/comments/二、具体代码/** * @param {string} s * @return {string} */// 双指针// 时间复杂度: O(N)// 空间复杂度: O(N)var reverseWords = function(s) { s = s.trim(); let j = s.length - 1, i = j;
2022-04-13 13:41:36
813
原创 剑指 Offer 57 - II. 和为s的连续正数序列（javascript）
一、题目地址https://leetcode-cn.com/problems/he-wei-sde-lian-xu-zheng-shu-xu-lie-lcof/二、具体代码/** * @param {number} target * @return {number[][]} */// 滑动窗口// 时间复杂度：O(N)// 空间复杂度：O(N)var findContinuousSequence = function(target) { let i = 1, j = 1;
2022-04-11 13:35:07
735
原创 剑指 Offer 57. 和为s的两个数字(javascript)
一、题目地址https://leetcode-cn.com/problems/he-wei-sde-liang-ge-shu-zi-lcof/二、具体代码/** * @param {number[]} nums * @param {number} target * @return {number[]} */// 双指针做法// 时间复杂度：O(N)// 空间复杂度：O(1)var twoSum = function(nums, target) { let i = 0, j =
2022-04-10 11:36:13
886
原创 剑指 Offer 56 - II. 数组中数字出现的次数 II(javascript)
一、题目地址https://leetcode-cn.com/problems/shu-zu-zhong-shu-zi-chu-xian-de-ci-shu-ii-lcof/comments/二、具体代码/** * @param {number[]} nums * @return {number} */// 位运算，通用模版// 时间复杂度：O(N)// 空间复杂度：O(1) var singleNumber = function(nums) { // 正确做法,需要加上每一位填
2022-04-08 13:46:41
868
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人