packtpub.com 是一家电子书网站，目前在上面它们每天都会赠送一本电子书，今天送的是这本Mastering The Faster Web with PHP, MySQL, and JavaScript。注册账户后就可以免费获取了，没有付费订阅的用户只能在线阅读，同时也提供了书中的源码。获取地址：https://www.packtpub.com/free-learning截止时间：2023 年 11 月 28 日 8 时 来自反斗限免 ...继续阅读 (48)

本文翻译自19 Practical ES6 Snippets to Solve Common JS Problems，作者： Madza， 略有删改。在实际工作中，开发者常面临一些需巧妙编程解决的挑战。有时几行代码就能迎刃而解。本文整理了一系列实用代码片段，助您轻松处理URL、DOM操作、事件处理、日期处理以及用户偏好设置等常见问题。这些精选代码片段均源自“30 seconds of code”——一个卓越的编程资源库。我强烈推荐您查阅其完整代码，以获得更多灵感。选择这些代码片段的首要准则是它们的实用性。希望您能在这里发现宝贵的资源，并将其应用于未来的项目中，以提升编程效率和质量。1.如何获取base URL？const getBaseURL = url => url.replace(/[?#].*$/, ''); getBaseURL('http://url.com/page?name=Adam&surname;=Smith'); // 'http://url.com/page'2.如何检查URL是否是绝对的？const isAbsoluteURL = str => /^[a-z][a-z0-9+.-]*:/.test(str); isAbsoluteURL('https://google.com'); // true isAbsoluteURL('ftp://www.mys ...继续阅读 (71)

大家好，我卡颂。长期使用React的同学应该知道，React中存在两种组件：Class Component，类组件Function Component，函数组件既然提到类和函数，那么很自然的，我们会进一步思考：类组件和OOP（面向对象编程）有关系么？函数组件和FP（函数式编程）有关系么？毕竟，如果类组件和OOP有关，那么OOP中的思想（继承、封装、多态...）也能指导类组件的业务开发（函数组件与FP的关系同理）。换言之，我们可以直接用这些编程范式的最佳实践指导React项目开发。那么，函数组件和函数式编程究竟是什么关系呢？本文会围绕这个话题展开讲解。函数组件 和 函数式编程 有关系么？欢迎围观朋友圈、加入人类高质量前端交流群，带飞编程范式与DSL首先，我们应该明确，框架语法本质是一种DSL（领域相关语言），他是为了某个特定领域的开发量身定制的。比如，React作为一款针对view开发的DSL，虽然不同的view使用的框架不同，比如：对于web，框架为ReactDOM对于小程序，框架为Taro对于原生开发，字节内部有个叫React Lynx的框架但这些框架都大体遵循同一套DSL（React语法），这套DSL并不属于某一种编程范式，而应该被视为不同编程范式中，更符合view开发的语言特性的集合。所以，作为React DSL的一部分，函数组件可以体现OOP的思想，类组件也能体现FP的思想 ...继续阅读 (70)

大家好，我卡颂。最近Next.js v14发布，发布会的各种梗图刷爆了国外前端社区。Next.js的诸多特性（比如Server Action、App Router），都是在RSC（React Server Component）基础上衍生出的。从名字可以看出，RSC是React的特性。那么，该怎么理解RSC和Next.js的关系呢？欢迎围观朋友圈、加入人类高质量前端交流群，带飞React团队的宿愿对于前端框架的开发范式，有三个重要衡量因素：用户体验维护成本性能但是，通常很难做到三者兼顾（具体原因本文不细究，感兴趣的同学可以看data-fetching-with-react-server-components。简单来说，在前端开发中，IO瓶颈是影响内容渲染速度的重要因素（可以简单理解为，前端需要等待请求返回数据后，再根据数据渲染内容，这期间延迟的时间就是IO瓶颈）。但是，前端框架能够掌控的范围局限在前端，所以无法对IO瓶颈做出极致优化，只能在三个因素中做出取舍（比如考虑用户体验与性能时，代码维护成本就高）。React团队为了同时兼顾三者，需要对服务端拥有更多掌控。这就是RSC诞生的初衷。但是，大部分React的受众只是把React当作前端view库，并不会直接使用RSC相关功能，所以React团队选择和Next.js团队合作，落地RSC。此时我们发现，React有三类受众：普通前端开发 ...继续阅读 (54)

以前读过蝴蝶书🦋，对作者印象深刻，jsLint 尝试用过，几乎不可配置，在我的地盘，你就得乖乖听我的。《JavaScript 悟道》这本书英文版本是 2019 年出版，中文版出的速度还是挺不错的，虽然 es 规范现在年年更新，但是书本身并不落伍。翻译这本书是 死月 翻译的，谈不上信达雅，有卖弄文笔之嫌。底型是用于指示递归数据结构结尾的特殊值, 也可用于表示值不存在。 在一般的编程语言中, 常以 nil、none、nothing 或者 null 表示。。底型这个翻译和把Promise翻译为期约有异曲同工之妙，生搬硬造。我对底型这边翻译感觉莫名其妙，其他翻译也还好，不要因为一点翻译上面的瑕疵错过了这本书。如何阅读看看就好，作者非常非常有个性，取其精华。内容内容很有意思，除了正经的 JavaScript 知识点外，作者还详细的阐述了 JSON 的发明过程，对从侧面理解 JOSN 对不同类型的转换很有帮助。不感兴趣的内容跳过，包括，数值高精度部分，neo 部分。读书笔记 ...继续阅读 (31)

主题阅读函数式编程JavaScript ES6函数式编程入门经典 (豆瓣)JavaScript函数式编程指南 (豆瓣)我正式的入门变成应该是从 sicp 开始的（虽然没有看完），所以对函数式编程一直抱有浓厚的兴趣。入门经典确实很入门，对函子、Monad 这些核心概念基本是一笔带过，只给你画出了一个轮廓，很薄的一本小册子，建议 3 天看完。JavaScript 函数式编程指南，这本用来入门很不错，各种概念都比较明晰，今年应该还会再看一遍。但是这两本书，都让人感觉干巴巴的，都还是范畴论那一套东西，如果用现代框架，结合函数式编程讲解，感觉是极好的，但是好像很少看到这样的书籍或者课程。vue3Vue.js设计与实现 (豆瓣)Vue.js技术内幕 (豆瓣)Vue3 源码实战课设计与实现作者是霍春阳，以前看过他写的GitHub - HcySunYang/vue-design: 📖 master分支：《渲染器》，写的非常好，这本 vue3 的设计与实现，依然保持了高水准。注意，这本书不是 vue3 源码的解读，而是一步一步的引导你理解 vue3 的设计。响应系统，diff 算法写的很不错，虽然有的地方还是不好理解。技术内幕，黄轶的作品，一言难尽。和他的视频一个风格，大段大段的代码篇幅，如果没有基础，看这本书会很懵逼，这本书不是给新手的，而是有一定基础的。建议看完设计与实现之后，挑着看一部分，两本 ...继续阅读 (44)

目前市面上的前端代码质量评分中的代码可维护度是大都是基于typhonjs-escomplex这个库扫描而来，但是这个库的官方文档并没有介绍相关指标数据的计算规则，不知道规则如何提升指标数据呢？所以本文对typhonjs-escomplex源码进行探索，探索其关键指标计算逻辑。使用方式使用方式很简单，引用后调用analyze方法传入需要检测的源代码即可。import escomplexModule from 'typhonjs-escomplex-module'; const ast =; const report = escomplexModule.analyze(ast);analyze的第二个参数可以传入相关配置项。commonjs: true, logicalor: true, newmi: true,但此库只支持js文件的检测，对应像vue这类文件无法检测，我们可以通过以下方式提取script中的内容后进行检测。const fs = require('fs'); const doc = fs.readFileSync('test.vue', 'utf-8'); const escomplex = require('typhonjs-escomplex'); const srcs = doc.match(/(?<=)[\s\S]*?(?=<\/script>)/g); ...继续阅读 (62)

今天在群里，有个小伙伴问了这么一道很有趣的问题：CSS 能否实现，容器再某个高度下是某种表现，一旦超出某个高度，则额外展示另外一些内容为了简化实际效果，我们看这么一张示意效果图：可以看到，当容器高度没有超过某一个值时，没有箭头图标。反之，箭头图标出现。这个效果在很多场景都会出现，可以算是一个高频场景，那么在今天，我们能否不使用 JavaScript，仅仅凭借 CSS 实现类似于这样的功能呢？答案当然是可以，XBoxYan 大佬在CSS 实现超过固定高度后出现展开折叠按钮介绍了一种非常巧妙的借助浮动的解法，十分有意思，感兴趣的同学可以先行一步了解。当然，浮动float在现如今的 CSS 世界，运用的已经非常少了。那么除了浮动，还有没有其它有意思的解法？本文我们将一起来探究探究。方法一：借助最新的容器查询第一种方法，非常简单，但是对兼容性有所要求。那就是使用容器查询 --@container语法。容器查询在新时代布局新特性 -- 容器查询也详细介绍过。简单而言，容器查询它给予了 CSS，在不改变浏览器视口宽度的前提下，只是根据容器的宽度或者高度变化，对布局做调整的能力。基于这个场景，我们假设我们有如下的 HTML/CSS 结构：Lorem ipsum dolor s....g-container { position: relative; width: 300px; ...继续阅读 (55)

如上面gif动图所示，这是一个很炫酷的文字动画效果，文字的每个字符呈波浪式的扩散式展开。本次文章将解读如何实现这个炫酷的文字效果。基于以上的截图效果可以分析出以下是本次要实现的主要几点：文案呈圆环状扩散开，扩散的同时文字变小文字之间的间距从中心逐个扩散开，间距变大文案呈圆环状扩散开，扩散的同时文字变大文字之间的间距从中心逐个聚拢，间距变小动画重复执行以上4个步骤实现过程核心代码实现需要基于一下两个库：Letterize.js是一个轻量级的JavaScript库，它可以将文本内容分解为单个字母，以便可以对每个字母进行动画处理。这对于创建复杂的文本动画效果非常有用。使用Letterize.js，你可以轻松地将一个字符串或HTML元素中的文本分解为单个字母，并为每个字母创建一个包含类名和数据属性的新HTML元素。这使得你可以使用CSS或JavaScript来控制每个字母的样式和动画。anime.js是一个强大的JavaScript动画库，它提供了一种简单而灵活的方式来创建各种动画效果。它可以用于HTML元素、SVG、DOM属性和JavaScript对象的动画。通过使用Letterize.js以便可以对每个字母进行动画处理，再结合anime.js即可创建各种动画效果。本文不对这两个库做更多的详细介绍，只对本次特效实现做介绍，有兴趣的可以看看官网完整的使用文档。界面布局html就是简单的本文 ...继续阅读 (56)

欢迎关注我的公众号：前端侦探现在已经是“组件化”开发时代了。相信大家平时在vue或者react中都碰到过“跨组件”通信的需求，通常我们需要将数据放在一个公共的父级上，然后用context之类的方式传递下去，或者借用pinia这样的开源库去更好的管理这些数据。不过，大部分项目可能没有那么复杂，可能只有极少部分需要“跨组件”通信或者全局传递的，专门去引入一个全局状态管理库还是有一定成本的，不仅仅是性能开销，还有学习成本。另外，还有一些旧项目，由于前期组件设计未考虑周全，或者由于后期需求迭代，导致需要跨组件通信，此时再引入状态管理库也有很大的改造成本。框架用久了，可能有些都忘了，原生 web 并没有组件化的概念，整个页面都是开放的，所以，借助原生的一些行为和方式，也能很轻易的解决“跨组件”通信问题，下面列举了几个方式，一起看看吧~一、label for举个例子，下面是之前做的一个错别字纠错功能，也就是自动检测错别字，然后提供替换和忽略一些功能，如下现在不用关注是怎么实现的，如果按照组件化拆分，右边的纠错面板肯定是单独的组件很自然的，关于忽略的相关函数也是写在这个组件，类似于这样纠错组件const ignore = () => { // 相关操作 }...忽略...嗯，很好，组件化很不错，逻辑也很清晰。过了两天，产品又需要在另外一个地方也要有“忽略”功能，当鼠标悬浮的时候，下拉选项中也 ...继续阅读 (65)

在开发中可能有遇到过屏幕录制的需求，无论是教学、演示还是游戏录制，都需要通过屏幕录制来记录和分享内容。一般在App内H5页基于客户端能力实现的较多，现在浏览器中的MediaRecorder也提供了这种能力。MediaRecorder是一种强大的技术，可以在浏览器端实现屏幕录制功能。本文将介绍如何使用JSMediaRecorder实现屏幕录制。代码实现要实现屏幕录制，我们需要通过navigator.mediaDevices.getDisplayMedia()方法获取屏幕媒体流，这个方法会弹出一个选择窗口，让用户选择要录制的屏幕或窗口。但出于安全原因，发起录制时必须确保用户手势触发捕获，例如点击按钮：const button = document.createElement("button"); button.innerHTML = "capture"; document.body.append(button); button.addEventListener("click", async () => { // TODO });点击后，获取视频流并录制，获取到媒体流后，我们可以将其传给MediaRecorder对象后开始屏幕录制。const stream = await navigator.mediaDevices.getDisplayMedia(); const recoder ...继续阅读 (64)

每天，我们都在和各种文档打交道，PRD、技术方案、个人笔记等等等。其实文档排版有很多学问，就像我，对排版有强迫症，见不得英文与中文之间不加空格。所以，最近在做这么一个谷歌扩展插件chrome-extension-text-formatting，通过谷歌扩展，快速将选中文本，格式化为符合中文文案排版指北的文本。emmm，什么是排版指南？简单来说它的目的在于统一中文文案、排版的相关用法，降低团队成员之间的沟通成本，增强网站气质。举个例子：中英文之间需要增加空格正确：在 LeanCloud 上，数据存储是围绕AVObject进行的。错误：在LeanCloud上，数据存储是围绕AVObject进行的。在 LeanCloud上，数据存储是围绕AVObject进行的。完整的正确用法：在 LeanCloud 上，数据存储是围绕AVObject进行的。每个AVObject都包含了与 JSON 兼容的 key-value 对应的数据。数据是 schema-free 的，你不需要在每个AVObject上提前指定存在哪些键，只要直接设定对应的 key-value 即可。例外：「豆瓣FM」等产品名词，按照官方所定义的格式书写。中文与数字之间需要增加空格正确：今天出去买菜花了 5000 元。错误：今天出去买菜花了 5000元。今天出去买菜花了5000元。当然，整个排版规范不仅仅局限于此，上面只是简单列出部分 ...继续阅读 (66)

本文翻译自Understanding the JavaScript Modulo Operator，作者：joshwcomeau， 略有删改。当我第一次学习编码时，我记得发现模运算符（%）非常令人困惑。😬当你不明白它的原理的时候，它产生的值看起来完全是随机的：const what = 10 % 4; // 2 const the = 10 % 10; // 0 const heck = 4 % 10; // 4在这篇文章中，我们将通过改进除法的心理模型来学习这个运算符是如何工作的，文末还将介绍一个实用的日常实践。受众群体:这篇博客文章是为初级到中级JavaScript开发人员所写。一些JavaScript知识是假设的，但核心内容应该对每个人都有用！重新思考假设我们有下面的计算：12 ÷ 4除法常常让人感觉非常抽象或理论化，但有一种实用的方法来思考它：我们可以把一个数字分成大小相等的组。12 ÷ 4的计算结果为3，因为每个组正好包含3个项目。从本质上讲我们正在计算每个组中将包含多少个项目。在上面的示例中我们的被除数是12。使用除法时，它可以用很多不同的方式来分割。假设我们有以下等式：11 ÷ 4这个方程式的值为2.75。每组有2个完整的项目，然后是另一个项目的3/4。如果我们分披萨或蛋糕，这是可行的。但如果这些物品是不可摧毁的呢？如果我们不能把每一项分解成更小的部分呢？在这种情况下， ...继续阅读 (76)

在CSS 还原拉斯维加斯球数字动画 - 掘金一文中，我们利用纯 CSS，实现了一个非常 Amazing 的动画效果：其中一个核心点就是，我们利用了如下的代码，在一个 DIV 平面内，实现了单个平面下的随机文字随机颜色效果。效果如下：其中的 HTML 代码大致如下：// ... 一个 32 个子 div这里为了实现上述效果，其实是用了 32 列，每列是一个 DIV。emmm，对于追求极致的我们，32 个 DIV 确实不太优雅了。那么，CSS 有没有什么方式，能够单个标签实现多列多格子，每个格子颜色不一致呢？像是这样：答案当然是可以。本文，我们就将一起来探寻，使用 CSS 如何实现单标签下多色块，及单标签下随机文字随机颜色动画效果。多重背景的威力思考一下，单个 DIV，我们如何能够实现下述效果呢，譬如一个 DIV 内，有 36 种不同的颜色：这里的核心，其实就是需要借助多重背景。正常而言，我们的 DIV 只能有一个 background，设置一种颜色，像是这样：div { width: 300px; height: 300px; background: #000; }效果如下：但是，合理利用渐变语法的规则，利用多重渐变，我们就可以实现多重背景，我们改造一些上述代码：div { position: relative; margin: auto; ...继续阅读 (68)

为什么使用Generator？在JavaScript使用异步操作时，在async和await还没有被JavaScript官方正式推出时，那么异步操作解决方案就只有回调函数和Promise。回调函数所谓回调函数，就是把需要执行的动作以函数的方式包装起来，再将这个函数以参数的方式传递给其他的函数，当时机到来时再进行调用。// 需在浏览器中运行 function loadImage(imgUrl, callback) { const img = document.createElement("img"); img.onload = function () { callback(this); }; img.src = imgUrl; } loadImage( "https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg", (img) => { document.body.appendChild(img); loadImage( "https://travel.12306.cn/imgs/resources/uploadfiles/images/8b36f9 ...继续阅读 (87)

我们在开发爬虫的过程中，经常发现有一些网站，会直接把数据放到HTML中的标签里面。这些数据长得有点像JSON，但又有差异，如下图所示：这种格式，我们叫做JavaScript Object。长得很像Python的字典，又很像是JSON。但是这个格式在Python里面，无论直接当字典解析，还是当JSON解析，都会报错，如下图所示：遇到这种情况，有同学准备使用正则表达式来解析，又有同学直接放弃。但实际上，这种数据结构，使用Yaml是可以直接解析成Python的字典。我们首先来安装一下Yaml：1pip install pyyaml然后直接像解析JSON一样解析：12345678910importyamldata ='''{name: '青南',salary: 999999999,address: '上海',pro: true}'''info = yaml.safe_load(data)运行效果如下图所示，已经直接解析成了Python的字典：Yaml格式是JSON格式的超集，因此，使用pyyaml库也能直接解析正常的JSON：甚至各种复杂的混合格式也能正常解析：关于YAML格式的更多介绍，请看我以前的文章：一日一技：不用游标卡尺，Yaml 格式5分钟入门一日一技：如何处理 ...继续阅读 (76)

本文参与了1024 程序员节活动，欢迎正在阅读的你也加入。经过多番查阅资料，发现只通过前端是无法完美处理该问题的。主要原因在于:js没有相关接口可以准确获取安卓手机软键盘的高度，这样也就无法处理当软键盘弹出时，能够将输入框顶上去，并且与软键盘完美的贴合，比如输入框在最底部的场景，此时页面滚动高度不够，因此无法准确的滚动到底，使得软键盘将输入框顶上去并与之完美的贴合。js并不能监听软键盘关闭的事件，比如点击折叠按钮关闭软键盘，此时输入框焦点还在，无法触发输入框的blur事件，有人说会触发resize事件，但是经过我的测试，resize事件并未触发。以下是我的解决方案。首先封装一个获取页面视图宽高的工具函数，代码如下:const getViewSize = ():{ width:number;height:number } { if (window.innerWidth) { return { width: window.innerWidth, height: window.innerHeight }; } else if (document.compatMode === 'CSS1Compat') { return { width: document.documentElement.c ...继续阅读 (65)

大家好，我卡颂。在 2 年前的React Conf 2021，黄玄第一次介绍了React Forget，这是个可以生成等效于 useMemo、React.memo的编译器（可以简单理解为，有了它，开发者不需要考虑React项目的性能优化了）。由于React独特的架构（全局更新），React 性能优化一直让开发者头疼，这里主要有两个问题：很多开发者不知道如何正确使用性能优化API，甚至有人认为FC（函数组件）中所有函数都应该包裹在useCallback中即使写出性能优秀的项目，随着需求迭代，新增的代码很可能破坏之前的优化效果所以，React Forget的愿景一经宣传，就受到社区极大的关注。从React Conf 2021油管播放量来看，React Forget演讲占了所有 19 个演讲总播放量的 1/4（当然，也可能是因为黄玄长得帅）。现在2年过去了，我们很少听到React Forget的进展，黄玄也离开React 团队了。这让我们不禁要问，React Forget凉了么？本文会聊聊React Forget当前的进展、接下来的发展方向，以及他的工作原理。欢迎围观朋友圈、加入人类高质量前端交流群，带飞React Forget 凉了么？首先要明确的是，React Forget并没有凉，相反，他正在稳定迭代。根据React团队成员Mofei Zhang在React Advanced Lo ...继续阅读 (79)

难以置信，一个小小的需求让我捣鼓出一个提效的网站来本文参与了1024 程序员节活动，欢迎正在阅读的你也加入。需求介绍事情是这样的，有个群友在业务当中碰到一个小小的需求，需求是这样的: 页面当中存在多个输入框，输入框的 value 值是一个数值组成的字符串（盲猜应该是身份证号码），这个字符串的位数是 15 位或者是 18 位，例如:'621848063680370'(15 位)和'621848063688370808'(18 位)，然后默认的值是这样的，现在问题来了，需求希望在这些数值中插入空白符号，比如 15 位的数字就按照 6 + 6 + 3 的格式分隔，分隔的时候需要使用空白符号。比如'621848063680370'分隔后应该变成'621848 063680 370',也就是数字位数到了第 6 位就加个空白符号分隔，...依次类推，而 18 位数字的分割规则则是:6 + 4 + 4 + 4。比如'621848063688370808'应该分隔成'621848 0636 8837 0808'。这个需求就是对字符串的处理，提到分隔替换，那么我们就可以想到强大的字符串替换方法 replace，这个方法可以接受 2 个参数，一个参数通常是一个正则表达式，第二个参数则是一个回调函数，用于定义替换后返回字符串。因此，我的第一个想法就是使用正则表达式去处理，如何处理呢？原理分析首先我们需要 ...继续阅读 (97)

前言欢迎关注同名公众号《熊的猫》，文章会同步更新，也可快速加入前端交流群！大多数Vue开发者都习惯使用template 模板语法，因为template 模板语法具有如下优点：熟悉的类 HTML 结构模板语法可以像 HTML 一样进行布局和设计，上手快、学习成本比低更简洁的写法例如，可以在模板中使用各种修饰符来达到简化编写代码的过程结构与逻辑分离元素结构和逻辑并没有杂糅在一起，因此结构上更简洁明了提供更好的性能Vue3中对模板语法在编译阶段进行的各种优化，使得其性能更好但即便如此，在某些场景下还是不得不在Vue中使用jsx 语法实现需求， 例如开发内部组件库选择的编写形式就是jsx 语法等。而对于习惯使用template 模板语法的开发者并不是轻易的就能转换到相应jsx 语法，因此本文就列举一些template 模板语法中对应的jsx 语法应该怎么写。从 template 到 jsx插值表达式（文本插值）template 语法最基本的数据绑定形式就是文本插值，它使用的是Mustache 语法(即{{}})，双大括号中的内容最终会将数据解释为纯文本。Message: {{ msg }}jsx 语法而 JSX 中使用文本插值就从双大括号{{ }}变成单大括号{}Message: { msg }原始 HTMLtemplate 语法双大括号会将数据解释为纯文本，而不是HTML，因此若想在模板 ...继续阅读 (104)

背景页面内的tab导航需要在滚动到视口顶部的时候进行吸顶，这个功能算是比较常见，也比较容易实现。刚开始按照自己想到的最简单的方法来实现，写完代码后进行测试，发现页面有很明显的bug，心里直呼大意了，特此记录下。错误示例DOCTYPE htmlDocument.page-container { width: 1200px; margin: 0 auto; } .top-area { height: 300px; background-color: lightskyblue; margin-bottom: 20px; } .tab { padding: 0 20px; display: flex; justify-content: space-between; background-color: #f4f4f4; } .tab.fixed { position: fixed; width: 1200px; box-sizing: border-box; top: 0; } .tab ...继续阅读 (80)

引文在日常的学习和工作中，经常会浏览的这样一种网页，它的结构为左侧是侧边栏，右侧是内容区域，当点击左侧的侧边栏上的目录时，右侧的内容区域会自动滚动到该目录所对应的内容区域；当滚动内容区域时，侧边栏上对应的目录也会高亮。恰巧最近需要写个类似的小玩意，简单的做下笔记，为了避免有人只熟悉Vue或React框架中的一个框架，还是使用原生JS来进行实现。思路点击侧边栏上的目录时，通过获取点击的目录的类名、或id、或index，用这些信息作为标记，然后在内容区域查找对应的内容。滚动内容区域时，根据内容区域的内容的dom节点获取标记，根据标记来查找目录。实现页面初始化首先把html和css写成左边为目录，右边为内容的页面结构，为测试提供ui界面。DOCTYPE html目录与内容相互锚定.container { display: flex; flex-direction: row; } #nav { width: 150px; height: 400px; background-color: #eee; } #nav .nav-item { cursor: pointer; } #nav .nav-item.active { font-weight: bold; ...继续阅读 (61)

最近大家刷抖音，是否有刷到拉斯维加斯的新地标 「Sphere」：场馆内部的视觉效果非常惊人，其中一个效果让我虎躯一震：我的第一想法就是，这个看起来用 CSS 也可以实现嘛？还有 CSS 不能实现的？本文，就将尝试使用 CSS，大致还原这个效果。拆解动画效果其实，上述的动画效果，本质就是一个 3D 立方体。同时，3D 立方体上每个面存在颜色不一样的文字，文字和颜色都在随机变化。也就是说，我们需要实现一个 3D 立方体：同时，我们还需要实现这样一个动画效果 -- 文字和颜色都在随机变化的平面效果：两者组合一下，再挪动 3D 元素的景深距离，就能实现我们想要的效果！好，下面我们一个一个实现。实现一个 3D 立方体实现一个 3D 立方体，相对另外一个文字和颜色都在随机变化的平面效果而言，属于非常非常简单的一步了。我们在非常多篇文章中也讲过具体的实现方式：最常见的 3D 图形，莫过于一个 3D 立方体。如果没有上下两个面，只是一个 4 个面的图形，大概是这样：这样一个图形，利用 CSS 3D，如何快速实现呢？首先，构造这么一个结构：3D视图4 个面，就是最内层的 4 个.img，首先，需要给两个父容器，设置 3D 的属性：.perspective { perspective: 3000px; } .container { width: 400px; height: 400px; ...继续阅读 (124)

前言欢迎关注同名公众号《熊的猫》，文章会同步更新，也可快速加入前端交流群！最近小伙伴又遇到一个需求，那就是给复选框选中时添加一个边框样式，大致如下：原本的效果：现在需要的效果：这个外边框的隐藏时机为：复选框未选中点击复选框内容外的区域小伙伴很快就完成了需求，但测试同学反馈了如下的 BUG：正常速度点击快速来回点击很明显快速点击时外部边框并没有按预期效果进行展示/隐藏，为了更好的复现问题，接下来重新实现一遍功能，然后再解决问题。实现 checkbox 组件由于这个checkbox使用的是内部业务组件，并且是通过JSX 语法来实现，所以这里就不使用template 模版语法了。核心分析内容比较简单，要自己实现一个checkbox核心无非以下几点。使用关联为了实现点击文字部分也能达到直接点击checkbox的效果，就可以通过标签来实现，而关联方式又分为两种的id与的for属性保持一致Do you like cheese?直接包裹Click me自定义checkbox样式为了统一展示样式，因此都会使用span 元素来替换原始的 checkbox，并且将原始 checkbox隐藏起来，例如Ant Design、Element UI中的复选框。支持v-model双向绑定自行封装的组件为了方便外部使用，需要支持v-model数据双向绑定的形式，而在组件内部只需要将对应的props和emits事件 ...继续阅读 (90)

在知乎看到一题比较有意思的题目。题目大致是如何实现下述图片的效果，如果使用 div 前置遮挡的话，会影响 div 后面的按钮，使其无法被点击。本文将简单介绍几种这个效果的实现方案。渐变配合 pointer-event第一种方式，比较容易想到。使用渐变配合pointer-event实现。简单模拟一下场景，假设我们有如下一个ul列表，超出可以滚动：ButtonButtonButtonButtonButtonButtonul { width: 300px; display: flex; flex-wrap: nowrap; border: 1px solid #999; padding: 5px; overflow-x: scroll; }像是这样：首先，我们需要实现右侧的渐变消失的遮罩效果，这个最常见的，就是通过叠加一个从透明到白色的渐变层实现。这个简单，我们借助元素的伪元素，绝对定位到右侧即可：.g-container { ... &::before { content: ""; position: absolute; right: 0; bottom: 0; top: 0; width: 100px; ...继续阅读 (77)

直接看代码：123456789 const win = window.open(routeData.href, this.windowTitle); win.windowTitle = this.windowTitle; const loop = setInterval(function() { if (win.closed) { clearInterval(loop); } else { win.document.title = win.windowTitle; } }, 1000);web开发分享声明:本文采用BY-NC-SA协议进行授权 |WEB开发分享转载请注明转自《window.open打开并修改名字》 ...继续阅读 (60)

主页文章按更新时间排序针对目前最新的hexo版本hexo: 6.3.0NexT version 8.18.1结合感谢名单中作则的文章，终于，我在node_modules\hexo-generator-index\lib\generator.js文件中找到了似乎是用于排序的代码，该文件是为了添加文章置顶功能的，但当置顶等级设置相同时，按照发布日期进行排序。对JavaScript改完之后该文件中的内容如下所示 ...继续阅读 (84)

为什么需要Promise？JavaScript在执行异步操作时，我们并不知道什么时候完成，但是我们又需要在这个异步任务完成后执行一系列动作，传统的做法就是使用回调函数来实现，下面举个常见的例子。DOCTYPE htmlDocumentfunction loadImage(imgUrl, callback) { const img = document.createElement("img"); img.onload = function () { callback(this); }; img.src = imgUrl; } loadImage( "https://travel.12306.cn/imgs/resources/uploadfiles/images/1716878f-79a2-4db1-af8c-b9c2039f0b3c_product_W572_H370.jpg", (img) => document.body.appendChild(img) );上面这个例子会在图片加载完成后将图片放置在body元素下，随后在页面上也会展示出来。但是如果我们需要在加载完这张图片后再加载其它的图片呢，只能在回调函数里面再次调用loadImageloadImage( " ...继续阅读 (72)

在前端开发中，代码的重复度是一个常见的问题。重复的代码不仅增加了代码的维护成本，还可能导致程序的低效运行。为了解决这个问题，有许多工具和技术被用来检测和消除代码重复。其中一个被广泛使用的工具就是jscpd。jscpd简介jscpd是一款开源的JavaScript的工具库，用于检测代码重复的情况，针对复制粘贴的代码检测很有效果。它可以通过扫描源代码文件，分析其中的代码片段，并比较它们之间的相似性来检测代码的重复度。jscpd支持各种前端框架和语言，包括HTML、CSS和JavaScript等150种的源码文件格式。无论是原生的JavaScript、CSS、HTML代码，还是使用typescript、scss、vue、react等代码，都能很好的检测出项目中的重复代码。开源仓库地址：github.com/kucherenko/jscpd/tree/master如何使用使用jscpd进行代码重复度检测非常简单。我们需要安装jscpd。可以通过npm或yarn来安装jscpd。npm install -g jscpdyarn global add jscpd安装完成后，我们可以在终端运行jscpd命令，指定要检测的代码目录或文件。例如，我们可以输入以下命令来检测当前目录下的所有JavaScript文件：jscpd .指定目录检测：jscpd /path/to/code在命令行执行成功后的效 ...继续阅读 (60)

最近在用MockJS处理接口数据，遇到一个需求，需要返回一个视频链接，有28个视频，视频名依次从1到28命名，例如”http://192.168.0.90:7478/22.mp4"MockJS中提供了正则表达式的方式mock数据，返回上面这条链接可以使用/http\:\/\/192\.168\.0\.90\:7478\/22\.mp4/这样的表达式，但是如果想要返回1-28的视频链接，需要对22进行处理一开始想到的是/[1-28]/，以为这样就能达到目的的，但事实证明想的还是太少😂。/[1-28]/只会匹配1、2、8，这三个数字，可以拆开这样理解/([1-2]|8)/。所以想要匹配1-28，需要每一位去匹配，/([1-9]|1[0-9]|2[0-8])/很好！这样应该就可以了吧？输入到正则表达式工具内之后，我发现我想的还是太少如果是两位数，那就会只匹配了开头，并不是如预期的那样匹配一整个28。一番搜索之后，发现可以在前后加上\b解决，/\b([1-9]|1[0-9]|2[0-8])\b/\b可以表达为词边界，它会检查字符串中的位置是否是词边界，可以匹配一个一个的整体。 ...继续阅读 (52)