使用 requestAnimationFrame 实现 js 动画--成交额动画 我们经常在购物平台网站上看到一些动画效果，这些动画不是 css 样式动画，而是内容发生改变后开始动画，如果，成交额动画，有一个值变化到另外一个值的时候，一位一位的去动，看起来很炫酷，其实，这就是 js 动画。
同一个项目两个页签之间通信之 BroadcastChannel MDN 中解释如下：允许同源的不同浏览器窗口，Tab 页，frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件，消息可以广播到所有监听了该频道的 BroadcastChannel 对象。
react路由拦截（路由守卫） 最近在做项目时候，遇到了返回时候如果用户没有保存表单，需要拦截路由跳转，并给出提示信息是否要退出。相信做过vue项目的小伙伴都对vue的路由守卫并不陌生，react中如何实现呢？
react18的SSR react18-ssr一、服务端渲染我们的页面DOM结构由服务端产生的，就是服务端渲染。const express = require("express");const app = express();app.get("/", (req, res) => { res.send("<html><body><h2>hello</h2></body></html>");});app.listen(8300, ()
react18新特性 前言：最近在忙于项目，又接了一个谷歌浏览器插件开发的任务，一直没有时间看新的技术更新，突然发现react已经更新到了18，随着react18正式版本发布，我们可以使用新版带来的新特性，快来一起看看都提供了哪些新的特性供我们使用吧。注意：学习用例使用vite + react18搭建项目一、初始化项目1、初始化一个项目npm init -y2、安装react和react-domnpm install react react-dom --save3、安装vite和可以react热更新的@vi.
前端开发cli知识汇总 命令行开发该学习笔记主要记录从零基础完成一个前端工具cli的开发，开发一个cli大致需要几步，输出版本号，加入一些命令行，拉代码，完成。下面逐一了解开发工具。一、命令行工具 commander使用1、输出版本号const program = require("commander");// 通过version定义版本号program.version('1.0.0');// parse方法用来解析命令行中传入的参数program.parse(process.argv);也可以借助chalk字
react项目启动时候，显示启动进度条 前言：当我们做一个新的react项目时候，安装插件越多，启动越慢。如果没有一个进度条来显示目前项目启动进度，没有目的地等待是很让人着急的。因此，使用webpack进度显示插件非常有必要，下面就介绍两种常用的插件。1、webpack-progress-ora-plugin相信做过cli的人都比较熟悉ora插件，可以友好的提示cli进度以及当前所处的节点信息。webpack-progress-ora-plugin插件则是专门用来显示webpack编译进度的。1.1、安装npm install webpa
forwardRef解决封装组件无法传递ref的问题 前言：有时候我们封装一个组件，组件中需要使用父级传进来ref属性，来做一些事情，然而，简单通过props.ref是无法获取传递过来的ref属性的，怎么办呢？组件中又使用hoc进行了包裹，这时候传递ref作为属性传值能传递过来吗？场景重现：import { useRef, useState } from "react";const MyInput = (props) => { console.log(props.ref, 'ref') // undefined return ( &
js的函数组合 一、组合简介1、需求场景我们需要将函数a的返回结果作为b的参数，然后将b的返回值作为c的参数： function a(number) { return number + 1; } function b(number) { return number + 2; } function c(number) { return number + 3; } console.log(c(b(a('a')))); //a1232、
使用react-three-fiber加载glb格式3D文件，并播放3D模型自带动画 一、react-three-fiber简介使用可重用、自包含的组件以声明方式构建您的场景，这些组件对状态做出反应、易于交互并且可以利用 React 的生态系统。 没有任何限制，一切工作在three.js这里将无一例外地工作。 生态完善。二、安装npm install three @react-three/fiber三、基础语法1、创建场景import { Canvas } from '@react-three/fiber'export default function App() {
前端使用jest做单元测试 一、单元测试1、安装jest库npm install jest -g2、使用首先加入目录结构如下：同文件夹下有一个index.js文件，还有一个__test__文件夹，__test__文件夹中有一个名为index.spec.js的测试文件，如下图所示：测试文件命名规则是前边要与测试文件名相同。index.js内容const hello = 'hello world';console.log(hello);module.exports=hello;index.spec.js文件
在react hooks中使用mobx 一、 定义store创建文件名为mobxStore的js文件import { observable, action, computed, decorate } from 'mobx';class MyStore { queryLoading = false; releaseLoading = false; tableList = []; setQeuryLoading(status) { this.queryLoading = status; } setRel
前端实现水平垂直居中几种方法总结 以下所有实例都是基于这种DOM结构完成的 <div class="box"> <div class="son">12</div> </div>1、使用position: absolute实现 .box{ height: 100vh; width: 100vw; position: relative; } .box .son{ width: 20%; height:
构造函数返回值问题 1、请问p.name是：var fun = function(){ this.name = 'ling'; return { name: 'ge' };}var p = new fun();考察的是构造函数的返回值的问题， 每个函数都有返回值，如果使用了return语句，则返回return后跟的值，如果没有使用return，则默认返回undefined.特别的，如果这个函数是构造函数，则默认返回this对象，如果构造函数内使用了return语句，并且retur
mobx学习笔记 一、相关知识补充1、什么是decoratordecorator是在声明阶段实现类和类成员注解的一种语法。2、decorator修饰类decorator有一个参数target，代表被修饰的类。例如：在调用add方法前后打印东西，可以写一个类修饰器。function log(target){ const desc=Object.getOwnPropertyDescriptors(target.prototype);// 获取自身的所有属性描述，背后的赋值方法或者取值方法一同拷贝过来。转成对
从输入url到看到页面经历了什么？ 一、url解析1、地址解析https://www.baidu.com:80/game/index.html？name=“ling”#video协议： https，http，ftp。https协议，ssL加密。FTP传输一些大文件域名端口号：0-65535之间。http默认端口号默认是80，https默认端口号是443，ftp默认端口号是21请求资源路径：index.html查询参数：问号后东西哈希值： #后东西，可以利用哈希跨域2、编码对于有些域名参数中还有url，这样就会在解析时候出现
前端跨域总结 跨域（1）跨域存在的意义：前后端分离服务器分离，数据服务，图片服务，web服务。云信息共享，第三方接口。跨域是浏览器对ajax安全的限制。（2）、解决跨域方法修改本地host，本地默认是127.0.0.1：8080。如果，修改为和求情后端地址相同则，将会欺骗浏览器，越过拦截。dns预解析会先找本地，然后，才找线上dns服务器，因此，可以本地配置host，就是本地的dns。http://www.baidu.com/api:8081 127.0.0.1:3000随着项目越来越大，
ajax基于promise简单封装 function myAajx(option={}) {const defaults = {url: “”,method: “get”,data: null,};option=Object.assign(defaults, option);option.data=queryString.stringify(option.data); // x-www-fromlet isGet=/^(GET|DELETE|OPTIONS|HEAD)/i.test(option.method);if(isG
关注
