需求响应拦截拦截到302后，我们进入到刷新token逻辑我们后台的数据格式是根据statusCode来判断过期（你们可以根据自己的实际情况判断），接着进入refrshToken方法~看到这，有的小伙伴就有点奇怪retryOldRequest这个又是什么？没错，... ...查看全部

别着急反驳，后面我会给出证据。调试是通过工具获取运行过程中的某一时刻或某一段时间的各方面的数据，帮助开发者理清逻辑、分析性能、排查问题等。 JS 的各种运行环境都会提供调试器，除此以外我们也会自己做一些埋点上报来做调试和统计。但是性能分析的调试工具却不能这样做... ...查看全部

1. MVVM和MVCVue是MVVM，React是MVC。MVVM(Model-View-ViewModel)是在MVC(Model View Controller)的基础上，VM抽离Controller中展示的业务逻辑，而不是替代Controller，其它... ...查看全部

前言微前端是 2016 年thoughtWorks提出的概念，它将微服务的理念应用于浏览器端，即将前端应用由单体应用转变成多个小型前端应用聚合的应用。各个小型前端应用可以独立运行、独立开发、独立部署。与微服务出现的原因相似，随着前端业务越来越复杂，前端的代码和... ...查看全部

背景 可视化大屏项目使用最多的组件就是数字组件，展示数据的一个变化，为了提高视觉效果，需要给数字增加一个滚动效果，实现一个数字到另一个数字逐步递增的滚动动画。 先上一个思维导图： 一、实现类似滚轮的效果，容器固定，数字向上滚动 先列举所有的可能的值形成一个... ...查看全部

前端项目中，金额格式化展示是很常见的需求，在此整理了一些通用的处理方式，如 toLocaleString()；正则匹配；slice()循环截取等等；也解决了小数点精度问题 以此为例：12341234.246 => ¥ 12,341,234.25 方式一... ...查看全部

1. 前言 前两天在工作当中遇到一个问题,在vue3中使用reactive生成的响应式数组如何清空,当然我一般清空都是这么写: let array = [1,2,3]; array = []; 不过这么用在reactive代理的方式中还是有点问题，比如... ...查看全部

当我们用 Typesript 来写 Node.js 的代码，写完代码之后要用 tsc 作编译，之后再用 Node.js 来跑，这样比较麻烦，所以我们会用 ts-node 来直接跑 ts 代码，省去了编译阶段。 有没有觉得很神奇，ts-node 怎么做到的直接跑... ...查看全部

前言 我算是久仰 Typescript 的大名了，因而之前就想学习，但是一直没有抽出时间来看看它。直到最近有一天我在知乎上被邀请回答了 一个问题 —— 一个我以为的中学生问怎么样提升他的开源仓库。我点进去，先是被惊艳到了；然后发现，他用的是 Typescrip... ...查看全部

可怕的启动时间 公司的产品是一个比较大的后台管理系统，而且使用的是webpack3的vue模板项目，单次项目启动时间达到了70s左右 启动个项目都够吃一碗豆腐脑了，可是没有豆腐脑怎么办，那就优化启动时间吧！ 考虑到升级webpack版本的风险还是比较大的，出... ...查看全部

前言本文的编写主要是最近在使用 midway 编写后端应用，midway 的 IOC 控制反转能力跟我们平时常写的前端应用，例如 react、vue 这些单应用还是有蛮大区别的，所以促使我想一探究竟，这种类 Spring IOC 容器是如何用 JavaScri... ...查看全部

手写迷你版Vue参考代码：github.com/57code/vue-…Vue响应式设计思路Vue响应式主要包含：数据响应式监听数据变化，并在视图中更新Vue2使用Object.defineProperty实现数据劫持Vu3使用Proxy实现数据劫持模板引擎提... ...查看全部

相信大部分同学在日常需求开发中或多或少的会有需要一个组件状态被持久化、不被重新渲染的场景，熟悉 vue 的同学一定会想到 keep-alive 这个内置组件。 keep-alive 是 Vue.js 的一个 内置组件。它能够将不活动的组件实例保存在内存中，而不... ...查看全部

我们在小程序开发及运营过程中，不可避免的需要进行页面之间的跳转。如果使用小程序自带的路由功能来实现这个功能，是非常简单的，如： // 根据不同的场景选择 navigateTo、redirectTo、switchTab 等 wx.navigateTo({ u... ...查看全部

前言 对于前端开发人员，checkbox应该是经常见到的东西。利用checkbox的checked属性，我们可以做出很多精彩的效果，之前还用checkbox来做动画暂停。前几天还看到外国大佬使用 checkbok做游戏：http://www.bryanbrau... ...查看全部

如果你相信 Facebook，未来就是一个虚拟现实的“元宇宙”。这家上个月更名为 Meta的科技巨头计划今年投资100 亿美元来开发支持增强现实和虚拟现实的产品——机械手、高科技 VR 眼镜和复杂的软件应用程序，仅举几例。分析师预计该公司至少要花费 500 亿... ...查看全部

