函数 join(delimiter): 把数组中各个元素使用分隔符(delimiter)拼成字符串 concat(array1, array2, ...): 合并数组，对原数组不影响，只是返回合并后的新数组 pop(): 删除并返回最后一个元素 push(element1, element2, ...): 在数组末尾追加元素 shift(): 删除并返回第一个元素 unshift(el... ...继续阅读 (42)

用字符串的split方法将其分为数组，数组的length-1就是字符的出现次数。代码修改为JavaScript如下： function test(){ var str = "www.netsuite.com"; alert(str.split("c").length-1); alert(str.split("w").length-1); } ...继续阅读 (38)

这说明，编写Javascript时，好的编程风格更加重要。记得某人曾经说过这样的话，想Java和C#这些比较严格的语言，虽然降低了灵活性，但也减少了犯错误的可能。这样，即使一个新手，他写出的代码也不会与高手差太多。但是，像Javascript这样的脚本语言，由于太灵活，所以，高手写出的是天使，而新手写的，可能是魔鬼！ 经典， 20090422 1809 ...继续阅读 (44)

Prototype是开发JavaScript应用程序的强大脚本框架，使用该框架可以很容易地以面向对象的方式开发可重用的脚本。对于Ajax，Prototype提供了完整而优雅的解决方案... Prototype与jQuery都是开发JavaScript应用程序脚本框架，但两者在编码风格上有着本质的区别：jQuery吸收了函数式编程的思想，而Prototype则更多地体现出面向对象的思想。对于喜欢面... ...继续阅读 (49)

定义单例模式的定义：确保一个类只有一个实例，并且提供访问这个实例的全局访问点。好处对于一些场景，全局只需要一个实例即可，单例模式可以复用已产生的对象，避免频繁的创建与销毁对象。使用场景上面提到了单例模式确保一个类只会产生一个对象，那么使用场景上也会紧紧围绕这一条规则，所使用的实例会保持唯一性。前端范围内，例如浏览器的window对象、某些登录弹窗等等。实现JavaScript在ES6出来前没有类的概念，普通函数就能够充当构造函数来产生对象function Person(name, age) { this.name = name; this.age = age; } const p = new Person('ztq', 18)那么使用ES5来实现单例模式可能就和其他静态语言实现单例模式就会有很大的差异普通单例模式思路就是就变量来标志是否已经创建过变量，如果已经创建过变量，那么在下一次返回的时候直接返回之前创建的变量。ES5实现function Person(name) { this.name = name; this.instance = null; } Person.prototype.getName = function () { return this.name; }; Person.getInstance = function (name) { ...继续阅读 (66)

首发于公众号大迁世界，欢迎关注。📝 每周7篇实用的前端文章 🛠️ 分享值得关注的开发工具 😜分享个人创业过程中的趣事快来免费体验ChatGpt plus版本的，我们出的钱 体验地址:https://chat.waixingyun.cn可以加入网站底部技术群，一起找bug，另外新版作图神器已上线https://cube.waixingyun.cn/home几年前，消失的作用域 CSS，如今它回来了，而且比以前的版本要好得多。更好的是，W3C规范基本稳定，现在Chrome中已经有一个工作原型。我们只需要社区稍微关注一下，引诱其他浏览器构建它们的实现，并完成这项工作。这是什么思路？作用域为CSS带来了两个关键点：更好地控制哪些选择器针对哪些元素（即更好地操作级联）。一组样式可以基于DOM中的位置覆盖另一组样式。局部样式允许你在页面上的单个组件内包含一组样式。你可以使用.title选择器，它只在Card组件内工作，并使用另一个.title选择器，它只在 Accordion 中工作。你可以阻止一个组件的选择器针对子组件中的元素，或者如果需要，也可以允许它们到达。你不再需要BEM风格的类名。此外，近度在级联中变成了一等公民。如果两个组件针对同一个元素（具有相同的特异性），内部组件的样式将覆盖外部组件的样式。它是如何工作的？一切都始于@scope规则和一个选择器，如下：@scope (.card ...继续阅读 (71)

首发于公众号大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 😜 分享个人创业过程中的趣事快来免费体验ChatGpt plus版本的，我们出的钱 体验地址:https://chat.waixingyun.cn可以加入网站底部技术群，一起找bug，...如果你问开发人员："对你来说最难的 JS 题目是什么？"，你绝不会听到他说是 ES6 模块。但统计数据更能说明问题！我们统计了我们电报频道中各种主题的问答错误答案数量，发现 ES6 模块是最难的主题之一。测验 #1： 53%的答案正确// index.mjs import { default } from './module.mjs'; console.log(default);// module.mjs export default 'bar';首先，让我们记住各种导入和导出语法：如果检查表中的 Import 语法，就会发现没有与我们的代码相匹配的语法：import { default } from ‘./module.mjs’;因为禁止使用这种语法。测验代码会出现以下错误：SyntaxError: Unexpected reserved word在import { default } from ‘./module.mjs’;行中，default是export的名称，也是该作用域中的变量名称，这是被禁止 ...继续阅读 (77)

缓存是提升 web 应用程序有效方法之一，尤其是用户受限于网速的情况下。提升系统的响应能力，降低网络的消耗。当然，内容越接近于用户，则缓存的速度就会越快，缓存的有效性则会越高。之前个人写过前端 api 请求缓存方案。介绍的了内存中的缓存以及过期逻辑。后续也写过手写一个前端存储工具库，该工具利用了适配器处理了不同的存储介质（内存，IndexedDB, localStorage 等）。不过，在某些特定场景下缓存还需要优化，例如：用户需要在登录或者填写表单时需要通过某些接口获取必要数据，而这些接口是由第三方平台提供的。这些接口可能会出现错误或超时的情况。如果当前数据有很强实时性，开发者就必须重试或者联系第三方平台来处理对应的错误。如果数据的实时性不强，当前就可以使用本地缓存。一般来说，当获取时效性缓存时候，我们会检查并删除当前数据。代码简写如下所示：// 缓存对应的的模块以及功能 const EXTRA_INFO_CACHE_KEY = 'xxx.xxx.xxx'; // 缓存时长为 7 天 const CACHE_TIME = 7 * 24 * 60 * 60 * 1000; const getCachedExtraInfo = () => { const cacheStr = localStorage.getItem(`${EXTRA_INFO_CACHE_KEY}.${us ...继续阅读 (91)

前言国庆节马上要到了，今天就教你如何从0到1使用canvas生成国庆风微信头像。本文包含以下内容：vue3项目搭建，需求分析canvas合成图片原理github自动化部署开发过程遇到的问题及解决方案文末附源码及在线体验地址~搭建项目，分析需求项目的话就直接使用脚手架生成一个Vue3 + TS项目npm create vue@latest为了方便，使用了Element PlusUI库npm install element-plus --save配置的话，可以查看文档，全局导入、按需导入都可以看自己的需求项目搭建完后，就可以来分析一下本次需求大概会涉及哪些功能了上传头像这是一个合成微信头像的工具，那就必须得让用户上传自己的微信头像了合成模版为了方便，我们当然还需要提供多种模版供用户自己选择用户自定义内容为了让生成的头像更具独一无二性，我们还需要提供用户自定义内容的功能，比如：用户输入文字、选择文字颜色等合成头像本次需求的重点当然是合成头像了下载合成后的头像用户合成完当然还得支持让他下载功能开发上传头像// 用户头像 const user_img = ref(""); const change = (file: any, fileList: any) => { console.log(file, fileList); const fileReader = new FileRead ...继续阅读 (67)

在图片网站中，通常是使用瀑布流的方式来显示图片，等宽度不等高，这样显得错落有致今天 使用Vue3实现一个瀑布流组件，并发布为一个npm包grid布局支持响应式参考自react-plock1、window.matchMediawindow.matchMedia(mediaQueryString)方法返回一个MediaQueryList对象，表示指定css媒体查询字符串的结果其中参数mediaQueryString表示CSS @media规则的任何媒体查询选项，比如：min-width、min-height、orientation等const media = window.matchMedia("(max-width: 850px)")在MediaQueryList对象中有两个属性：matches：返回查询结果，是一个布尔值media：媒体查询的字符串所以，根据matches我们就可以知道是否命中当前的媒体查询选项并且，我们还可以通过addEventListener监听mediaQuery查询结果的变化media.removeEventListener('change', () => { console.log(media.matches) });2、瀑布流组件响应式控制根据屏幕大小确定图片的列数export interface PropConfigType { gap: nu ...继续阅读 (63)

相关文章：《基础篇》：https://blog.krimeshu.com/2021/07/04/promise-practice/上一篇的最后，我们列举了两个简单的逐个串行与并发执行的例子。不过日常实际开发中，我们还会遇到更复杂的场景——比如下载 300 张图片，上一篇中简单的写法就无法应对了。这次我们来说说如何更恰当地处理这类批量异步任务。[TOC]1. 批量异步任务如果我们需要下载 300 张图片，该怎么处理呢？(1) 同步编程思路下载 300 张图片之前，我们应该会有它们的 URL，存在一个数组内。按照传统的同步编程思路，我们首先想到的大概是这个样子：12345678910111213141516171819consturlList = [/* 这是300张图片的 URL... */];functiondownloadImage(url) {/* 这是一个同步下载图片的函数 */}urlList.forEach((url) =>{console.log('开始下载:', url);downloadImage(url);console.log('下载完成:', url);});// 或者使用 for 循环for(leti =0, total = urlList.length; i < total; ...继续阅读 (36)

异步任务是我们日常开发中离不开的一环，例如用户操作后的网络请求、动画延时回调、node.js 中各种异步 IO/进程操作等等。过去通常是通过传递回调函数的形式使用，如今我们通常使用Promise，配合async/await，让日常这些异步处理方便了很多。不过对于刚接触Promise的新同学来说，日常可能只接触和使用过其中比较基础的使用形式，又没有花时间去了解其中的实现原理，这就可能会导致一些错误理解和反模式实践。这里将平时遇见过的问题列举出来，结合自己的理解，希望能帮新同学们绕开一些可以避免的坑。[TOC]1. 简要介绍(1) 什么是 Promise个人认为，Promise是一种可链式触发的单向异步任务单元。它基于异步任务进行封装，内部维护一个任务进行状态：进行中、已完成、已拒绝。初始状态为进行中，可单向流转：进行中→已完成/已拒绝；不可以逆向流转。一个Promise实例在进行中状态下，可以通过它的then(onResolved?, onRejected?)函数指定完成/拒绝状态回调函数。异步任务执行完毕时，可以执行以下A/B操作之一：(A) 给完成状态回调函数传递一个结果值，进入已完成状态；(B) 给拒绝状态回调函数传递一个理由，进入已拒绝状态。上面是Promise基本概念，看起来似乎“平平无奇”。然而它又通过以下机制实现了链式触 ...继续阅读 (44)

WordPress 6.3 发布，其实还有个更新，就是内置的 jQuery 库更新到 3.7。jQuery 3.7放弃了长期使用的选择器引擎 Sizzle，之后将不再依赖于作为单独项目的 Sizzle，jQuery 已经将 Sizzle 相关代码直接放到了核心，这有助于为 jQuery 未来版本中选择器的重要变化做好准备，目前因此体积减少了几个字节，效率也有所提升，因为 Sizzle 支持更旧的浏览器。但是今天不讨论相关技术细节，只说现在还在使用 jQuery 这个问题。使用 jQuery 丢人？现在时不时就有 jQuery 已死的说法，前些年 GitHub 从前端代码中移除 jQuery 讨论过一轮，然后 Bootstrap 最新版本删除 jQuery 也讨论过一轮，然后一些一点点知名度的公司发布自己不用 jQuery 新闻，也会出现这个讨论。确实现在的的浏览器越来越支持 Web 标准，然后 JavaScript 标准本身在过去十年中也得到了显著的改进，特别是在 2015 年发布 ECMAScript 6 之后，jQuery 赖以成名的 DOM 简化操作就没有那么大的优势了。但是一些 vue/react 的用户不知道为何莫名就有了种看不起 jQuery，觉得使用 jQuery 很丢人，这就就很低级了，我觉得这种以使用的工具而给自己贴标签的行为非常可笑，一个人的自豪或者优越感至少应 ...继续阅读 (108)

浏览器标签页之间通信的实现使用场景​ 前端开发过程中，总是避免不了要进行前端标签页之间的通信，最经典的例子莫过于音乐播放网站中，当第一次点击播放列表中的歌曲时，它会打开一个新的标签页进行播放，而当在列表中再次点击歌曲播放时，并不会再多打开一个标签页，而是会在刚才新打开的标签页上播放歌曲。方式方法这里跳转新页面均使用window.open1方法，这里稍微说下window.open方法的参数url（可选）一个字符串，表示要加载的资源的 URL 或路径。如果指定空字符串（""）或省略此参数，则会在目标浏览上下文中打开一个空白页。target（可选）一个不含空格的字符串，用于指定加载资源的浏览上下文的名称。如果该名称无法识别现有的上下文，则会创建一个新的上下文，并赋予指定的名称。还可以使用特殊的target关键字：_self、_blank、_parent和_top。该名称可用作或元素的target属性。windowFeatures（可选）一个字符串，包含以逗号分隔的窗口特性列表，形式为name=value，布尔特性则仅为name。这些特性包括窗口的默认大小和位置、是否打开最小弹出窗口等选项。在下面的例子中采用audio作为浏览上下文的名称，让他从始至终只创建一个新的标签页1.使用路由上的query传参list.htmlconst broadCastChannel = new ...继续阅读 (69)

当一个项目经过持续迭代，不断增加功能，逐渐变成一个复杂的产品时，新功能的开发变得相对困难。其中一个很大的原因是代码复杂度高，导致可维护性和可读性都很差。本文将从前端JavaScript的角度出发，介绍一些有效的方法和技巧来优化前端代码的圈复杂度。什么是圈复杂度圈复杂度的计算基于程序中的决策结构，如条件语句（if语句）、循环语句（for、while语句）、分支语句（switch语句）等。每当程序流程图中增加一个决策点，圈复杂度就会增加1。圈复杂度的值越高，表示代码的复杂性越大，代码的可读性、可测性和可维护性也会受到影响。通常情况下，圈复杂度的推荐值应该在1到10之间。超过10的代码模块可能需要进行重构，以提高代码的可理解性和可测试性，并降低引入错误的风险。辅助工具VScode插件Code MetricsVScode插件Code Metrics可以帮助我们快速发现那些需要优化复杂度的代码，安装好插件后如下图所示，在代码上方会出现对应的复杂度值，根据值的大小可以看出哪些代码是急需优化提升可读性。鼠标点击所提示复杂度数值的地方可以看到具体是哪些代码影响了复杂度，可以进行针对性的优化。eslint检查可以使用 eslint 帮助检查代码的圈复杂度，当超出了某个值就会报错。rules: { complexity: [ 'error', { max: 10 ...继续阅读 (72)

首发于公众号大迁世界，欢迎关注。📝 每周7篇实用的前端文章 🛠️ 分享值得关注的开发工具 😜分享个人创业过程中的趣事JavaScript 语言的核心部分足够大，以至于我们很容易误解其某些部分的工作方式。最近在重构一些使用every()方法的代码时，发现实际上并不理解其背后的逻辑。在我的理解中，我认为回调函数必须被调用并返回true，every()才会返回true，但实际上并非如此。对于一个空数组，every()无论回调函数是什么都会返回true，因为那个回调函数从未被调用过。考虑以下情况：function isNumber(value) { return typeof value === "number"; } [1].every(isNumber); // true ["1"].every(isNumber); // false [1, 2, 3].every(isNumber); // true [1, "2", 3].every(isNumber); // false [].every(isNumber); // true在这个例子的每个情况中，对every()的调用都会检查数组中的每个项目是否为数字。前四次调用相当直接，every()产生了预期的结果。现在考虑以下这些例子：[].eve ...继续阅读 (66)

Docsify 是一个基于JavaScript的文档网站生成器，可以速轻松地搭建基于文本文档的静态网站。它没有预设的主题，所有的网站样式都由Markdown文件生成，可以自由定制。docsify的优点是简单易用，不需要复杂的配置，文档可以直接写在Markdown文件中，支持插件扩展和多语言支持。 ...继续阅读 (116)

欢迎关注我的公众号：前端侦探大家可能都知道 dom 有一个scrollIntoview方法，它可以轻易的让目标元素滚动到可视范围之内，而无需手动计算偏移量dom.scrollIntoview()效果如下这样跳转比较生硬，因此可能还知道有这样一个参数dom.scrollIntoview({ behavior: 'smooth' })这样就能平滑滚动了仅仅只有这些了吗？其实还可以做很多一、重新学习 scrollIntoView 语法打开 MDN 官网https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scro...语法其实很简单，有三种形式scrollIntoView() scrollIntoView(alignToTop) scrollIntoView(scrollIntoViewOptions)首先看第 2 种形式，就一个参数alignToTop布尔值默认为true，表示是否沿着元素的顶端和滚动容器对齐，否则和元素底端对齐。dom.scrollIntoView() dom.scrollIntoView(true)这两种效果是相同的如果设置为false，那么会居底部对齐dom.scrollIntoview(false)效果如下注意，alignToTop自适应于垂直方向上的滚动，如果是水平方向的滚动，设置了没有任何区别。 ...继续阅读 (69)

前言在大型项目中，微前端是一种常见的优化手段，本文就微前端中沙箱的机制及原理，作一下讲解。首先什么是微前端Techniques, strategies and recipes for building amodern web appwithmultiple teamsthat canship features independently. --Micro Frontends前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。常见的微前端实现机制iframe如果你还是不了解什么是微前端， 那么就将它当做一种iframe即可， 但我们又为什么不直接用它呢？iframe最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来的开发体验、产品体验的问题。url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中..全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都 ...继续阅读 (73)

本文，我们将一起利用纯 CSS，实现如下这么个酷炫的效果：在一年前，我介绍了 CSS 中非常新奇有趣的一个新特性 --@scroll-timeline：革命性创新，动画杀手锏 @scroll-timeline。利用这个新特性，我们可以轻松的将原本基于时间控制的动画效果，交给页面的滚动特性进行控制，像是这样：只是，该特性由于诸多原因，遭到了规范废弃。然而，时隔一年半，规范带着新的animation-timeline王者回归！我们可以将其简单理解为：Scroll-driven Animations（滚动驱动动画）。什么是滚动驱动动画（Scroll-driven Animations）？OK，我们通过一个例子，快速上手（回忆）滚动驱动动画。我们来实现这么一个滚动进度指示器效果：注意看 GIF 图的上方，有一个黄色进度条，可以通过滚动，改变黄色进度条的进度状态。这个也就是我们说的滚动指示器效果。在之前，这个效果利用纯 CSS 是不太好实现的，但是有了 animation-timeline 之后，一切都将变得非常轻松。假设我们有如下结构：不可思议的纯 CSS 进度条效果OK，继续....../p> // ...body { overflow: scroll; } #g-container { width: 100vw; }其中，#g-container有非常多的内容， ...继续阅读 (74)

前两天遇到一个小需求，需要将横屏图片转为竖屏展示。整理一下相关内容。通过 csstransform rotate 来控制展示时显示效果一般是在图片审核等场景，实现一个类似的功能。方便审核人员查看图片测试传送门：https://stackblitz.com/edit/vue-sdrnue?file=src%2FApp.vuetransform scale 来控制展示时显示效果测试传送门：https://stackblitz.com/edit/vue-pj9puy?file=src%2FApp.vue通过 canvas 来控制展示是显示效果这种一般就是在生成的时候处理，落库就是直接是竖屏图片。测试传送门：https://jsrun.net/Q7JKprotate 来实现旋转效果orientation = 0 // 0 orientation = 3 // 180 orientation = 8 // 270 orientation = 6 // 90 if (orientation === 6) { canvas4.width = canvas1.height; canvas4.height = canvas1.width; ctx4.rotate(Math.PI / 2); ctx4.dr ...继续阅读 (77)

在网页上生成一个便于用户分享的精美海报，或者对于网页内容生成截图，现在已经是一个非常常见的需求，现在怎么实现呢？如何生成海报生成网页截图和海报一般都有两种做法，一是服务端使用 GD 库生成，二是前端使用 Canvas 生成，但是这两种方法都比较麻烦。服务端通过 GD 库去生成的话，首先要去查 GD 库相关的大量函数，然后图片的坐标，文字的换行等等都要仔细去算，一点点修改，都要重新算一遍，非常难受。而前端使用 Canvas 生成的话，就需要熟悉 Canvas 的语法，它的 API 比较复杂，有大量的方法和属性，让很多希望通过 Canvas 画图的同学望而却步。那么有没有什么简单的方法生成海报呢？不需要学习太多新知识，利用现有的知识就实现的呢？html2canvas有的，html2canvas 就是这样的一个 Javascript 库，无需大量学习，只需要会 HTML 和 CSS 即可，html2canvas 可以把网页元素或者整个网页转换为一个 Canvas 对象或者图片。html2canvas 是通过在浏览器端解析 HTML 和 CSS 来实现这个功能，不需要任何服务器端的支持，然后也不需要对 Canvas 相关的方法深入的学习，只需要懂的简单的 HTML 和 CSS 即可。总结一下，下面是html2canvas的一些主要优势：无需后端支持：html2canvas完全在客户端运行， ...继续阅读 (87)

2023 年 9 月 8 日，运行时 Bun 正式发布 1.0 版本，标志着这个由前 Facebook 工程师创建的项目正式进入稳定生产可用阶段。Bun 的愿景是通过深度整合，让前端开发 “快如闪电”。这个新生力量是否能撼动老牌霸主 Node 的地位，成为下一代前端开发标准？让我们一睹这个新星的威力。Bun 不仅仅是一个运行时。它也是：一个包管理器 (类似 Yarn、 NPM、 PNPM)一个构建工具 (类似 Webpack、 ESBuild、 Parcel)一个测试运行器…所以 Bun 可以通过读取 package.json 来安装依赖项。Bun 还可以运行脚本。不管它做什么都比其他工具更快。Bun 在 JavaScript 生态系统的许多方面都有新的尝试，其中的重点是性能。它优先支持标准的 Web API，如 Fetch。它也支持许多 Node.js APIs，使其能与大多数 NPM 包兼容。安装 Bun：// npmnpm install -g bun// brewbrew tap oven-sh/bunbrew install bun// curlcurl -fsSLhttps://bun.sh/install | bash// dockerdocker pull oven/bundocker run --rm --init --ulimit memlock=- ...继续阅读 (91)

大家好，我卡颂。codesandbox是前端工程师经常使用的代码在线运行环境，页面如下：他的应用场景很广，比如：有代码逻辑要分享，分享个codesandbox链接有新想法需要验证，又不想本地起个项目，用codesandbox技术文档演示Demo，用codesandbox作为一个在线运行代码的编辑器，这么多人天天免费用，他服务器扛得住么？毕竟，同样作为在线代码运行环境（主要是跑算法题）的leetcode，如果同时刷题的人多了，提交后都还得排队：codesandbox是如何实现的？他会面临leetcode一样的服务器压力么？欢迎围观朋友圈、加入人类高质量前端交流群，带飞codesandbox的分类这个问题的本质其实是问 —— 用户在codesandbox中写的代码，究竟是在前端还是后端编译成静态资源的？毕竟，如果是在后端完成，会增加服务器压力。比如，对于下面这段React代码：// main.jsx import { createRoot } from "react-dom/client"; import { Cpn } from "./Cpn"; function App() { return (); } createRoot(document.getElementById("root")).render();要想在浏览器中运行，涉及几个前置工作：需要编译JSX语法，比如将编译 ...继续阅读 (58)

很早之前，就写过一篇与原生嵌套相关的文章 --CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？，彼时 CSS 原生嵌套还处于工作草案 Working Draft (WD) 阶段，而今天（2023-09-02），CSS 原生嵌套 Nesting 终于成为了既定的规范！CSS 原生嵌套语法在之前，只有在 LESS、SASS 等预处理器中，我们才能使用嵌套的写法，像是这样：div { & > p { color: red; } &:hover { color: yellow; } }从 Chrome 112 开始，原生 CSS 也可以使用嵌套语法了。其语法规则大致如下：parentRule { /* parent rule style properties */ & childRule { /* child rule style properties */ } }CSS 原生嵌套语法能力边界大部分同学对嵌套应该还是非常熟悉的，下面我们一起看看，CSS 原生嵌套的能力边界，语法支持范围。支持嵌套，并且支持多层嵌套这个很好理解，直接看 DEMO：CSSNestingdiv { border: 1px solid #000; .g-h3 { colo ...继续阅读 (80)

1. IntroductionLoading is essential in a website, it can let the user know the flow is processing, otherwise user will not know what’s happening. So, I will introduce an excellent loading package to help you solve the loading issue!2. ngx-loadingngx-loadingis a very nice and customizable loading spinner for Angular, there are flexible config options that let you setup different loading styles. You can install ngx-loading with the below commandnpm install --save ngx-loadingAnd you can find the base usage ingithub3. Use in the common layoutWith normal usage, you need to add the below code ...继续阅读 (83)

中介模式定义了一个单独的（中介）对象，来封装一组对象之间的交互。将这组对象之间的交互委派给与中介对象交互，来避免对象之间的直接交互。在实际的项目中，程序由许多对象组成，对象间的交流错综复杂。随着应用程序的规模增大，对象越来愈多，他们之间的关系也越来复杂。对象间很容易出现相互引用而导致程序无法运行。同时开发者需要改变或者删除某一个对象时候，需要查找并且改造所有引用到它的对象。这样一来，改造的成本会变的非常高。但中介者模式可以让各个对象之间得以解耦。之前的场景下，如果 A 发生了改变，开发者需要修改 B、D、E、F 4 个对象，而通过中介者模式，我们只需要修改中介者这一个对象即可。中介者的好处是简化了对象之间的交互，坏处则是中介类有可能会变成大而复杂的“上帝类”（God Class）。所以，在使用中介者模式时候，设计上一定要非常克制。实际使用在前端项目开发的过程中，有很多业务无关的功能，但这些功能会散落在各个业务中，难以管理，我们利用中介者模式的思想来构建一个的控制器。基础控制器// axios 请求工具 import axios from "axios"; // mitt 微型发布订阅工具 import mitt from "mitt"; const createApi = ($controller) => { const api = axios.create({ b ...继续阅读 (66)

前言周末逛github的时候，发现我们只需要在github域名上加上1s他就能够打开一个vscode窗口来阅读代码，比起在github仓库中查看更加方便然后我就想网页端vscode能不能打开我本地的项目呢，带着这个疑惑我打开了网页版vscode，它居然真的可以打开我本地的项目代码!难道又出了新的API让前端的能力更进一步了？打开MDN查了一下相关文档，发现了几个新的APIshowOpenFilePicker用来选择文件语法showOpenFilePicker()参数options：（可选）包含以下属性multiple：布尔值，默认为false。为true表示允许用户选择多个文件excludeAcceptAllOption：布尔值，默认为false。默认情况下，文件选择器带有一个允许用户选择所有类型文件的过滤选项（展开于文件类型选项中）。设置此选项为true以使该过滤选项不可用。types：表示允许选择的文件类型的数组返回值返回一个promise对象，会兑现一个包含FileSystemFileHandle对象的Array数组。体验打开文件const openFile = async () => { const res = await window.showOpenFilePicker(); console.log(res); };默认只能打开一个文件，可以传入multiple ...继续阅读 (86)

作兔器——手写一个可爱的兔兔相册展示器兔岁既来，为迎兔岁，更以为兔兔甚是可怜，故作一兔相册展示器，以藏兔图。而今先顾此效，如下所示:自译: 兔年既然来了，为了表示欢迎兔年的到来，而且我也认为兔兔很是可爱，令人喜欢，因此写了一个兔兔相册展示器，用来收藏可爱的兔兔图片，现在让我们先来看看这个相册展示器的效果吧，正如下面所展示的:据上而知，此器可分三成，一则为头部，头部含一按钮，点此可随意见兔之图，二则为图区，图区不限，此例乃九，每一区见一兔，鼠标移之可得一词以述兔也，所述则同分为二，其一乃题，其二乃文，文即一词。自译: 根据上图我们可以知道，这个兔兔相册展示器可以分成三个部分，第一个部分就是一个标题栏头部，标题栏头部有一个按钮，点击这个按钮可以随机的展现兔兔的图片，第二个部分则是兔兔的图片展示区域，这个展示区域可以分成多个部分，在这个例子当中是九个图区，每一个图区就会展示一个兔兔，鼠标移上去可以看到一首词来描述兔兔。这个描述同样分成了两部分，第一部分就是标题，第二部分就是内容，内容就是一首诗。三则为细品兔图,鼠标击之，可得一黑盒，黑盒中位，即为兔图，鼠标复击之，即可关之。由之可见，其有动效，如何实之？需有二者，其一为定时器，其二乃以透明度为效，如是娓娓道来。自译： 第三个部分则是详细的预览图片，通过使用鼠标点击图片，就可以得到一个黑色的背景遮罩，在黑色背景遮罩的中间位置，就是兔兔的图片 ...继续阅读 (66)

1. 手搓 Promiseconst PENDING = "pending"; const RESOLVED = "resolved"; const REJECTED = "rejected"; function MyPromise(fn) { // 保存初始化状态 var self = this; // 初始化状态 this.state = PENDING; // 用于保存 resolve 或者 rejected 传入的值 this.value = null; // 用于保存 resolve 的回调函数 this.resolvedCallbacks = []; // 用于保存 reject 的回调函数 this.rejectedCallbacks = []; // 状态转变为 resolved 方法 function resolve(value) { // 判断传入元素是否为 Promise 值，如果是，则状态改变必须等待前一个状态改变后再进行改变 if (value instanceof MyPromise) { return value.then(resolve, reject); } // 保证代码的执行顺序为本轮事件循环的末尾 setTimeout(() => ...继续阅读 (64)