weixin_43844392的博客

原创 angular测试API

是 Angular 测试中的一个函数，用于将一个根元素插入到测试的 DOM 中。通常，这个函数用于创建 Angular 组件的测试环境，以确保测试代码可以在测试 DOM 中正确渲染和操作组件。在 Angular 测试中，当你测试一个组件时，需要首先编译该组件的模板，以便能够进行视图相关的断言。是 Angular 测试中的一个函数，用于从测试的 DOM 中移除所有根元素。在一些测试场景中，特别是在使用 Angular 测试工具时，可能需要在多个测试套件之间重置测试环境，以确保每个测试套件之间的隔离性。

原创 angular 测试 api 说明

是 Angular 测试中的一个函数，它用于模拟异步操作和时间的流逝，以便更容易编写和执行 Angular 组件的单元测试。这可以用于一些特殊情况，例如，当你希望测试在没有异步操作的情况下运行，或者当你想完全控制测试中的时间流逝时。这对于测试依赖微任务的代码非常有用。这可以使你的测试代码更简洁，但在某些情况下可能需要小心，因为自动检测可能会导致不必要的性能开销或者在测试中的意外行为。需要注意的是，禁用 NgZone 可能会导致一些测试不再模拟真实的应用程序行为，因此应该谨慎使用，并仅用于特定的测试场景。

原创 typescript对与axios的封装