1.出现跨域问题是因为浏览器的同源策列限制，下面是MDN文档对浏览器同源策略的描述，简单来说就是：同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host... ...查看全部

原始数据类型原始数据类型包括：BooleanStringNumberNullundefined类型声明是TS非常重要的一个特点，通过类型声明可以指定TS中变量、参数、形参的类型。Boolean 类型let boolean: boolean = truebool... ...查看全部

1. 背景网页开发时，不管是在移动端，还是PC端，都有个很重要的概念，叫做动态懒加载，适用于一些图片资源（或者数据）特别多的场景中，这个时候，我们常常需要了解某个元素是否进入了“视口”（viewport），即用户能不能看到它。 传统的实现方法是，监听到scro... ...查看全部

最近尝试将bundleless的构建结果直接用到了线上生产环境，因为bundleless只会编译代码，不会打包，因此构建速度极快，同比bundle模式时间缩短了90%以上。得益于大部分浏览器都已经支持了http2和浏览器的es module,对于我们没有强兼容... ...查看全部

在进入正题之前, 让我们先回顾下前端模块从无到有的一个简短历史 如果你有一定的工作经验, 并且经历过 jQuery 那样的年代, 应该了解早期的前端模块, 只是 window 上的一个局部变量. 在最初的时候前端工程师为了分享自己的代码, 往往会通过 wind... ...查看全部

 前言 最近真是彻底爱上了 CSS ，我又又又被 CSS 惊艳到了，明明是简单的属性，为啥大佬们稍微一组合，就能形成如此好看的效果啊。本文 给大家带来的是随机不规则圆角头像效果，我们可以把这个效果用于一些人物的展示页面 学习本文章,你可以学到:bor... ...查看全部

Promise 提供了一种优雅的方法来处理 JS 中的异步操作。这也是避免“回调地狱”的解决方案。然而，并没有多少开发人员了解其中的内容。因此，许多人在实践中往往会犯错误。 在本文中，介绍一下使用 promise 时的五个常见错误，希望大家能够避免这些错误。 ... ...查看全部

前言 echarts是一个很强大的图表库，除了我们常见的图表功能，echarts有一个自定义图形的功能，这个功能可以让我们很简单地在画布上绘制一些非常规的图形，基于此，我们来玩一些花哨的。 下面我们来一步步实现他。 1 在坐标系中画一只会动的小鸟 首先实例化一... ...查看全部

项目中对axios进行二次封装随着前端技术的发展，网络请求这一块，越来越多的程序猿选择使用axios来实现网络请求。但是单纯的axios插件并不能满足我们日常的使用，因此我们使用时，需要根据项目实际的情况来对axios进行二次封装。接下来就我对axios的二次... ...查看全部

前言前端性能优化这是一个老生常谈的话题，但是还是有很多人没有真正的重视起来，或者说还没有产生这种意识。当用户打开页面，首屏加载速度越慢，流失用户的概率就越大，在体验产品的时候性能和交互对用户的影响是最直接的，推广拉新是一门艺术，用户的留存是一门技术，拉进来留住... ...查看全部

介绍 本期将带给大家一个简单的创意加载效果——彩条起伏加载。顾名思义，我们会通过scss来完成，将会制作做7个不同颜色的矩形，按不同的延迟不断的递减然后再反弹，循环往复。寓意是希望各位同学像这个加载动画一样，生活过的多姿多彩。 接下来，我们先来一睹为快吧： ... ...查看全部

webpack webpack 本质上是一个静态资源打包工具，静态资源打包是指 webpack 会将文件及其通过 import 、require 等方式引入的各项资源，处理成一个资源依赖关系图，也称为 chunk ，这些资源包括 js，css，jpg， 等等。... ...查看全部

