11 2023 档案
摘要:前端 H5 微信支付宝支付实现 以 uniapp 项目为例 支付宝的 首先是一个支付类型选择页面,在选择支付宝支付后,跳转到一个空白页,用于支付宝支付的中转页面。 在点击立即支付之后,直接跳转至自行设置好的空白页就好,并把你生成订单所需要的数据一并带过去。 uni.navigateTo({ url:
阅读全文
摘要:有没有区别? 先上一个 Demo,看看async函数中return时加和不加await有没有区别: function bar() { return Promise.resolve("this from bar()."); } async function foo1() { return await
阅读全文
摘要:- 什么是 CICD 是指持续集成、持续发布,是⼀套实现软件的构建测试部署的⾃动化流程。 什么是 DevOps ⼀词是由英⽂ Development(开发)和 Operations (运维)组合⽽成 ⼀种思想,强调软件开发测试运维的⼀体化,减少各个部⻔之间的沟通成本从⽽实现软件的快速⾼质 ᰁ 的发布
阅读全文
摘要:今天用户反馈使用页面的时候,有时候点击没反应,排查下来,是因为发布版本的时候,用户那边没有加载最新的文导致的,然后根据思路,做了这个自动更新的功能 效果预览 http://demo.webwlx.cn/#/update 实现思路 1. 把当前版本的编译时间,通过环境变量的方式保存起来 打开 vite
阅读全文
摘要:大致内容如下 通过部署一个简单的项目到 gitlab pages 初步了解 gitlab CI/CD 了解 gitlab CI/CD 基础概念、运行机制等 使用 gitlab 自带 runner 进行自动化部署、使用 ssh 命令操作部署远程服务器 在自己服务器安装 gitlab runner 进行
阅读全文
摘要:假设你入职了一家小公司,既没有内部自研的 DevOps 平台,也没有专业的运维。需要你自己去搭建多环境 CI/CD 自动化部署,你会怎么做? 你可能需要综合考虑成本、服务器选择、CI/CD 易用度、可扩展等方面,对于不怎么熟悉 CI/CD 相关的小伙伴来说有点难以选择。 这里先给大家介绍两个可以免费
阅读全文
摘要:前端项目性能优化和开发体验优化是无法避免的一个话题,在之前使用 webpack 做应用构建的时候,有许多手段和插件来做优化。当使用 vite 构建应用时也有许多插件来做优化,本文对 vite 的优化插件或方法做下汇总。 一、打包性能优化 1. html 处理 vite-plugin-html vit
阅读全文
摘要:前言 近期需要开发一个微信小程序生成海报分享的功能。在 h5 一般都会直接采用 html2canvas 或者 dom2image 之类的库直接处理。但是由于小程序不具备传统意义的 dom 元素,所以也没有办法采用此类工具。 所以就只能一笔一笔的用 canvas 画出来了,下面对实现这个功能中遇到的问
阅读全文
摘要:前言提示:本文记录的是使用uniapp开发的H5+APP项目,H5端使用微信自定义分享功能,文中有关APP的兼容,如果不需要兼容APP的可以忽略 一、引入 首先安装 jweixin-module 包 npm install jweixin-module --save 二、封装工具方法 为了方便使用,
阅读全文
摘要:前言 在使用 vue3 + vite 实际开发过程中的一些经验分享,涵盖 vite 构建优化配置项的实践,以及打包配置性能优化的实践 plugin 项目优化汇总 @vitejs/plugin-vue vite 支持 vue 开发 按需引入组件库 unplugin-vue-components unp
阅读全文
摘要:前言 vue3是基于 proxy 实现响应式的能力, 解决了vue2所遗留下来的一些问题,同时也正由于 proxy 的特性,也提高了运行时的性能 凡事有利有弊, proxy虽然无敌,但是他也有本身的局限,从而产生一些认为的弊端 原始值的响应式系统的实现 导致必须将他包装为一个对象, 通过 .valu
阅读全文
摘要:前言 在日常开发中,文件上传是常见的操作之一。文件上传技术使得用户可以方便地将本地文件上传到 Web 服务器上,这在许多场景下都是必需的,比如网盘上传、头像上传等。 但是当需要上传比较大的文件的时候,容易碰到以下问题: 上传时间比较久; 中间一旦出错就需要重新上传; 一般服务端会对文件的大小进行限制
阅读全文
摘要:经常使用React都知道,有些hook被设计为:依赖项数组 + 回调的形式,比如: useEffect useMemo 通常来说,当依赖项数组中某些值变化后,回调会重新执行。 React的写法十分灵活,那么有没有可能,在依赖项数组不变的情况下,回调依然重新执行? 描述下 Demo 在这个示例中,存在
阅读全文
摘要:前言: 最近接手做一个支付中心的的项目,需要接入微信和支付宝的pc 和 h5 两个平台的支付。因为之前支付相关的服务都是各个部门自己做,但现在为了统一公司形象以及统一管理,需要做一个公共项目接公司各个业务线的支付需求。 一、产品需求: pc场景: 在pc网页端支付步骤中的收银台处显示收款二维码,支持
阅读全文
摘要:正文 1、你知道直连模式和服务商模式吗 网上的课程一般给你演示的都是直连模式,而企业中有不少是申请成为了服务商,因为里面有佣金提成。 我粗俗地解释,直连模式,就是说你是一个会做生意的老板,自己会搞钱,搞到钱存到自己的一个商户号里。 服务商模式,就是说你是一个会做生意的老板,但是自己不搞钱只提供做生意
阅读全文
摘要:因业务需要,开发微信支付功能,涉及三种支付方式: JSAPI 支付:微信内网页支付,需要开通微信服务号 小程序支付:在小程序中支付,需要开通小程序 H5 支付:在手机浏览器(出微信内网爷)中网页支付 使用微信支付的前提必开通微信商户号,要使用到那种的支付方式要前需在商户平台开通(要审核)。 支付的钱
阅读全文
摘要:因业务需要,开发微信支付功能,涉及三种支付方式: JSAPI 支付:微信内网页支付,需要开通微信服务号 小程序支付:在小程序中支付,需要开通小程序 H5 支付:在手机浏览器(出微信内网爷)中网页支付 使用微信支付的前提必开通微信商户号,要使用到那种的支付方式要前需在商户平台开通(要审核)。 支付的钱
阅读全文
摘要:两个inject工具函数轻松解决严格注入和Hook 返回值透传问题! 痛苦的经历 自从使用了Provide/Inject代码的组织方式更加灵活了,但是这个灵活性的增加伴随着代码容错性的降低。相信只要是真的在项目中引入Provide/Inject的同学,一定一定有过或者正在经历下面的状况: 😢 注入
阅读全文
摘要:项目背景 随着业务的积累,前端项目之间逐渐会产生许多可以跨项目复用的逻辑或组件。比如对前端数据库 indexedDB 的封装、对 fetch 请求进度和中断请求功能的扩展、以及可能会在多个项目使用的 react 和 vue 组件。当前已经有一个公共库专门用来收敛 js 的逻辑复用,但是随着相同技术栈
阅读全文
摘要:前言 与许多其他编程语言一样,JavaScript 也在不断发展。每年,该语言都会通过新功能变得更加强大,使开发人员能够编写更具表现力和简洁的代码。 ES13(ECMAScript 2022)新特性 1.类 在 ES13 之前,类字段只能在构造函数中声明。与许多其他语言不同,无法在类的最外层作用域中
阅读全文
摘要:1. Promise.any E12 新增的 Promise 的方法 接收一个 Promise 数组,数组中如有非 Promise 项,则此项当做成功 如果有一个 Promise 成功,则返回这个成功结果 如果所有 Promise 都失败,则报错 // 当有成功的时候,返回最快那个成功 functi
阅读全文
摘要:1. Promise.allSettled ES11 新增的 Promise 的方法 接收一个 Promise 数组,数组中如有非 Promise 项,则此项当做成功 把每一个 Promise 的结果,集合成数组,返回 function fn(time, isResolve) { return ne
阅读全文
摘要:1. Array.flat 有一个二维数组,想让他变成一维数组: const arr = [1, 2, 3, [4, 5, 6]]; console.log(arr.flat()); // [ 1, 2, 3, 4, 5, 6 ] 还可以传参数,参数为降维的次数 const arr = [1, 2,
阅读全文
摘要:1. for await of 来看以下场景 function fn(time) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(`${time}毫秒后成功!!!`); }, time); }); } fn
阅读全文
摘要:1. Object.values 可以用来获取对象的 value 的集合 const obj = { name: "柯基", age: 22, gender: "男", }; const values = Object.values(obj); console.log(values); // [ '
阅读全文
摘要:1. includes 传入元素,如果数组中能找到此元素,则返回 true,否则返回 false const includeArr = [1, 2, 3, "柯基", "科比"]; const isKobe = includeArr.includes("科比"); console.log(isKob
阅读全文
摘要:1. let 和 const 要逐渐放弃 let,在项目中多用 let 和 const,与 let 的区别: let 有变量提升,有初始化提升,值可变 let 有变量提升,没有初始化提升,值可变 const 有变量提升,没有初始化提升,值不可变,但如果是定义对象,则属性可变 暂时性死区问题说明:其实
阅读全文
摘要:有以下三种: 数据绑定与观察者模式 函数参数的验证 简便的构造函数 1.数据绑定与观察者模式 实现数据绑定与观察者模式,也可以使用 ES5 新增的 Object.defineProperty()方法,Vue2 就是使用该技术实现的,而 Vue3 为什么换用 Pro 需要来实现呢? 所以现在先来对比一
阅读全文
摘要:详解 JS 中的 Proxy(代理)和 Reflect(反射) 总所周知,Vue2 => Vue3 时,数据响应式方法从 Object.defineProperty()方法变成了 Proxy(),所以今天与 Proxy(代理)和 Reflect(反射)的知识。 讲解 Proxy 和 Reflect
阅读全文
摘要:for...in 的特点 for...in 循环返回的值都是数据结构的 键值名(即下标)。 遍历对象返回的对象的 key 值,遍历数组返回的数组的下标(key)。 for...in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。 特别情况下, for...in 循环会以看起来任意的
阅读全文
摘要:什么是迭代器模式 迭代器模式提供一种方法顺序访问一个聚合对象中的各个元素,而又不暴露该对象的内部表示。 ——《设计模式:可复用面向对象软件的基础》 可以说迭代器模式就是为了遍历存在的。提到遍历,大家都对那些手段耳熟能详了,下面先简单列一下各种数据类型的遍历: 遍历数组 for 循环 forEach
阅读全文
摘要:Generator 是 ES6 中新增的语法,和 Promise 一样,都可以用来异步编程。Generator 函数可以说是 Iterator 接口的具体实现方式。Generator 最大的特点就是可以控制函数的执行。 function* 用来声明一个函数是生成器函数,它比普通的函数声明多了一个*,
阅读全文
摘要:1. generator 的使用 Generator 函数跟普通函数的写法有非常大的区别: 一是,function 关键字与函数名之间有一个星号; 二是,函数体内部使用 yield 语句,定义不同的内部状态(yield 在英语里的意思就是“产出”)。 最简单的 Generator 函数如下: fun
阅读全文
摘要:目录一、Promise 介绍定义特点缺点场景基本用法二、promise 源码实现 一、Promise 介绍 定义 Promise 是异步编程的一种解决方法,比传统的回调函数和事件更合理;它是由社区提出和实现经由 ES6 将其写进语言标准,并在原生提供了 Promise 对象; Promise 可以理
阅读全文
摘要:目录前言一个令人头疼的需求准备工作Promiseasynccombine-async-error 心路历程封装之前让 await 永远不要抛出错误保证不抛出错误保证顺序执行开始封装使用形式完成 combineAsyncError 的返回值combineAsyncError 的初始化工作在 handl
阅读全文
摘要:Promise 的状态一经改变就不能再改变 .then 和.catch 都会返回一个新的 Promise catch 不管被连接到哪里,都能捕获上层的错误 在 Promise 中,返回任意一个非 promise 的值都会被包裹成 promise 对象,例如 return 2 会被包装为 return
阅读全文
摘要:性能优化这个词经常会在前端的工作或面试中遇到,这个东西说难好像也并不怎么难,毕竟谁都能说上几点。但是如果你想在工作上遇到各种场景的性能瓶颈时都有直击本质的性能方案,或者在面试时让面试官眼前一亮,那就不能只拘泥于『想到哪说到哪』或者『说个大概』,而要有一套体系化的、各个角度的、深入了解的知识图谱。这篇
阅读全文
摘要:前言 数组在 js 中作为一个非常重要的类型之一,在对数据处理,存储数据,条件渲染的时候经常会用到,所以随着 ES 的不断更新,数组的方法也是越来越多,也让使用数组对数据操作的时候,越来越简单,但是不经意间,数组的方法已经有 42 个之多,接下来让看看有哪些数组方法从出来就你还没用过的吧! 数组方法
阅读全文
摘要:需求与效果 需求: 1、礼品根据后台配置生成 2、跑马灯转动效果 3、结果后台生成并且每个礼物概率不一样(概率这里不讨论) 注意点: 1、布局如何排列,是按照跑动排列还是从左至右自上而下排列 2、点击按钮如何插入,DOM结构如何生成 3、跑马效果如何实现,速度如何控制 4、接口如何处理,包括接口报错
阅读全文
摘要:1、实现转盘数据动态配置(可通过接口获取) 2、背景色通过分隔配置 3、转动速度慢慢减速,最后停留在每一项的中间,下一次开始从本次开始 4、当动画停止后在对应事件中自定义生成中奖提示。 5、本次中奖概率随机生成,也可自定义配置 实现代码 html <template> <div class="gra
阅读全文
摘要:表单Form是中后台频繁使用的组件,以下是一个基于arco design vue组件库封装的表单组件。 这个表单组件特点: 所有配置都是直接继承组件库组件的props,无需其他文档 可配置展开折叠 支持响应式布局 表单项支持动态隐藏 插槽支持,自定义扩展 组件库的良好支持,封装代码简洁优雅 plac
阅读全文
摘要:数据接口设计 type TreeItem = { value: string label: string children?: TreeItem[] } export type FormListItem = { // 栅格占据的列数 colSpan?: number // 表单元素特有的属性 pro
阅读全文
摘要:壹 ❀ 引 在 JS 开发工作中,遍历数组的操作可谓十分常见了,那么像 for 循环,forEach 此类方法自然也不会陌生,直到遇到了一个有趣的问题,来看一段代码: let arr = [1, 2]; arr.forEach((item, index) => { arr.splice(index,
阅读全文
摘要:为什么有人说 vite 快,有人却说 vite 慢 谈到 Vite,给人的第一印象就是 dev server 启动速度快。同样规模的项目,相比 Webpack 动辄十几秒甚至几十秒的的启动速度,Vite 简直是快到没朋友,往往数秒之内即可完成启动 最近在做一些关于开发体验的性能优化,就想着把手上一些
阅读全文
摘要:什么是环境变量 根据当前的代码环境变化的变量就叫做环境变量。比如,在生产环境和开发环境将 BASE_URL 设置成不同的值,用来请求不同的环境的接口。 环境变量一般可以在全局访问到。在 webapck 中,也许看到过这样的代码 // webpack.config.js module.exports
阅读全文
摘要:准备 为了方便插件开发,这里就先做简单点,在项目根目录建立build文件夹,里面存放一些自定义的插件。 // # build/test.js export function testPlugin() { return { //插件名字 name: "vite-plugin-test", option
阅读全文
摘要:前言 最近使用 vite 在写项目时,遇到vue3中给setup添加name的问题,本来是打算直接使用插件进行实现的,但是评论说是会有各种各样的问题,看了下vite插件介绍后,下面来讲解 Vite 插件的基本概念。 Vite 和 Rollup 有了解过 Vite 的都知道,Vite 开发用的 ESB
阅读全文
摘要:Vite 构建环境分为开发环境和生产环境,不同环境会有不同的构建策略,但不管是哪种环境,Vite 都会首先解析用户配置。那接下来,就与你分析配置解析过程中 Vite 到底做了什么?即 Vite 是如何加载配置文件的。 流程梳理 先来梳理整体的流程,Vite 中的配置解析由 resolveConfig
阅读全文
摘要:webpack5 已经发布,将主要涉及的新特性及这些特性的使用方法总结了一下。 英文文档地址:webpack 中文文档地址:webpack.docschina github 地址:github 1、内置静态资源构建能力 —— Asset Modules 在 webpack 5 之前,通常使用: ra
阅读全文
摘要:用过 webpack 的都知道,webpack 的 sourcemap 配置是比较麻烦的,比如这两个配置的区别: eval-nosources-cheap-module-source-map hidden-module-source-map 是不是分不清楚? 其实它是有规律的。 把配置写错的时候,w
阅读全文
摘要:Babel 的包构成 核心包 babel-core:babel 转译器本身,提供了 babel 的转译 API,如 babel.transform 等,用于对代码进行转译。像 webpack 的 babel-loader 就是调用这些 API 来完成转译过程的。 babylon:js 的词法解析器
阅读全文
摘要:一次完整的 webpack 打包大致是这样的过程: 将命令行参数与 webpack 配置文件 合并、解析得到参数对象。 参数对象传给 webpack 执行得到 Compiler 对象。 执行 Compiler 的 run 方法开始编译。每次执行 run 编译都会生成一个 Compilation 对象
阅读全文
摘要:Webpack 中的静态资源文件指纹 在 webpack 中如何给静态资源加 hash 值:每次构建过程都会生成一个新的 hash,所以一般用于做版本控制;chunkhash 是基于内容生成的,但是 webpack 把所有类型的文件都以 js 为汇聚点打成一个 bundle,改了 css 也会导致整
阅读全文
摘要:(面试)说一下 webpack 的热更新原理? webpack 通过 watch 可以监测代码的变化;webpack-dev-middleware 可以调用 webpack 暴露的 API 检测代码变化,并且告诉 webpack 将代码保存到内存中;webpack-dev-middleware 通过
阅读全文
摘要:All in One 的弊端 通过 Webpack 实现前端项目整体模块化的优势固然明显,但是它也会存在一些弊端:它最终会将所有的代码打包到一起。试想一下,如果应用非常复杂,模块非常多,那么这种 All in One 的方式就会导致打包的结果过大,甚至超过 4 ~ 5M。 在绝大多数的情况下,应用刚
阅读全文
摘要:前言 前端在做性能优化的时候,其中一种有效的方式就是减少包体积的大小。而减少包体积大小的其中一种有效的方式就是 tree-shaking,翻译成中文就是摇树。这个词非常形象,当果树结果后,如果用力摇树,那些成熟了但是还挂在树上的果子就会掉下来,减轻树的负担,因为果子已经成熟了,没有必要在呆在树上了。
阅读全文
摘要:动态的引入图片为什么要使用 require 因为动态添加 src 被当做静态资源处理了,没有进行编译,所以要加上 require 乍一看好像说的很有道理啊,但是仔细一看,这句话说的到底是个啥?针对上面的回答,不禁有如下几个疑问: 什么是静态资源? 为什么动态添加的 src 会被当做的静态的资源? 没
阅读全文
摘要:webpack 是一个现代 JavaScript 应用程序的静态模块打包器 (module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图 (dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 前
阅读全文
摘要:编写一个loader 在平时自己由零搭建项目时,虽然基础配置都比较熟悉,比如配置 file-loader, url-loader, css-loader 等,配置不难,但究竟是怎么起作用的呢,如何编写一个 Webpack Loader。 loader 通常指打包的方案,即按什么方式来处理打包,打包的
阅读全文
摘要:vue打包的时候将git提交信息打包进去 在项目根目录下新建一个名为 preBuild.js 的脚本文件,内容如下: const child_process = require("child_process"); const fs = require("fs"); let commitId = ch
阅读全文
摘要:今天用户反馈使用页面的时候,有时候点击没反应,排查下来,是因为发布版本的时候,用户那边没有加载最新的文导致的,然后根据思路,做了这个自动更新的功能 效果预览 http://demo.webwlx.cn/#/update 实现思路 1. 把当前版本的编译时间,通过环境变量的方式保存起来 打开 vite
阅读全文
摘要:前言 在公司里我们有很多需要公共组件或者是工具函数工具类,和一些封装的sdk,这样的代码有的核心的不方便发布到外网中,所以这就是我们为什么需要搭建 npm 私有仓库。 verdaccio 是一个非常方便使用和管理的 npm 私有仓库搭建工具,搭建好后设置 npm 源为 verdaccio 服务就可以
阅读全文
摘要:大致内容如下 通过部署一个简单的项目到 gitlab pages 初步了解 gitlab CI/CD 了解 gitlab CI/CD 基础概念、运行机制等 使用 gitlab 自带 runner 进行自动化部署、使用 ssh 命令操作部署远程服务器 在自己服务器安装 gitlab runner 进行
阅读全文
摘要:假设你入职了一家小公司,既没有内部自研的 DevOps 平台,也没有专业的运维。需要你自己去搭建多环境 CI/CD 自动化部署,你会怎么做? 你可能需要综合考虑成本、服务器选择、CI/CD 易用度、可扩展等方面,对于不怎么熟悉 CI/CD 相关的小伙伴来说有点难以选择。 这里先给大家介绍两个可以免费
阅读全文
摘要:1. 基于【Event Loop】的长列表渲染优化 背景 日志查看、指令展示 等 列表很长,且不能使用分页、触底懒加载的场景 使用 vue+element-ui 表格展示接口返回数据,数据量为万级。 页面内容白屏二十秒左右后显示出数据,期间页面其他功能/按钮无法正常的交互,之后页面滚动、点击等事件也
阅读全文
摘要:前言 懒加载也就是延迟加载。当访问一个页面的时候,先把 img 元素或是其他元素的背景图片路径替换成一张大小为 1*1px 图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,从而减轻服务器压力,避免用户等待时间过长(一般在网站图片很多的时候使用
阅读全文
摘要:1. 减少 HTTP 请求 一个完整的 HTTP 请求需要经历 DNS 查找,TCP 握手,浏览器发出 HTTP 请求,服务器接收请求,服务器处理请求并发回响应,浏览器接收响应等过程。接下来看一个具体的例子帮助理解 HTTP : 自己找了一个 HTTP 请求,请求的文件大小为 28.4KB。 名词解
阅读全文
摘要:通过设计模式可以帮助增强代码的可重用性、可扩充性、 可维护性、灵活性好。使用设计模式最终的目的是实现代码的 高内聚 和 低耦合 工厂模式(创建型模式) 先来理解一个概念 —— 构造器模式 开了家动物园,只有两只动物,可能会这样录入系统: const monkey = { name: '悟空', ag
阅读全文
摘要:主要介绍面向对象六大原则中的单一职责原则(SRP)、开放封闭原则(OCP)、最少知识原则(LKP)。 设计原则是指导思想,从思想上给指明程序设计的正确方向,是在开发设计过程中应该尽力遵守的准则。而设计模式是实现手段,因此设计模式也应该遵守这些原则,或者说,设计模式就是这些设计原则的一些具体体现。要达
阅读全文
摘要:微前端qiankun 沙箱与样式隔离的实现原理 js 沙箱 js/css 污染是无法避免的,并且是一个可大可小的问题。就像一颗定时炸弹,不知道什么时候会出问题,排查也麻烦。作为一个基础框架,解决这两个污染非常重要,不能仅凭“规范”开发。 js 沙箱的原理是子项目加载之前,对 window 对象做一个
阅读全文
摘要:无界微前端方案 微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题,或无法提供支持。本文提供一种基于 iframe 的全新微前端方案,完善的解决了这些核心
阅读全文
摘要:优缺点分析 iframe 适合的场景 由于 iframe 的一些限制,部分场景并不适合用 iframe,比如像下面这种 iframe 只占据页面中间部分区域,由于父页面已经有一个滚动条了,为了避免出现双滚动条,只能动态计算 iframe 的内容高度赋值给 iframe,使得 iframe 高度完全撑
阅读全文
摘要:方案设计 在实际业务中,权限系统的设计其实可以做到很复杂,但是为了简单起见只保留一些最基本且核心的模块: 登录模块:权限平台一般需要靠登录获取用户身份,并通过凭证去请求接口,包括注册功能。 系统管理模块:包括用户管理、角色管理、菜单管理(如果菜单是前端控制则可以省略)等功能,是权限系统中的核心部分。
阅读全文
摘要:从这个有16.2k星星的后台管理系统项目Vue vben admin中看看它是如何做的。 获取权限码 要做权限控制,肯定需要一个code,无论是权限码还是角色码都可以,一般后端会一次性返回,然后全局存储起来就可以了,Vue vben admin是在登录成功以后获取并保存到全局的store中: imp
阅读全文
摘要:基础概念 在介绍鉴权方法之前,先要了解的是:什么是认证、授权、鉴权、权限控制以及他们之间的关系,有了他们做铺垫,那么才能做到从始至终的了解透彻 ~ 什么是认证? 认证(Identification) 是指根据声明者所特有的识别信息,确认声明者的身份。 白话文的意思就是:需要用身份证证明自己是自己。
阅读全文
摘要:前言 如何快速定位线上 bug,是多数开发者都会遇到的难题 web-see 前端监控方案,提供了 前端录屏+定位源码 方式,让 bug 无处藏身 最终效果 在监控后台,通过报错信息列表,可以查看具体报错的源码,以及报错时的录屏回放 效果演示: 录屏记录了用户的所有操作,红色的线代表了鼠标的移动轨迹
阅读全文
摘要:前言 前端监控是一个很有亮点的项目,各个大厂都有自己的内部实现,没有监控的项目好比是在裸奔 文章分成以下六部分来介绍: 自研监控平台解决了哪些痛点,实现了什么亮点功能? 相比 sentry 等监控方案,自研监控的优势有哪些? 前端监控的设计方案、监控的目的 数据的采集方式:错误信息、性能数据、用户行
阅读全文
摘要:一、Sentry 简介 Sentry 是一套开源的实时异常收集、追踪、监控系统,支持几乎所有的语音和平台。 这套系统由对应各种语言的 SDK 和一套庞大的数据后台服务组成,通过 Sentry SDK 的配置,可以上报错误关联的版本信息、发布环境。同时 Sentry SDK 会自动捕捉异常发生前的相关
阅读全文
摘要:大致是如下步骤: 根据地址栏输入的地址向 DNS(Domain Name System)查询 IP 通过 IP 向服务器发起 TCP 连接 向服务器发起请求 服务器返回请求内容 浏览器开始解析渲染页面并显示 关闭连接 一.DNS 域名解析的过程是逐级查询的 浏览器缓存: 首先会向浏览器的缓存中读取上
阅读全文
摘要:浏览器存储 一、Cookieb 什么是 Cookie 及应用场景 Cookie 指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie 是服务端生成,客户端进行维护和存储。通过 cookie,可以让服务器知道请求是来源哪个客户端,就可以进行客户端状态的维护,比如登陆后
阅读全文
摘要:跨域请求如何携带cookie 学习withCredentials属性; 学习axios配置withCredentials; 学习设置Access-Control-Allow-Origin属性; 学习设置Access-Control-Allow-Credentials属性; 学习解决跨域请求携带源站
阅读全文
摘要:普通理解 垃圾回收机制有两种方式,一种是引用法,一种是标记法 引用法 就是判断一个对象的引用数,引用数为 0 就回收,引用数大于 0 就不回收。请看以下代码 let obj1 = { name: "柯基", age: 22 }; let obj2 = obj1; let obj3 = obj1; o
阅读全文
摘要:一:堆和栈 1. 数据的存储方式 栈内存:线性有序存储,容量小,系统分配效率高。(存放原始类型) 堆内存:首先要在堆内存新分配存储区域,之后又要把指针存储到栈内存中,效率相对就要低一些了。 (存放引用类型的值) 2. 为什么一定要分“堆”和“栈”两个存储空间呢?所有数据直接存放在“栈”中不就可以了吗
阅读全文
摘要:技术关键词 前端:@vue/cli-service+element-ui+axios 后端:node.js+koa 思路分析 拖拽上传 拖拽上传是利用 HTML5 新特性实现拖拽上传,详细用法可阅读 MDN-drag 利用 dragover 事件(当某物被拖动的对象在另一对象容器范围内拖动时触发此事
阅读全文
摘要:一、 axios 重新发送请求基础版(所有的请求错误,不论是请求超时还是接口请求出错都会进行重试) 以下是一个完整的文件,看懂了的话 axios 重试请求也就基本会了,不会的话直接复制到项目里,也可以直接调用使用。 创建一个 axios 实例,并在实例中设置请求超时时间 timeout、重试请求次数
阅读全文
摘要:队列有x个之后执行 正文 在网上看到这么一道题: 首先来实现一个分割数组的函数~ const group = (list = [], max = 0) => { if (!list.length) { return list; } let results = []; for (let i = 0,
阅读全文
摘要:1.ajax:是指一种创建交互式网页应用的网页开发技术,并且可以做到无需重新加载整个网页的情况下,能够更新部分网页,也叫作局部更新 优缺点: 1)局部更新 2)原生支持,不需要任何插件 3)原生支持,不需要任何插件 4)可能破坏浏览器后退功能 5)嵌套回调,难以处理 2.axios:是一个基于 pr
阅读全文
摘要:目录需求实现问题解决注意事项: 需求 当 token 过期的时候,刷新 token,前端需要做到无感刷新 token,即刷 token 时要做到用户无感知,避免频繁登录。实现思路 方法一 后端返回过期时间,前端判断 token 过期时间,去调用刷新 token 接口 缺点:需要后端额外提供一个 to
阅读全文
摘要:我看了很多 axios 的封装,但是我感觉他们的封装。也不够自由,主要是写完之后,如果以后有东西需要修改的时候,还要回去拦截器进行修改。但是有一些东西拦截器可能是你以后的业务需求才需要添加的。 我就在想我能不能拦截器做成插件式的模式进行动态配置呢?例如下面的效果,点击添加一个请求缓存器,请求的时候就
阅读全文
摘要:从源码解析axios拦截器是如何工作的 axios 拦截器的配置方式 axios 中有两种拦截器: axios.interceptors.request.use(onFulfilled, onRejected, options):配置请求拦截器。 onFulfilled 方法在发送请求前执行,接收
阅读全文
摘要:实现原理(简单文字) slot 又名插槽,是 Vue 的内容分发机制,组件内部的模板引擎使用 slot 元素作为承载分发内容的出口。插槽 slot 是子组件的一个模板标签元素,而这一个标签元素是否显示,以及怎么显示是由父组件决定的。slot 又分三类,默认插槽,具名插槽和作用域插槽 实现原理:当子组
阅读全文
摘要:Vue3 的 Provide / Inject 的实现原理其实就是巧妙利用了原型和原型链来实现的,所以在了解 Vue3 的 Provide / Inject 的实现原理之前,先复习一下原型和原型链的知识。 原型和原型链的知识回顾 prototype 与 __proto__ prototype 一般称
阅读全文
摘要:什么是模板引用 ref ? 有时候可以使用 ref attribute 为子组件或 HTML 元素指定引用 ID。 <template> <input ref="input" /> </template> <script> import { defineComponent, ref } from "
阅读全文
摘要:所谓 watch,就是观测一个响应式数据或者监测一个副作用函数里面的响应式数据,当数据发生变化的时候通知并执行相应的回调函数。 Vue3 最新的 watch 实现是通过最底层的响应式类 ReactiveEffect 的实例化一个 reactive effect 对象来实现的。它的创建过程跟 effe
阅读全文
摘要:前言 技术栈是 Vue 的人,在面试中难免会被问到 Vue2 和 Vue3 的相关知识点的实现原理和比较,面试官是步步紧逼,一环扣一环。 Vue2 的响应式原理是怎么样的? Vue3 的响应式原理又是怎么样的? Vue2 中是怎么监测数组的变化的? Vue3 中又是怎么监测数组的变化的? 在问完 V
阅读全文
摘要:Vue.js 内部将 DOM 节点抽象成了一个个的 VNode 节点,keep-alive 组件的缓存也是基于 VNode 节点的而不是直接存储 DOM 结构。它将满足条件(pruneCache 与 pruneCache)的组件在 cache 对象中缓存起来,在需要重新渲染的时候再将 vnode 节
阅读全文
摘要:作用:vue 更新 DOM 是异步更新的,数据变化,DOM 的更新不会马上完成,nextTick 的回调是在下次 DOM 更新循环结束之后执行的延迟回调。 实现原理:nextTick 主要使用了宏任务和微任务。根据执行环境分别尝试采用 Promise:可以将函数延迟到当前函数调用栈最末端 Mutat
阅读全文
摘要:给对应和数组本身都增加了 dep 属性 当给对象新增不存在的属性则触发对象依赖的 watcher 去更新 当修改数组索引时,调用数组本身的 splice 去更新数组(数组的响应式原理就是重新了 splice 等方法,调用 splice 就会触发视图更新) splice(); push(); pop(
阅读全文
摘要:何为 scoped 在 vue 文件中的 style 标签上,有一个特殊的属性:scoped。当一个 style 标签拥有 scoped 属性时,它的 CSS 样式就只能做用于当前的组件,也就是说,该样式只能适用于当前组件元素。经过该属性,可使得组件之间的样式不互相污染。若是一个项目中的全部 sty
阅读全文
摘要:方式一:布尔模式 方法一:直接传参 路由配置: { path: '/user/:id/:price', name: 'User', component: User, props: true } 页面 A <template> <div> <router-link :to="{ name: 'User
阅读全文
摘要:实现一个插件:声明 Store 类,挂载$store Store 具体实现: 创建响应式的 state,保存 mutations、actions 和 getters 实现 commit 根据用户传入 type 执行对应 mutation 实现 dispatch 根据用户传入 type 执行对应 ac
阅读全文
摘要:Pinia 优势 Pinia.js 是新一代的状态管理器,由 Vue.js 团队中成员所开发的,因此也被认为是下一代的 Vuex,即 Vuex5.x,在 Vue3.0 的项目中使用也是备受推崇。 Pinia.js 有如下特点: 完整的 typescript 的支持; 足够轻量,压缩后的体积只有 1.
阅读全文
摘要:相同点 state 共享数据 流程一致:定义全局 state,触发,修改 state 原理相似,通过全局注入 store。 不同点 vuex 定义了 state、getter、mutation、action 四个对象;redux 定义了 state、reducer、action。 vuex 触发方式
阅读全文
摘要:什么是 Vuex? Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件.它采用集中式存储管理应用的所有组件的状态,而更改状态的唯一方法是提交 mutation.例 , this.$store.commit('SET_VIDEO_PAUSE', video_pause); SET_VIDE
阅读全文
摘要:ref 和 reactive 是 Vue3 中用来实现数据响应式的 API 一般情况下,ref 定义基本数据类型,reactive 定义引用数据类型(喜欢用它来定义对象,不用它定义数组,原因后面讲) 理解的 ref 本质上是 reactive 的再封装 ref: 通过 Object.definePr
阅读全文
摘要:VUE3+VITE+TS 项目中的要点 使用 vue3+vite+ts 构建项目基础框架,配置代码运行环境,对项目进行模块化划分,并集成 element 组件库、axios 请求库; 利用 axios 拦截器实现了权限校验,对系统的登入权限进行控制,避免了无效请求; 利用 vue-router 路由
阅读全文
摘要:什么是插槽 简单来说就是子组件中的提供给父组件使用的一个坑位,用 表示,父组件可以在这个坑位中填充任何模板代码然后子组件中就会被替换成这些内容。比如一个最简单插槽例子 <!-- 父组件 --> <template> <div> <Child>Hello Juejin</Child> </div> <
阅读全文
摘要:这样的场景:渲染列表数据的时候,列表的子项还是列表。如果层级少尚且可以用几个 for 循环搞定,但是层级多或者层级不确定就有点无从下手了。 其实这就是树形结构数据,像常见的组织架构图,文件夹目录,导航菜单等都属于这种结构。很多组件库都带有树形组件,但往往样式不是想要的,改起来也非常的费劲。那么,如何
阅读全文
摘要:面试题:created 生命周期中两次修改数据,会触发几次页面更新? 一、同步的 先举个简单的同步的例子: new Vue({ el: "#app", template: `<div> <div>{{count}}</div> </div>`, data() { return { count: 1,
阅读全文
摘要:总结 Vue 的初始化过程(new Vue(options))都做了什么? 处理组件配置项 初始化根组件时进行了选项合并操作,将全局配置合并到根组件的局部配置上 初始化每个子组件时做了一些性能优化,将组件配置对象上的一些深层次属性放到 vm.$options 选项中,以提高代码的执行效率 初始化组件
阅读全文
摘要:首先看源码 //即将要被劫持的数组 let arr = [1, 2, 3]; //先把要劫持的方法列出来 let methods = ["push", "pop", "shift", "unshift", "reverse", "sort", "splice"]; //既然要劫持原型,就要先把原型拿
阅读全文
摘要:总结 关于 vue 中 created 和 watch 的执行顺序相对比较简单,而其中 computed 是通过 Object.defineProperty 为当前 vm 进行定义,再到后续创建 vNode 阶段才去触发执行其 get 函数,最终执行到计算属性 computed 对应的逻辑。 官网的
阅读全文
摘要:7.1 Vuex 初始化 这一节主要来分析 Vuex 的初始化过程,它包括安装、Store 实例化过程 2 个方面。 安装 当在代码中通过 import Vuex from 'vuex' 的时候,实际上引用的是一个对象,它的定义在 src/index.js 中: export default { S
阅读全文
摘要:6.1 路由注册 Vue 从它的设计上就是一个渐进式 JavaScript 框架,它本身的核心是解决视图渲染的问题,其它的能力就通过插件的方式来解决。Vue-Router 就是官方维护的路由插件,在介绍它的注册实现之前,先来分析一下 Vue 通用的插件注册原理。 Vue.use Vue 提供了 Vu
阅读全文
摘要:5.1 event 平时开发工作中,处理组件间的通讯,原生的交互,都离不开事件。对于一个组件元素,不仅仅可以绑定原生的 DOM 事件,还可以绑定自定义事件,非常灵活和方便。那么接下来从源码角度来看看它的实现原理。 为了更加直观,通过一个例子来分析它的实现: let Child = { templat
阅读全文
摘要:4.1 响应式对象 Object.defineProperty Object.defineProperty 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象,先来看一下它的语法: Object.defineProperty(obj, prop, descriptor
阅读全文
摘要:3.1 createComponent 在分析 createElement 的实现的时候,它最终会调用 _createElement 方法,其中有一段逻辑是对参数 tag 的判断,如果是一个普通的 html 标签,上一章的例子那样是一个普通的 div,则会实例化一个普通 VNode 节点,否则通过
阅读全文
摘要:2.1 new Vue 发生了什么 从入口代码开始分析,先来分析 new Vue 背后发生了哪些事情。new 关键字在 Javascript 语言中代表实例化是一个对象,而 Vue 实际上是一个类,类在 Javascript 中是用 Function 来实现的,来看一下源码,在 src/core/i
阅读全文
摘要:1.1 认识 Flow Flow 是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查,所以了解 Flow 有助于阅读源码。 为什么用 Flow JavaScript 是动态类型语言,它的灵活性有目共睹,但是过于灵活的副作用是很
阅读全文