世纪末的魔术师__
获得徽章 1
- 5.8 day18
文章从近期较火的Islands 架构架构入手，举例了一些比较知名的新框架如 Fresh、Astro 都是 Islands 架构的典型代表。文章先从MPA 和 SPA入手——MPA 和 SPA 是构建前端页面常见的两种方式，理解 MPA 和 SPA 的区别和不同场景的取舍是理解 Islands 架构的关键；之后主要介绍 Islands 架构诞生的来龙去脉，分析其相比于 Next.js、Gatsby 等传统方案的优势，并且剖析社区相关框架的实现原理，以及分享笔者在这个方向上的一些实践。对于小白非常友好～展开评论点赞 - 5.7 day17
文章开头以项目的实际需求入手——可视化大屏设计，选用哪种方法？如何实现自适应？根据目前主要的项目开发方案，主要有三种：vh+vw，rem，scale。三者各有利弊，在更多时候还会混合使用。笔者按照这三种方案分别进行了详细的代码实现与步骤详析，容易理解，适合小白入门了解～评论点赞 - 5.6 day16
文章非常有趣味性的介绍笔者自己在学习树状结构时提出的质疑：树状结构在数据处理时非常麻烦且容易出错，又要拆解又要遍历非常麻烦。再向大佬提出疑问之后，大佬给出答案：直接扁平化处理。这样的思路或许听起来有些荒谬，但实际上是一种非常有效的树状结构处理方式。平时见到的树状结构一般都是每层数组中的item都会有一个children，里面嵌套一个数组然后每个子item也还会有各自的children，就这样一直嵌套下去。而拍扁后的树状结构其实是一个对象，每个item都扁平化平铺在第一层，每一个item都有各自的parentId与childrenIds。针对扁平化前后，笔者从各处不同点给出了答案，讲解详细，用非常“抽象”的图例以易于理解的方式给出解答，对于刚接触树状结构的小白来说不失为一种新的思考问题的思路。展开评论点赞 - 5.5 day15
文章从笔者自身难保学习的经验感悟入手，将自己从只会打印输出解决问题，到后续通过进一步学习了多种断点调试方式，比如普通断点、条件断点、DOM断点、VS code 断点等，这些理解运用在公司项目中，辅以对于vue源码的深度解读，逐渐熟习并掌握。
之后在文章中介绍了console的一些不太常见的用法，各种类型的断点方式，条件断点，DOM断点，VS code 断点，每种方式都辅以源码及具体实现操作，对于想要对console有所延伸的小白来说非常友好。展开评论点赞 - 5.4 day14
文章从简化CSS相关代码方面入手，着重讲解比较函数Clamp(),Max(),Min(),主要介绍的应用场景包括流体的尺寸和定位，装饰性元素的运用，流体高度的调整，Loading Bar，动态分割器，动态 border Radius及间距调整。针对不同的应用场景辅以简单的代码示例，对于刚接触CSS不久的小白非常友好。展开评论点赞 - 5.3 day13
文章主要从定时器在日常生活中的大量运用入手，提出CSS对于日常定时器缺点的改进。主要从hover延时触发、长按触发事件、轮播和暂停三个方面入手进行讲解，并辅以具体实现代码及易出错原因及改正方法，对于想要实现用CSS使得计时器得以改进的小白非常友好。评论点赞 - 4.25 day12
文章主要讲解了很多人在做react项目时都用过的antd组件库的源码经常是不被注意到的，但实际上对其源码有足够了解才能够在之后的项目或者是学习中对antd源码进行相关调试以更好地利用该组件库的强大性能。在之后的文章当中按照可能会调试的每个功能分别进行讲解，并给出相应情况下的可能报错点及正确修改方式，这对于初次意识到antd组件库的调试的初学者来说相当友好。展开评论点赞 - 4.24 day11
文章主要讲解了如何使用fabric.js 快速开发一个图片编辑器，从架构设计、初始化、背景设置、插入元素、属性调整、元素对齐及其他用法角度依次进行介绍和详细解析并辅以源码进行各步骤讲解。在文章最后给出相关的图片编辑效果；同时不仅仅是满足上述图片的各种编辑操作，还可以结合数据接口拼接模板生成图片，轻松实现定制模板 + 生成图片的功能，为初学者进行相关编辑器的开发提供了易于上手的操作模版。展开评论点赞 - 4.23 day10
文章从常见的JS函数节流入手，引出文章主要讲解内容——CSS实现节流。文章主要从CSS实现的思路分析、CSS实现一个粒子动效按钮、CSS实现按钮点击动效的套路三方面进行讲解。首先针对思路方面，讲解了CSS的节流实现与JS的实现在思路上有很大的不同，即CSS的节流可以理解成是对 CSS 动画的控制；之后的动效按钮及点击动效的套路讲解非常详细，并辅以源码进行具体讲解，对于初学者非常友好。展开评论点赞 - 4.22 day9
文章基于作者的真实面试问题：设计一个不能操作DOM和调接口的环境，针对此较为“奇怪”的问题进行步骤拆分和答案解析。实现思路包括：
1）利用 iframe 创建沙箱，取出其中的原生浏览器全局对象作为沙箱的全局对象
2）设置一个黑名单，若访问黑名单中的变量，则直接报错，实现阻止\隔离的效果
3）在黑名单中添加 document 字段，来实现禁止开发者操作 DOM
4）在黑名单中添加 XMLHttpRequest、fetch、WebSocket 字段，实现禁用原生的方式调用接口
5）若访问当前全局对象中不存在的变量，则直接报错，实现禁用三方库调接口
6）最后还要拦截对 window 对象的访问，防止通过 window.document 来操作 DOM，避免沙箱逃逸
针对上述思路，作者主要讲解了自己在整理思路过程中遇到的走不通的方式，对每一步实现方式进行优化改进，最终实现面试者提出的问题。文章讲解很清晰，是一篇不同于其他相关的js文章，从不常想到的角度入手，同样将每个所涉及到的知识点进行了讲解与前后联系，这样的方式能够更好地辅助我们学习js相关知识。展开评论点赞