- 博客(70)
- 收藏
- 关注
RSS订阅原创 JS实用小方法-将时间转换为 `刚刚`、`几秒前`、`几分钟前`、`几小时前`、`几天前`、几月前
欢迎关注"所谓前端"微信公众号,大家一起交流点击扫码关注。
2024-02-20 13:27:22
492
原创 vue3中不支持.sync语法糖的解决方案
如果你需要更多的控制，或者你想要明确地表达数据更新的意图，你可以使用自定义事件。'title';;;importfrom;constref。
2024-02-20 13:26:42
893
原创 2024】前端，该卷什么呢？_2024-02-16
欢迎关注"所谓前端"微信公众号,大家一起交流点击扫码关注结尾有推荐很多篇优质的前端文章~人工智能会革掉我们的命吗？继续学习JavaScript，使用TypeScript你必须要会微前端了全栈框架的兴起你得会 SSR跨端：建议别入坑 Flutter 了低代码要入吗要搞全栈吗？鸿蒙生态要入吗？推荐一些 2023 看过的好文章。
2024-02-16 22:25:55
917
原创 JSDoc 真能取代 TypeScript?
这几个月经常听到知名开源项目抛弃 ts 拥抱 JSDoc 的新闻，我们一起探究了一下。JSDoc 是在 js 的注释里通过 @type、@typedef、@template、@param 等来定义类型，然后开启 checkJS 和 allowJS 的配置之后，tsc 就可以对 js 做类型检查。ts 里可以定义的类型，在 JSDoc 里都可以定义，比如变量、函数、class、泛型，甚至类型编程等。复杂的类型还可以抽离到 dts 里，在 @type 里引入。也就是说 JSDoc 确实可以替代 ts。
2024-02-09 20:57:25
967
原创 拓展边界：前端世界的跨域挑战
在此之前，我们了解一下一个域名地址的组成：跨域指的是在网络安全中，由于浏览器的同源策略（Same-Origin Policy）限制，当一个网页的协议、域名或端口与另一个网页的协议、域名或端口不同时，就存在跨域问题。如果缺少同源策略的限制，可能会导致安全隐患，如跨站脚本攻击（XSS）或跨站请求伪造（CSRF）等。欢迎关注"所谓前端"微信公众号,大家一起交流点击扫码关注。
2024-02-09 20:56:03
872
原创 十分钟学会WebSocket
WebSocket 是一种在客户端和服务器之间实现双向通信的网络协议。它通过在单个 TCP 连接上提供全双工通信功能，使得服务器可以主动向客户端推送数据，而不需要客户端发起请求。WebSocket 协议是一种基于 TCP 的应用层协议，它提供了在客户端和服务器之间进行双向通信的能力。相比传统的 HTTP 协议，它具有更低的延迟和更高的实时性。WebSocket 协议通过建立一条持久化的连接来实现双向通信，从而避免了 HTTP 协议中频繁建立和断开连接的过程，减少了网络开销和服务器的负担。
2024-02-09 20:53:57
865
原创 年底我被裁了，大环境不好？
2023 年 12 月，失业了，年底裁员的这波浪潮终究还是没有扛过去，没错，年底被裁了，被裁的不是我一个，是整个部门，其实对于这一天早就有预感，因为我们只是给鹅厂做事的一条 dog，干的比外包多，福利比集团少，在降本增效的压力下，迟早有一天会毫不犹豫的把我们一脚踢开，只是没想到这么迅速，这么突然，突然到没有任何风声，突然到十一长假刚归来，突然到前两天才有新的项目开始。
2024-02-09 20:50:53
789
原创 前端文艺复兴：Vue3真的需要Pinia吗？
纸上得来终觉浅，绝知此事要躬行很多时候感觉在前端学不动了，其中原因之一必有：概念太多、轮子太多、技术更新太快，需要不断学习…但个人感觉很多概念都是莫须有的，利用原生知识亦可解决，而无需增加心智负担，但要识别这些信息谈何容易啊，希望我们始终保留对问题本质的好奇吧。最后分享一句很喜欢的编程哲学语句：欢迎关注"所谓前端"微信公众号,大家一起交流点击扫码关注。
2024-02-05 05:28:16
1000
原创 React 期许的未来（RSC）可不能并不是国内前端想要的未来 usagisah usagisah
我们来聊点实际的，来聊聊这东西的实际价值，对我们日常的前端工作的帮助怎样，以及，为了实现它，作为开发者要做怎样的权衡。开头的是只能运行在服务端的组件，它可以做各种浏览器做不到的事，并且相关的依赖都不会带到浏览器，也不会被打包到客户端的产物中；我用了后发现不是我想要的，它只是个为了内部服务，顺便开源的产物，我需要一个自己的框架，因为总得有个东西得干那些开发者不想干的脏活累活吧。起因是我想在家很闲找点事情做，因为工作的代码写伤了，面试也免得怀疑人生，我没有社交，没工作，唯一会的只会写代码了，不过这些都不重要。
2024-02-05 01:51:48
884
原创 一篇文章认识Vue3
vue3 源码用 ts 重写了, vue3 对 ts 的支持更友好了 (ts 可以让代码更加稳定, 类型检测!reactive 处理的数据, 必须是复杂类型, 如果是简单类型无法处理成响应式, 所以有 ref 函数!reactive/ref的响应式功能是赋值给对象的, 如果给对象解构或者展开, 会让数据丢失响应式的能力。顶层的绑定会自动暴露给模板，所以定义的变量，函数和import导入的内容都可以直接在模板中直接使用。setup 函数是一个新的组件选项, 作为组件中 compositionAPI 的起点。
2024-02-02 13:46:56
964
原创 10个常考的前端手写题，你全都会吗？（下）
所以可能会出现这样的情况，就是当前执行栈执行的时间很长，导致事件队列里边积累多个定时器加入的事件，当执行栈结束的时候，这些事件会依次执行，因此就不能到间隔一段时间执行的效果。寄生组合式继承是对组合式继承（调用了 2 次父构造方法）的改进，使用父类的原型的副本来作为子类的原型，这样就只调用一次父构造函数，避免了创建不必要的属性。的继承不同，实质是先将父类实例对象的属性和方法，加到 this 上面（所以必须先调用 super 方法），然后再用子类的构造函数修改 this。
2024-01-28 14:15:20
943
原创 前端框架搭建——从零到一搭建一个高颜值Vue3后台管理系统(三)
上一篇我们集成项目所需要的插件，在整个main.ts里的结构都抽离到了各自相应的文件中，使整体main的结构看起来更加简介明了。今天我们讲下项目页面的布局。
2024-01-28 14:10:16
1093
原创 React 中条件渲染的 N 种方法
甚至可以使用true和false来做key来处理一些特定场景，在下面的场景中isWorkDay,isSunday,isFestival都可能是true，所以这里产生了优先级，可以利用这里的优先级来做一些条件渲染。条件渲染在React开发中非常重要的功能，它允许开发人员根据条件控制渲染的内容，在创建动态和交互式用户界面方面发挥着至关重要的作用，本文总结了常用的的条件渲染方法。HOC 是包装组件的函数，可以根据收到的 props 有条件地渲染组件，从而提供更灵活的方式来跨组件共享逻辑。
2024-01-28 14:08:31
1287
原创 基于一次应用卡死问题所做的前端性能评估与优化尝试
通过分析与优化尝试，我们解决了客户端卡死问题，并改善了卡顿现象，但其中暴露出一些编程规范与用法不够优雅的问题还需要在日常中持续完善，这也是这次优化未尽事宜，需要在未来不断排期以彻底解决。当然，此中涉及到的一些调试与问题定位方法，也不仅局限于客户端的问题排查，而是通用 Web 应用性能评估时调试可以用到的手段，而更深入的研究则要开始涉猎到框架代码等内部函数调用的地方了，这也是本文未涉及部分，有待后续继续研究与定位。原文地址基于一次应用卡死问题所做的前端性能评估与优化尝试个人公众号「黯晓。
2024-01-20 19:32:37
980
原创 一篇文章带你彻底了解flex布局
先来看看它的定义：弹性布局是指通过调整其内元素的宽高，从而在任何显示设备上实现对可用显示空间最佳填充的能力。flex-shrink: 指定了 flex 元素的收缩规则，flex 元素仅在默认宽度之和大于容器时才会发生收缩，其收缩的大小是依据 flex-shrink 的值。还有两个属性，简单介绍下，就不用举例了： initial：设置该属性为它的默认值 inherit：从父元素继承该属性。还有两个属性，简单介绍下，就不用举例了： initial：设置该属性为它的默认值 inherit：从父元素继承该属性。
2024-01-19 13:43:53
377
原创 2024前端年末备战面试总结——框架篇(Vue)
框架篇（Vue）本文是本人根据Vue官网上的内容或者网上一些其他朋友的文章以及自己的理解，整理归纳出来的一篇Vue方面的面试题及知识点，其中不免有许多漏掉的问题或是答案，发现错误的或者是有什么问题需要补充的朋友们，可以在评论区留言，大家虚心交流，一起进步。1. Vue是什么Vue是一款基于MVVM架构的渐进式框架，它主要用于构建单页面应用（spa），它的特点有声明式渲染、响应式两大点。（1）什么是MVVMMVVM就是Model-View-ViewModel的缩写，它是一种架构模式，是MVC（Mod
2024-01-19 13:33:18
801
原创 什么是NodeJS
接触 node.js 有好几年了，也开发了好几个项目了；但每次提起 node.js，始终不敢说自己入门了，归其原因，大概就是如下所示为了进一步加强理解，系统的梳理相关知识以作备忘，本节将从以下几个方面介绍 node.js。
2024-01-18 13:41:55
892
原创 15分钟学会Pinia
掌握：使用 storeToRefs 解决解构仓库状态丢失响应式的问题。当我们想解构 store 提供的数据时候，发现数据是没有响应式的。在学习 vue 组合式API创建的响应式数据的时候，使用。Pinia 是一个简单实用的状态管理工具，和菠萝一样。当你想从 store 中解构对应的状态使用，需要使用。导入，实例化，当做插件使用，和其他插件使用套路相同。使用Pinia与在组件中维护数据大体相同，这就是。掌握：实用Pinia使用，管理计数器的状态。，当然它也是类型安全的，支持。创建仓库得到使用仓库的函数。
2024-01-18 13:23:13
408
原创 从前端角度浅谈性能 | 京东物流技术团队（转载）
在移动设备上，5 秒钟内完成加载是更现实的目标。自网站诞生以来，页面白屏时间、用户交互的响应速度等一直都是开发者关心的问题，这直接影响了一个网站能否为用户的浏览提供舒适的服务，而这种舒适度，直接关系着对用户的吸引力，毕竟谁都不能忍受一个页面长达10秒的空白屏时间，更别说点击按钮后，页面长时间的毫无反应。connectEnd:HTTP（TCP） 完成建立连接的时间（完成握手），如果是持久连接，则与 fetchStart 值相等,如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接完成的时间。
2024-01-17 22:15:37
1007
原创 前端公共组件库优化
当前这版优化对现有的组件库做了一次大的调整，本身不涉及具体组件的改动，只是规范和优化整个流程，方便前端开发接入和使用等，但是还存在不少的优化空间，比如以submodule接入的方式，笔者觉得不是很好，还是偏向于用npm包的方式，但是由于内部还没有搞自建的npm源，加上不少项目都已经在用submodule的方式了，所以暂时不做这种处理。我们需要在准备发版的时候，更新package.json中的版本号，生成changelog文件，提交更改和创建标签，这里我们需要用到第三方的工具包，这里用了。
2024-01-17 21:14:37
1038
原创 useEffect 执行顺序，执行就先子后父，清除也是先子后父
粗略理解为 useEffect 一个闭包函数，那么按照正常函数的逻辑来理解，那肯定是先子后父，再继续追问，为什么普通函数逻辑调用是先子后父，这个嘛，就得JavaScript的作者或者研究一下底层逻辑。...
2022-02-21 17:59:40
1702
原创 border hove不影响布局动画
.class { border: 1px solid transparent; transition: border-color 0.3s ease-in-out; &:hover { border: 1px solid #5170fe; }}
2022-02-18 10:52:36
372
原创 最实用的正则表达式整理
校验数字的表达式1 数字： ^[0-9]$ 2 n位的数字： ^\d{n}$ 3 至少n位的数字： ^\d{n,}$ 4 m-n位的数字：^\d{m,n}$ 5 零和非零开头的数字：^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$ 7 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$ 8 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$ 9 有两位小数的
2022-02-17 16:18:30
167
原创 JS 按字母排序
默认情况下，对字符串排序，是按照ASCII的大小比较的，现在，我们提出排序应该忽略大小写，按照字母序排序。要实现这个算法，不必对现有代码大加改动，只要我们能定义出忽略大小写的比较算法就可以：var arr = ['Google', 'apple', 'Microsoft'];arr.sort(function (s1, s2) { x1 = s1.toUpperCase(); x2 = s2.toUpperCase(); if (x1 < x2) { ret
2022-02-17 15:54:08
9660
原创 基于Next.js搭建基本可用于项目开发的过程
简单介绍要从头开始使用 React 构建一个完整的 Web 应用程序，需要考虑许多重要的细节：必须使用打包程序（例如 webpack）打包代码，并使用 Babel 等编译器进行代码转换。你需要针对生产环境进行优化，例如代码拆分。你可能需要对一些页面进行预先渲染以提高页面性能和 SEO。你可能还希望使用服务器端渲染或客户端渲染。你可能必须编写一些服务器端代码才能将 React 应用程序连接到数据存储。一个 框架 就可以解决上述这些问题。但是，这样的框架必须具有正确的抽象级别，否则它将不是很有用。
2022-01-26 09:59:57
2654
原创 CSS黑魔法
CSS黑魔法，可以理解为。你用它的情况很少，但是在你需要黑魔法来实现一下CSS布局或者效果的时候，你会发现它非常好用。以下，是我在工作中，用到的黑魔法。写下来是方便以后查阅。撑起图片高度[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PnFMWYtg-1633677034229)(598d65cd16238.png)]它的实现效果利用该元素的 position:relative 和 padding-top 的值来设置。但是，得有前提条件设置这个元素的 width:
2021-10-08 15:10:55
426
原创 论从一个电影情节解释女孩子为什么离开还要收拾行李箱
从电影的情节发现，很多情侣吵架，女方都会进入一个收拾的画面。从小时候开始就一直喜欢看电影，虽然大多数看的都是科技电影。但是，偶尔也会放空一下看看爱情类的片子。每次看到这些片子，我都发现有一个很"诡异"的情节，女主往往会因为某些事情跟男主吵架或者生气什么的，女主会生气回到家里（这时他们已经同居了）疯狂地收拾行李，男主总会劝，劝着劝着两方又吵起来最终闹得不欢而散。 先看一个视频...
2021-10-08 15:09:52
523
原创 拥抱浪潮 -- 吴军的《浪潮之巅》读后感
从书中举一个成功和一个失败的例子，给我的启发。讲明站在浪潮之巅的重要性，以及做的事情应该为下一个浪潮而准备。同时，从更长时间轴看待问题更具有全面性。IBM - 蓝色的巨人也可以跳舞拥抱浪潮的好处非常明显，就是在每次都能在下一个浪潮的时候成功转型找到自己的位置，无论是公司还是自己。为了更加全面看待这个问题，先了解一些背景。首先全世界从温饱过渡到产能过剩的时代，是因为经历工业革命之后的事情。第一次工业革命是以蒸汽机为代表，第二次工业革命以电力的大规模应用为代表，电灯的发明为标志。第三次工业革命则是在第
2021-10-08 15:09:21
510
原创 微信小程序跨页面通信解决思路
宏观上，微信小程序是由一个个 Page 组成的。有时候我们会遇到一些业务存在耦合的 Page，一个 Page 里某个状态改变后，相关 Page 的状态需要进行更新。而在小程序里，每个 Page 都是一个模块，有着独立的作用域，因此 Page 间需要有一种通信策略。想象一个业务场景，用户首先进入订单列表页。然后点击其中一个订单，进入到订单详情页。当用户在订单详情页对订单进行操作，例如支付、确认收货等时，该订单的状态就会发生改变。此时需要对上一级的订单列表页中该订单的状态进行更新：[外链图片转存失败,源站可
2021-10-08 15:08:30
680
原创 彻底理解 innerWidth、outerWidth、screen.width、vw 和 getBoundingClientRect的区别
起因说实话，撸了接近三年的前端。每次要用到innerWidth、outerWidth、screen.width 、vw、clientWidth和 getBoundingClientRect，都很可耻地点击谷歌浏览器，然后…你懂的。才能知道我应该用那个。在此之前，我草草写了一篇极短的文章，天真地以为自己理解了，谁知不然，每次都是很熟练地…,哦不。贴上图片，引以为戒: 说实话，至今没看懂这张图片，并且不知道为什么当初会吧这张图片放上去。手动狗头[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来
2021-10-08 15:07:49
3204
1
原创 向量代数，书评网站利用户间的不相关性推荐
各种大佬说，想要在开发走得远，必须学好数学。好比如，数学类似内功心法，编程技能是招数，你苦练招数，只是增加熟练度，到了后面想要打败更强大的敌人，单凭招数熟练度是啃不动的了，所以这个必须拥有强大的内功心法，让招数发挥更强大的威力才得以击败他。这次，总结一下自己近段时间学习数学的知识和例子，并且为自己解惑一下，书评网站如何利用用户不相关性，推荐书给你，以达到自己内功和招数的融合。向量向量是一个有方向和大小,且满足平行四边形法则的几何对象。比如下图[外链图片转存失败,源站可能有防盗链机制,建议将图片保存
2021-10-08 15:06:57
92
原创 三年来从我的角度谈谈顺德饮食文化 - 论专注做到极致的重要性
我在顺德工作三年的经历，从顺德人对饮食的热爱让我产生了一个思考。话说，从2017年来到顺德工作已经三年了，但三年来我发现为什么他们一谈起吃的，吐沫横飞，面红耳赤滔滔不绝呢？相反，谈起工作的时候相对兴趣则是一般。在一次做"趣抢券"项目的时候，先介绍这个项目主要是做什么的，简单来说用户可以购买优惠券，然后根据这个优惠券提供的商家地址到店消费。因为我们对顺德本地饮食并不是很了解，所以CEO喊了一个妹子暂且叫她董小姐吧,去逛逛附近的广场那家店条件比较适合跟我们合作。前几次，CEO和一个男的去逛了广场，他们
2021-10-08 15:06:20
268
原创 一篇文章理解前端缓存
首先记住一点,HTPP1.1新生代总比老的HTTP1.0总要有更多的优势。ExpiresExpires: HTTP 1.0的规范。用来告诉浏览器这个资源的过期时间。例如: Expires: Wed, 26 Aug 2020 06:32:49 GMT原理：1、每次请求这个资源时，浏览器自动判断是否超出了这个时间。2、如果没有超出，就直接使用缓存(http status:200 from cache)。3、不发送请求。如果超出，看其他参数的情况。缺点：由于Expires这个时间是服务器端的
2021-10-08 15:05:45
167
原创 2021年我总结的面试题
说一下PromisePromise是什么？Promise是一种用于解决异步问题的思路、方案或者对象方式。Promise怎么用？Promise是一个对象，所以先用new的方式创建一个，然后给它传一个函数作为参数，这个函数有两个参数，一个叫reolve,另一个叫reject、紧接着，就用then来进行调用Promise原理在Promise内部，有一个状态管理器的存在，有三种状态: pending、fulfilled、rejected(1) promise初始化状态为pending(
2021-10-08 15:04:26
94
原创 手摸手，带你用Beego撸商城系列三（系统配置篇）
完整项目地址： go-shop-b2c系列文章：手摸手，带你用 Beego撸商城 系列一（基础篇）手摸手，带你用 Beego撸商城 系列二（登录篇）手摸手，带你用 Beego撸商城 系列三（系统配置篇）前言这篇就来讲解，一下要启动项目的一些基础配置，比如通过 bee 工具生成 model 层，CORS配置，router配置，日志配置等Bee 工具生成 model 层bee 工具简介bee 工具是一个为了协助快速开发 beego 项目而创建的项目，通过 bee 您可以很容易的进行 be
2021-06-29 14:05:42
332
2
原创 手摸手，带你用Beego撸商城系列二（登录篇）
完整项目地址： go-shop-b2c系列文章：手摸手，带你用 Beego撸商城 系列一（基础篇）手摸手，带你用 Beego撸商城 系列二（登录篇）手摸手，带你用 Beego撸商城 系列三（系统配置篇）前言一个商城后端系统，登录尤其重要，首先用户下单，需要登录，后台管理系统，需要登录。我们需要做的是，除了登录以及注册，其余的接口需要进行登录校验。base_controller 封装由于我们需要进行登录校验和不进行登录校验的 Controller，又由于 base_controller
2021-06-29 14:05:09
236
原创 手摸手，带你用Beego撸商城系列一（基础篇）
完整项目地址： go-shop-b2c系列文章：手摸手，带你用 Beego撸商城 系列一（基础篇）手摸手，带你用 Beego撸商城 系列二（登录篇）手摸手，带你用 Beego撸商城 系列三（系统配置篇）前言这里不会讲解太多的基础知识，主要介绍关于从零开始使用 Beego 框架撸一个商城思路目录结构├── common // 公共函数├── conf // 配置相关├── controllers
2021-06-29 14:04:33
228
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人