认识 Houdini:源自一场"邂逅"吃饭看书刷视频,修身养性三件套。遇到论坛就想逛一逛,遇到知识点就想用一用。这不,这天我正闲心,所以所以刷了刷 MDN 的网站。点到Web 开发者指南这页下,看到了一个有点陌生的词汇——CSS Houdini。我顺着自己的"脑机接口",翻了翻脑袋里的前端知识库,没什么印象。没印象没关系,可以现学。了解 Houdini:全方位扫描中Houdini 是一组底层 AP
前言之前对后台系统的数据权限进行了深入的探索,发现了存在的一些问题。本篇着重从表格数据权限聊起,讲一下表格数据权限的兜底策略实现方案。表格数据权限的兜底权限控制不了"手动挡",但是前端可以。虽然有些后知后觉,但是我登时就想到了两种兜底方案。方案一:表格组件增加必须入参的校验该方案很适合,已经二次封装了表格组件。我们在引入了第三方UI库之后,会使用UI库提供的表格组件,节省开发成本。其实,还可以根据
为什么提边界?除了上面提到的,有些过度设计导致的不容易找到修改位置,代码阅读不便。还有一个同样重要的问题。那就是老代码改动不全或现有功能不兼容。如果没注意到这个问题,且提测的时候没有进行特别的说明,可能导致线上Bug的发生。复用设计,不同之处也很重要这个单拎出来写,是因为之前吃过亏。前面提到了功能设计可能会带来的三个问题,其中第一个问题,对于复杂的功能,一味的关注相同之处,去做逻辑复用,导致后续出
故事是这样开始的很久很久以前,我关注的一个游戏博主,发了一个游戏视频。然后我就见识到了什么叫,「游戏叫你一步噶,你绝对走不到第二步」。这个带那么点整蛊的性质的脑洞游戏,瞬间引起了我浓厚的兴趣。需要玩家克服大脑常规套路的惯性,那岂不是游戏处处是惊喜。不过,游戏的本质还是在于趣味性,玩家掌握了规律之后,还是可以通关的。等等,有没有无法通关的游戏?这不就来了么,被「愚弄」智商的愉乐游戏,不设计一个怪浪费
背景目前我们的多端项目中的小程序开发,每次都要手动在开发者工具中进行上传操作,并填写版本信息。我计划实现小程序端的自动化发布,正好川哥有一篇相关工具库的文章。文章中提到了两个第三方库,我都可以直接用。但是,终于要提到本篇的主题了。在自动化发布之后,开发者为 ci 机器人的名称,如下图:这样一来,没办法知道具体是哪位开发者提交的版本。于是,我接受建议,采用获取 Git 仓库里协作者用户名+拼接到项目
前言不知不觉中,源码的文章也写了几期了,每一期都能多少有些收获。原本,我在看 remote-git-tags 源码之前,计划带着 3W 的思维去看。但是,我有了一瞬间的停顿。这个库的源码不是很多,是不是可以改变个思维。当已知库的实际用途的情况下,是不是可以反向推导出实现方案。没准,过程中能时不时来个惊喜。功能测试先来看一下,remote-git-tags 具体是干什么的。1、先生成 package
常用图片资源类型我们项目里目前主要有三种图片资源类型第三方图片资源、本地SVG、本地base64这三种对应不同的使用场景:对于图片画质要求较高、图片内容较复杂的,一般都是将图片资源放到第三方图床上,页面展示通过加载远程地址的方式;小的 icon 图标,首选 SVG 格式,文件体积小,加载更快速。但是实现成本比较大,一般情况需要设计师的支持;base64,某些特殊功能实现下需要的格式,不常见 ,但是
前言await-to-js 的源码较少,代码较少的情况,可以尝试采用 3W 方法进行源码分析,帮助快速了解它的实际应用场景。阅读本文,会有以下收获:了解 await-to-js 库能解决什么问题。分析 await-to-js 库是如何解决问题。摸索 await-to-js 库的实际使用场景。Why:await-to-js 诞生的契机打开它的 github 地址,有很简单的一句介绍:Async aw
前言本篇主要分享如何实现一个弹窗展示形式的6位卡号输入功能。6位卡号输入前面是根据卡的不同状态的流程实现,接下来,讲讲卡号输入的交互实现。卡号输入 UIUI 的呈现,会影响前端的实现方式。这里 UI 设计成弹出层的方式,每个数字都是一个方框。开发前在开发前,我列了一些可能出现的问题。比如,不同手机的光标样式、输入时页面抖动、input无法只输入数字等。所以我在实现的时候,有针对性的规避前面罗列的问
前言前面提到了可以使用yocto-queue库代替Array操作数组,本篇则深入源码了解一下yocto-queue是如何实现替代数组的。yocto-queue源码分析源码中的代码量相对较少,读起来会比较轻松,看似可以琢磨的点少,其实不然。代码中包含知识点主要包括类的属性、链表与数组的对比、队列、自定义迭代器等,容我细讲。git 地址:yocto-queueNode 类node 类的作用是在新增操作
前言对于数组类型的数据处理,对 Array 方法的时间复杂度的问题,没有深入研究。最近有时间正好研究了一把,看有没有比较好的替代方式 。前端关于性能问题,一直十分关注。提升性能的方式有很多,有时候一个简单的数据操作,前端开发者们也会“货比三家”,尤其是对数据的处理,总是在对比性能,时间复杂度是衡量标准之一。后来发现了一个第三方库yocto-queue 库或许可以解决我的困惑,开研究一下吧。yoct
前言某天正在研读源码,突然发现一个有趣的代码段。这个代码段里包含一个运算,运算符是“**”。一般优先级相同的运算符做运算的时候,从左到右运算,不会添加额外的符号,比如小括号。通常是不同优先级的运算符做运算,才会为了保障运算结果的正确,添加小括号。所以这看似多余的代码,但是并不影响代码的正常运行,这是什么情况?让我们来一探究竟吧。** 运算符,相同运算符还要小括号?编程欢乐小剧场某:咦?一:干什么?
前言本文主要讲解 classnames 相关的知识点。对 classnames 源码,按照功能模块进行解读。尤其对于源码中关键代码从实现层面做了解读。 在总结过程中,对 CSS-in-JS 写法有了不同的想法,结合大佬的文章,将想法记录在了文末。classnames 的原理源码目录功能模块目录结构classnames ┣ ?benchmarks ┃ ┣ ?fixtures.js ┃ ┣ ?
old school 与回忆我记得上学的时候,很喜欢互赠纸质贺卡。有一段时间,立体贺卡特别流行,深受大家的喜欢。随后,伴随着互联网的发展,诞生了电子贺卡,不仅寄送方便,而且可以播放音乐和动画效果,且是免费的。因此电子贺卡逐渐成为人们相互问候的优先选择。再后来,无论是电子贺卡,还是纸质贺卡,都逐渐淡出大众的视野。偶尔,出去旅游,会购买当地特色的明信片作为伴手礼。听说在有「世界尽头」之称的乌斯怀亚,有
Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号