import { Modal, message } from 'antd'import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from 'axios'import AdminConfig from '@/common/config'import { getToken } from './cookie'interface ResponseData<T extends any> { data: T err

原创 vite 原理解析与实践

vite 原理解析与实践vite 是什么？Vite (法语意为 “快速的”，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可以输出用于生产环境的优化过的静态资源。Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有

转载 原型链

转载 深入浅出 sideEffects

前言最近在给团队对 webpack 中的 sideEffects 字段用途进行微分享，于是乎，我最后就整理成一篇文章，希望帮助更多的人理解 sideEffects 的作用。sideEffects 是什么呢？我用一句话来概括就是：让 webpack 去除 tree shaking 带来副作用的代码。听起来有点绕口，让我们划出重点：tree shaking/用法/副作用tree shakingtree shaking 是一种代码优化技术，它能够将无用的代码进行去除，下面举个简单的例子：

转载 21个React性能优化技巧

React 为高性能应用设计提供了许多优化方案，本文列举了其中的一些最佳实践。在以下场景中，父组件和子组件通常会重新渲染：在同一组件或父组件中调用 setState 时。从父级收到的“props”的值发生变化。调用组件中的 forceUpdate。下面是提升 React 应用性能的 21 个技巧。使用纯组件如果 React 组件为相同的状态和 props 渲染相同的输出，则可以将其视为纯组件。对于像 this 的类组件来说，React 提供了 PureComponent 基类。扩展 Re

转载 React 性能优化，你需要知道的几个点

写了一段时间的react之后，渐渐的喜欢上了使用react来写应用。我们知道，Facebook在推出react时打出的旗号之一就是高性能。今天我们还一起来聊一聊react的性能优化，思考还能通过哪些手段来提升React的性能，使我们的react更快，性能更好。一，react组件的性能优化（渲染角度优化）1，react性能查看工具再讲性能优化之前，我们需要先来了解一下如何查看react加载组件时所耗费的时间的工具，在react 16版本之前我们可以使用React Perf来查看。大

原创 重新学防抖debounce和节流throttle，及react hook模式中防抖节流的实现方式和注意事项

概念理解防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。说起防抖大家肯定会想到节流,着两个就跟一对双胞胎一样,让大家经常傻傻搞不清楚我们先来看一下节流的概念节流就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率我拿电梯关门举个例子吧:防抖你按了电梯关门按钮,电梯还有三秒要关闭,在你要关闭前的1.5s,按了一次开门按钮电梯将会重新将要关闭时间重置为3秒节流你按了电梯关门按钮,在电梯将要关闭的三秒内,你再怎

转载 你真的了解background-position

background属性是CSS中最常见的属性之一，它是一个简写属性，其包含background-color、background-image、background-repeat、background-attachment、background-position、background-clip、background-origin和background-size。你可能会说，这些属性再简单不过了，没有可讲的。这篇文章接下来要介绍的不是所有有关于background里面的属性，而是说说background...

转载 前端常见跨域解决方案

什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1.) 资源跳转： A链接、重定向、表单提交2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场

转载 vim常用命令

基本上 vi/vim 共分为三种模式，分别是命令模式（Command mode），输入模式（Insert mode）和底线命令模式（Last line mode）。 这三种模式的作用分别是：命令模式：用户刚刚启动 vi/vim，便进入了命令模式。此状态下敲击键盘动作会被Vim识别为命令，而非输入字符。比如我们此时按下i，并不会输入一个字符，i被当作了一个命令。以下是常用的几个命令：i 切换到输入模式，以输入字符。x 删除当前光标所在处的字符。: 切换到底线命令模式，以在最底一行输入命令。若.

转载 webpack 学习（一）前端常用的模块化设计模式之ES6 module

在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。// CommonJS模块let { stat, exists, readFile } = require('fs');/

转载 webpack 学习（一）前端常用的模块化设计模式之AMD

AMD（异步模块定义）是为浏览器环境设计的，因为 CommonJS 模块系统是同步加载的，当前浏览器环境还没有准备好同步加载模块的条件。AMD 定义了一套 JavaScript 模块依赖异步加载标准，来解决同步加载的问题。模块通过 define 函数定义在闭包中，格式如下：define(id?: String, dependencies?: String[], factory: Function|Object);id 是模块的名字，它是可选的参数。dependencies 指定了所要依赖的模块列

原创 webpack 学习（一）前端常用的模块化设计模式之commonJs

前端常用模块化规范commonJs 规范AMDES6 Module规范commonJs 和AMD 的区别commonJs加载模块是同步的，也就是说只有加载完成的才会执行后面的操作，由于Node主要用于服务器编程，模块文件一般都存在于本地硬盘，所以加载起来比较快，不用考虑非同步的加载方式所以一般采用commonJs加载规范。AMD规范时非同步加载模块允许指定函数回调。因为一般浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，所以一般浏览器采用AMD规范。commonJs 模块定义规

转载 真的！！！两行css代码实现瀑布流，html,css最简单的瀑布流实现方式且没有缺点！

两行css如下:<style scoped> .waterfall-container { /*分几列*/ column-count: 2; } .waterfall-item { /*不留白，不知道什么意思可以取消这个样式试试*/ break-inside: avoid; }</style>/*列间距，可有可无，默认30px*//*column-gap: 0;*/效果图说明：不存在一边列表过长问题，很均匀，没有缺

转载 React Hook的用法: State + Effect(一)

React Hook简述React Hook 是React 16.8 这个版本新增的一个特性。在此之前我们编写React组件一般大多数都是用 class组件，而非函数组件，因为函数组件不具有class组件的状态，生命周期这些概念，这就使得在使用函数组件的时候有很多掣肘。而class组件与函数组件相比明显略笨重，很多不必要冗余的模板代码，而且还有this的问题，要么使用箭头函数，要么每次需要bind一下this。但是如果使用了Hook那就可以很好的规避了这些问题。下面就简单介绍一下Hook的用法Sta

原创 React Hook的用法： Ref + useMemo + 自定义Hook(三)

React Hook的用法Ref Hook这个Hook的作用是可以通过他来获取到Dom元素节点，使用起来非常方便。关键代码如下:const xxxEle = useRef(initialValue);1useRef返回一个ref变量，并接受一个初始值 initialValue 这个传入的初始值会复制给useRef返回变量的 .current 属性上(这里就是 xxxEle.current)。如果没有需要传入的初始值的话，一般直接传入 null 即可，然后就可以将返回的Ref变量附加在具体的do

原创 encodeURIComponent解释

在代码中看到这encodeURIComponent,没见过。记一下。定义和用法encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。语法encodeURIComponent(URIstring)参数 描述URIstring 必需。一个字符串，含有 URI 组件或其他要编码的文本。返回值URIstring 的副本，其中的某些字符将被十六进制的转义序列进行替换。说明该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： -

原创 js类型之隐式转化

字符串与数字之间的隐式转换通过重载，+ 运算符即能用于数字加法，也能用于字符串拼接。‘+’号和‘-’号如果 + 的其中一个操作数是字符串（或者通过以上步骤可以得到字符串）， 则执行字符串拼接；否则执行数字加法。我们可以将数字和空字符串 “” 相 + 来将其转换为字符串：var a = 42; var b = a + ""; b; // "42"var a = "42"; var b = "0"; var c = 42; var d = 0; a + b; // "420"c +

原创 js类型转化之显示转化

抽象值操作掌握字符串、数字和布尔值之间类型转换基本规则ToStringToString，它负责处理非字符串到字符串的强制类型转换基本类型值的字符串化规则为：null 转换为 “null”，undefined 转换为 “undefined”，true 转换为 “true”。注意点:极小和极大的 数字使用指数形式：// 1.07 连续乘以七个 1000 var a = 1.07 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000 * 1000; // 七个1

转载 React Router DOM

大家可以在https://reacttraining.com/react-router/web/api/StaticRouter/basename-string看相关例子<BrowserRouter><BrowserRouter> 使用 HTML5 提供的 history API (pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。import { BrowserRouter } from 'reac..

转载 memo、useMemo及useCallback解析

memo、useMemo及useCallback解析前言在hooks诞生之前，如果组件包含内部state，我们都是基于class的形式来创建组件。在react中，性能优化的点在于：调用setState，就会触发组件的重新渲染，无论前后state是否相同 父组件更新，子组件也会自动更新基于上面的两点，我们通常的解决方案是：使用immutable进行比较，在不相等的时候调用setState， 在shouldComponentUpdate中判断前后的props和st...

转载 useMemo和useCallback的使用

useMemoconst memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。也就是说useMemo可以让函数在某个依赖项改变的时候才运行，这可以避免很多不必要的开销。举个例子：不使用useMemofunction Exam.

转载 useCallback和memo

React.memo作用React.memo的作用主要是用于缓存组件，使得组件可以按照业务的需求决定是否来更新的效果，比如业务场景中常见的一个场景，在页面的底部有一个版权说明，一般这是各个模块页面所公用的一个组件，但这个组件基本就是一个静态的文案描述，如果父组件数据变化更新的时候这个抽象出来的版权组件也无需更新，这样可以达到减少页面性能开销的目的。在线示例下面设计了一组三个不同效果的Demo做对比，父组件中有两个变量 age 和account传递给子组件，并且在父组件中可以更新这两个值。比较达到的.

原创 react hook之React.lazy()

也不怕大家笑话，看到react.lazy（）我第一个想到的居然是vue 中的一个vue-lazy 用户懒加载的插件。但是这两个差别还是有点大的。好了我们言归正传，开始来看看我们的react.lazy()其实看见lazy（）大家见名知意，就知道是来做懒加载的，但是这个是来做组件的懒加载。为什么需要react.lazy()我们所知道的是，webpack 打包时我们如果没有分模块打包的话，就会把所以的文件都打入一个包中，这样的话加载就会很慢，我们怎末解决这个问题呢，在vue 中我们主要用的方式时动态导入懒

原创 react hook 学习之React.memo（）

react memo 可以来解决 函数组在传入的props不变是会重新弄渲染的问题，相当与class组件中的PureComponent和shouldComponentUpdate，它可以帮助我们重新渲染页面const ToBeBetterComponent = React.memo(function MyComponent(props) { // only renders if props have changed})它是主要来渲染函数组件的，而不是来渲染类组件的import React f

转载 react 16.8 新特性总结(二)掌握useref和ref

在react 中主要时操作数据进行操作，但是会有许多情况下我们还是需要获取dom,所以我们会用到refrefref的作用Ref属性用来获取DOM 元素的节点和获取子组件的实例我们先来看在class 组件中的refrefs时使用React.create(）创建的，并通过ref属性附加到React 元素中，在构建组件时，通常将Refs 分配给属性实例，以便在整个组件中华引用它们当ref被传递给render中的元素时，改节点可以在ref的current属性中被访问React 会在组件挂载时给cur

原创 react 16.8 新特性总结(二)掌握useEffect.md

useEffect是什么useEffect 是一个专门react hook的一部分内容主要是为函数组件服务。一般情况下我们可以看作componentDidMount， componentDidUpdate，componentWillUnmount 三个生命周期的结合体。会在每次 render 的时候必定执行一次。如果返回了函数，那么在下一次 render 之前或组件 unmount 之前必定会运行一次返回函数的代码。如果指定了依赖数组，且不为空，则当数组里的每个元素发生变化时，都会重新运行一次。

原创 events.js:183 throw er; // Unhandled 'error' event 相关问题解决办法

在启动项目的时候可能会出现以下问题出现原因出现这个问题的主要原因是因为端口被占用了解决办法查询端口号是否被占用netstat -aon|findstr "8000"找到对应程序tasklist|findstr "9060"再任务管理器中删掉相关程序再执行代码成功！...

转载 Vue这些修饰符帮我节省20%的开发时间

作者：李大雷https://segmentfault.com/a/1190000016786254为了方便大家写代码，vue.js给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等~目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符（实在不知道叫啥名字） 表单修饰符填写表单，最常...

转载 我写CSS的常用套路(附demo的效果实现与源码）

作者：alphardexhttps://juejin.im/post/5e070cd9f265da33f8653f0前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。1、交错动画有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻...

原创 css动画（五）

推荐动画五效果图html代码<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport...

原创 css动画（四）

推荐动画四html代码上传<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>纯CSS3流星雨动画DEMO演示</title><link rel="stylesheet" href="css/style.css">...

原创 css 动画推荐（三）

推荐动画三上代码<!doctype html><html><head><meta charset="utf-8"><title>纯CSS3模拟谷歌Loading加载动画DEMO演示</title><style>html, body { margin: 0; background-colo...

原创 css 动画（二）

推荐动画二先上效果图：<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>纯CSS3 3D旋转立方体动画DEMO演示</title><style> body{ background:#eeeeee; }...

原创 css动画（一）

不说废话先上效果图：html代码<!DOCTYPE ><html ><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><link rel="stylesheet" href="css/normalize.css"><...

原创 关于公共组件搜索框在搜索页面不起作用的问题

上面的组件是一个公共组件，我们在搜索框输入内容，然后点击搜索框跳转到搜索的结果页，当我问在搜索的结果页再次调用搜索框的时候相当于从当前的搜索页在一次跳转到搜索页同页面跳转。参数改变但是页面没办法更新其实这个问题的本质是：同页面跳转，只改变参数，但是页面不刷新分析：其实导致这个问题最主要的原因是因为：vue的路由切换实际上是组件之间的切换引用相同的组件时页面不更新解决办法：监听路由 wat...

原创 vue 路由守卫

vue-router 提供的导航守卫主要用来通过或取消的方式来守卫导航。有多种机会植入路由导航的过程：主要分为全局导航，单个路由导航 组件导航所谓路由导航我们可以这么理解，导航守卫就相当于保安的意思，你要进入这个房子，保安需要知道你是（to, from, next）打哪去，从哪来。我们就拿登录来就例子：保安守卫一个房子 有一个客人来拜访（路由跳转）保安要问清楚从哪来（from）到哪去（to） ...

原创 你不知道的js 思维导图

在此说明：此图不是本人创作，有幸看到觉得写的好，就记下了，仅供学习使用，若侵权，请联系我删除。