8. 手写call, apply, bind手写callFunction.prototype.myCall=function(context=window){  // 函数的方法，所以写在Fuction原型对象上 if(typeof this !==... ...查看全部

很长一段时间，我都使用Eric Meyer著名的CSS Reset。这是CSS的一个坚实的块，但是在这一点上它有点长。它已经十多年没有更新了，从那时起发生了很多变化！ 最近，我一直在使用我自己的自定义CSS重置。它包括我发现的所有小技巧，以改善用户体验和CSS... ...查看全部

在前端面试中，手撕代码显然是不可避免的，并且占很大的一部分比重。编程题主要分为这几种类型:* 算法题* 涉及js原理的题以及ajax请求* 业务场景题: 实现一个具有某种功能的组件* 其他(进阶，对计算机综合知识的考察，考的相对较少)：实现订阅发布者模式；分别... ...查看全部

前言大家好，我是林三心。写这篇文章是有原因的，偶然我看到了一个Java的50种排序算法的可视化的视频，但是此视频却没给出具体的实现教程，于是我心里就想着，我可以用JavaScript + canvas去实现这个酷炫的效果。每种排序算法的动画效果基本都不一样哦。... ...查看全部

最近一个活动页面中有一个小需求，用户点击或者长按就可以复制内容到剪贴板，记录一下实现过程和遇到的坑。 常见方法 查了一下万能的Google，现在常见的方法主要是以下两种：第三方库：clipboard.js原生方法：document.execCommand()分... ...查看全部

一、对MVVM的理解MVVM全称是Model-View-ViewModelModel 代表数据模型，数据和业务逻辑都在Model层中定义；泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端提供的 api 接口。View 代表UI视图，负责数据的展示... ...查看全部

为了让自己写的代码更优雅且高效，特意向大佬请教了这 10 条 JS 技巧1. 数组分割const listChunk = (list = [], chunkSize = 1) => {const result = [];const tmp = [...l... ...查看全部

阅读本文🦀 1.什么是可选链式操作符号 2.为什么vue3源码中不使用可选链式操作符 什么是可选链式操作符号❓ 可选链操作符( ?. )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。?. 操作符的功能类似于 . 链式操作符，不同之... ...查看全部

前言 大家好，我是林三心，用最通俗的话，讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心，今天就给大家唠一下嗑，讲一下，怎么样使用localStorage、sessionStorage，才能更规范，更高大上，更能让人眼前一亮。 用处 在平时的开发中，lo... ...查看全部

实现 这个效果想利用 CSS 完全复制是比较困难的。CSS 模拟出来的光效阴影相对会 Low 一点，只能说是尽量还原。 其实每组光都基本是一样的，所以我们只需要实现其中一组，就几乎能实现了整个效果。 观察这个效果： 它的核心其实就是角向渐变 -- conic... ...查看全部

工作原理：type="module" 浏览器中ES Module原生native支持。 如果浏览器支持type="module" ，我i们可以使用es6模块化的方式编写。浏览器会把我们需要导入的文件再发一次http请求，再发到服务器上。 开... ...查看全部

前言我们先跟随百度百科了解一下什么是“数据可视化 [1]”。 　　数据可视化，是关于数据视觉表现形式的科学技术研究。 　　其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量。 　　它是一个处于不断演变之中... ...查看全部

对于前端模块化总是稀里糊涂，今天深入学习一下前端模块化，彻底弄懂CommonJs和ES6 Module，希望本文可以给你带来帮助。 CommonJS 模块 CommonJS中规定每个文件是一个模块。将一个JS文件通过script标签插入页面与封装成Common... ...查看全部

前言 本文讲述了JS常用的几种数组遍历方式以及性能分析对比。 如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新的文章～ 数组的方法 JavaScript发展到现在已经提供了许多数组的方法，下面这张图涵盖... ...查看全部

引言 async/await是非常棒的语法糖，可以说他是解决异步问题的最终解决方案。从字面意思来理解。async 是异步的意思，而 await 是 等待 ，所以理解 async用于申明一个function是异步的，而 await 用于等待一个异步方法执行完成... ...查看全部

我们结婚了！ 是的，这次不是女朋友啦，是老婆了！ 时隔将近一个月，老婆又让我给她下载腾讯视频，如果按照上次探索的内容来下载的话，倒是可以一步步下载，合并，不过很麻烦，程序员不都是为了解决麻烦的吗，这么麻烦的步骤，有没有简单点呢。有!当然有，有很多简单的工具，... ...查看全部

前言前端工程化，简而言之就是软件工程 前端，以自动化的形式呈现。就个人理解而言：前端工程化，从开发阶段到代码发布生产环境，包含了以下几个内容：开发构建测试部署性能规范 下面我们根据上述几个内容，选择有代表性的几个方面进行深入学习前端工程化。脚手架脚手... ...查看全部

前言 佛祖保佑， 永无bug。Hello 大家好！我是海的对岸！ 实际开发中，碰到一个日历的需求，这个日历的需求中要加入定制的业务，网上没有现成的，手动实现了一下，整理记录下。 动画效果： 实现 实现背景 工作上碰到一个需求，需要有一个可以在日历上能看到每天... ...查看全部

通用唯一识别码（英语：Universally Unique Identifier，缩写：UUID）是用于计算机体系中以识别信息的一个 128 位标识符，通常表现为一串 32 位十六进制数字。 UUID 用于解决 ID 唯一的问题! 然而，如何确保唯一，这本身... ...查看全部

一、背景 9月份换了一个新部门，部门成立时间不长，当时组内还没有统一的代码规范（部分工程用了规范，部分没有，没有统一的收口） 小组的技术栈框架有Vue，React，Taro，Nuxt，用Typescript，算是比较杂了，结合到部门后续还可能扩展其他技术栈，我... ...查看全部