- 博客(107)
- 收藏
- 关注
原创 使用 requestAnimationFrame 实现 js 动画--成交额动画
我们经常在购物平台网站上看到一些动画效果,这些动画不是 css 样式动画,而是内容发生改变后开始动画,如果,成交额动画,有一个值变化到另外一个值的时候,一位一位的去动,看起来很炫酷,其实,这就是 js 动画。
2024-08-25 12:32:48
181
原创 同一个项目两个页签之间通信之 BroadcastChannel
MDN 中解释如下:允许同源的不同浏览器窗口,Tab 页,frame 或者 iframe 下的不同文档之间相互通信。通过触发一个 message 事件,消息可以广播到所有监听了该频道的 BroadcastChannel 对象。
2024-08-07 21:51:08
270
原创 react路由拦截(路由守卫)
最近在做项目时候,遇到了返回时候如果用户没有保存表单,需要拦截路由跳转,并给出提示信息是否要退出。相信做过vue项目的小伙伴都对vue的路由守卫并不陌生,react中如何实现呢?
2022-10-21 19:00:32
13186
1
原创 小程序和h5通信
随着HTML5兴起,其独特的新特性,完全能够满足app开发需求,并且,相比于原生更容易入门,缩短开发周期,现在很少有纯原生的APP。
2022-07-25 11:14:36
6108
原创 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, ()
2022-04-22 19:29:20
2150
原创 react18新特性
前言:最近在忙于项目,又接了一个谷歌浏览器插件开发的任务,一直没有时间看新的技术更新,突然发现react已经更新到了18,随着react18正式版本发布,我们可以使用新版带来的新特性,快来一起看看都提供了哪些新的特性供我们使用吧。注意:学习用例使用vite + react18搭建项目一、初始化项目1、初始化一个项目npm init -y2、安装react和react-domnpm install react react-dom --save3、安装vite和可以react热更新的@vi.
2022-04-21 23:33:34
4578
原创 前端开发cli知识汇总
命令行开发该学习笔记主要记录从零基础完成一个前端工具cli的开发,开发一个cli大致需要几步,输出版本号,加入一些命令行,拉代码,完成。下面逐一了解开发工具。一、命令行工具 commander使用1、输出版本号const program = require("commander");// 通过version定义版本号program.version('1.0.0');// parse方法用来解析命令行中传入的参数program.parse(process.argv);也可以借助chalk字
2021-09-06 14:34:25
1018
原创 react项目启动时候,显示启动进度条
前言:当我们做一个新的react项目时候,安装插件越多,启动越慢。如果没有一个进度条来显示目前项目启动进度,没有目的地等待是很让人着急的。因此,使用webpack进度显示插件非常有必要,下面就介绍两种常用的插件。1、webpack-progress-ora-plugin相信做过cli的人都比较熟悉ora插件,可以友好的提示cli进度以及当前所处的节点信息。webpack-progress-ora-plugin插件则是专门用来显示webpack编译进度的。1.1、安装npm install webpa
2021-09-04 09:46:42
980
1
原创 forwardRef解决封装组件无法传递ref的问题
前言:有时候我们封装一个组件,组件中需要使用父级传进来ref属性,来做一些事情,然而,简单通过props.ref是无法获取传递过来的ref属性的,怎么办呢?组件中又使用hoc进行了包裹,这时候传递ref作为属性传值能传递过来吗?场景重现:import { useRef, useState } from "react";const MyInput = (props) => { console.log(props.ref, 'ref') // undefined return ( &
2021-08-17 11:24:16
4808
1
原创 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、
2021-07-31 22:04:09
601
原创 使用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() {
2021-06-21 18:04:10
6066
4
原创 前端使用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文件
2021-05-27 17:18:52
787
原创 在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
2021-04-23 16:39:09
2446
原创 前端实现水平垂直居中几种方法总结
以下所有实例都是基于这种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:
2021-04-15 15:28:01
822
原创 构造函数返回值问题
1、请问p.name是:var fun = function(){ this.name = 'ling'; return { name: 'ge' };}var p = new fun();考察的是构造函数的返回值的问题, 每个函数都有返回值,如果使用了return语句,则返回return后跟的值,如果没有使用return,则默认返回undefined.特别的,如果这个函数是构造函数,则默认返回this对象,如果构造函数内使用了return语句,并且retur
2021-04-08 14:11:54
1730
原创 mobx学习笔记
一、相关知识补充1、什么是decoratordecorator是在声明阶段实现类和类成员注解的一种语法。2、decorator修饰类decorator有一个参数target,代表被修饰的类。例如:在调用add方法前后打印东西,可以写一个类修饰器。function log(target){ const desc=Object.getOwnPropertyDescriptors(target.prototype);// 获取自身的所有属性描述,背后的赋值方法或者取值方法一同拷贝过来。转成对
2021-04-03 17:03:45
347
原创 从输入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,这样就会在解析时候出现
2021-04-02 10:34:37
168
原创 前端跨域总结
跨域(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随着项目越来越大,
2021-03-26 23:19:19
257
原创 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
2021-03-26 22:14:21
140
原创 前端遍历对比
1、for与forEachfor循环是自己控制循环过程。使用var声明变量时候,for和while循环性能差不多,不确定循环此时时候,建议使用while来处理。使用let声明变量时候,for循环性能要比while循环性能好。原理是没有创建全局不释放的变量。forEach是es6新增的用来遍历数组方法,它的性能要比for差很多。命令式编程和函数式编程:命令式编程是可以控制整个过程,break和continue都可以使用,受自己控制。函数式编程注重结果,执行过程被内部封装,只需要调用即可,使用起来
2021-03-20 13:07:26
467
原创 前端this指向问题总结
1、this的五种情况分析(this是执行主题,就是谁把他执行的,和在哪创建在哪执行都没关系)函数执行:看方法执前边是否有点,如果没有点指向window(严格模式下指向undefined)。有点,点前边是谁,this就指向谁。const fn=function func(){ console.log(this);}const obj={ name: 'ling', fn:fn,}fn();// this是windowobj.fn();// this是obj给某
2021-03-20 13:05:37
370
原创 前端使用input上传文件本地预览
当我们需要使用input的file做图片上传时候,想要看一下上传的图片,该如何实现呢?具体实现有两种方法1、使用readAsDataURLfunction handleChange() { const myFile = document.querySelector("input[type=file]").files[0]; const img = new Image(); const reader = new FileReader(); // 读取文件资源 if (my
2021-03-12 16:14:23
842
1
原创 react实现复制input输入框内容到粘贴板
整体流程分为如下几步:1、创建新的input输入框2、设置新创建输入框value为需要复制的文本3、将新创建input输入框添加到body里。4、选择中该input区域文本内容5、使用document.execCommand(‘copy’)将文本内容复制到粘贴板6、成功之后移除新创建的input输入框,复制完成。import "./App.css";import {useRef} from 'react';function App() { const myInput=useRef(nu
2021-02-26 15:48:38
1167
原创 前端打印踩坑小记
** 提起来前端打印,不得不说api太少了。可供参考的东西也是很少,我在项目上做前端打印有一年多时间,将打印遇到问题总结如下**打印插件选择react项目建议使用react-to-print插件,也可以使用从插件中提炼出来的如下方法;import { findDOMNode } from 'react-dom';// import { delay } from 'core-js';const printElement = (options) => { const { con
2021-02-03 15:43:07
1338
原创 linux系统使用ssh拉取gitLab代码
1、进入.ssh文件夹cd ~/.ssh2、查看该文件夹下是否存在存在id_rsa.pub文件ls 3、如果没有,则执行命令创建ssh-keygen4、创建完成后复制id_rsa.pub内容,复制到gitLab里settings----->ssh Keys里新加进入,然后,再用ssh拉代码就不用输入密码了。...
2020-12-22 19:18:31
2103
原创 如何在vue3中使用aframe
随着互联网的发展,现在浏览器已经能够很好的加载3D文件了,提起3D我们首先想到是webGL,使用threejs来绘制3D图形。然而原生的threejs使用起来比较的繁琐,相机,场景,纹理,光线,集合体好多概念,用来的不是太友好。aframe可以使用标签来写3D场景,像使用html标签一样。aframe对threejs做了封装,这样,我们使用aframe就可以简单快捷的来实现我们想要的3D效果,那么,如何在vue3中使用aframe呢?首先,你要使用vite-app来创建一个vue3项目,根据提示下载依.
2020-11-23 17:44:00
3170
1
原创 不是通过路由切换过来的组件中,如何在props中获取history
withRouter作用首先,我们需要知道withRouter作用,把不是通过路由切换过来的组件中,将react-router 的 history、location、match 三个对象传入props对象上。在下边例子中如果不通过withRouter函数props中没有history对象。withRouter使用方式:首先要引入import { withRouter } from 'react-router-dom';将不是通过路由切换过来的组件,但是又需要获取history对象组件通过w
2020-10-08 15:21:19
1041
原创 vue3项目中如何使用less来写样式
首先安装vue3项目可以使用create-vite-app来初始化vue3项目npm install -g create-vite-app安装完成后使用如下命令初始化项目名为vite-demo项目create-vite-app vite-demo之后进入到项目中cd vite-demo执行yarn进行初始化,执行yarn dev启动项目yarnyarn dev此时项目已经启动,但是我们想用less预编译工具进行写样式,测试可以先停掉项目,执行如下命令进行安装less和less-lo
2020-09-17 11:13:49
19061
1
原创 react的portals传送门实现模态框
引言: 有时候我们需要使用某个组件不是按照正常的层级来显示,比如,我们在一个左侧为菜单,右侧为功能的系统里使用弹出框(类似于antdPro),如果弹出框按照层级展示在功能里,他的位置就会显得有些奇怪,我们想要的是弹出框在整个屏幕中间弹出来,而不是在功能里中心位置展示。想要实现这个需求,必须打破常规。将弹出框在body中展示,这样弹出框和#root是同级的,就不再受左侧菜单的制约。代码实现传送门组件import React, { Component } from "react";import { c
2020-09-07 17:23:44
383
原创 typeScript简单入门
ts不能赋值为原来已有的数据类型为其它数据类型。1、ts类型转换首先使用在项目中使用ts是需要配置的,具体怎么配置这里不做讲解。2、live serve插件,能实时刷新本地文件修改,并自动刷新浏览器。3、TS中基本数据类型:number数值类型,let num=5;等同于let num:number=5;boolean 布尔类型,let isLogin=false;等同于let isLogin:boolean=false。string字符串,let name=“hello”;等
2020-07-09 16:11:54
257
原创 react实现路由懒加载(异步组件)
正如标题,我最近在做一个项目在打包完成后发现chunk.js问价比较大,导致打开首页需要时间比较久,因此,需要进行优化。其实仔细考虑一下不难发现,由于打包后将所有资源都打包到了一个chunk.js下,导致所有资源都一起加载了,所以,进入页面会很慢。咱们的预期目标是进入首页只加载首页的资源,进入详情页至加载详情页的资源。那么,react-loadeable是你不错的选择。1、首先,要想使用它需要先安装它。yarn add react-loadable根据npm官网找到react-loadeable完
2020-07-07 13:52:53
4096
原创 node学习系列之终结篇-7-session+cookie安全验证,jwt安全验证
http请求特点是无状态的,也即是请求接口者未知,为了防止随意访问,加一个身份验证。在登录成功以后,发布一个加密字符串(用户信息相关),给前端,以后每次给后端请求接口,都要将加密字符串传递给后端来验证。处理该问题总体有两种方式:1、session+cookie 跨域不可用cookie,导致ip不一致时候容易出现问题,用起来麻烦需要用到的node插件有两个:cookie-parse和express-session使用该插件,登录成功后会自动生成cookie给前端使用步骤:在服务中引入插件
2020-06-13 11:11:17
291
原创 node学习总结-6-使用socket长连接(webSocket和socket.io)
1、webSocket长连接应用场景:站内信,会员到期提醒等。webSocket只能传输字符串,使用node向前端发送数据的时候,使用JSON.stringify()转换一下数据格式。在node服务端使用ws模块来搭建webSocket服务,webSocket服务可以和express服务共存,可以写在同一个server服务文件里,前提是占用不同的接口。2、实现socket的方法:netwebsocket 在html5新增的,使用简单,低版本浏览器不兼容。socket.io 兼容性最好,比较麻
2020-06-12 16:02:53
644
原创 taro学习总结
1、taro是使用react编写一套代码,多端使用(微信小程序,百度小程序,h5开发,react native)2、安装npm install -g @tarojs/cli3、使用taro创建项目名为demo-texttaro init demo-text 4、创建完成后,进入demo-text目录,使用编译成h5代码,执行如下命令yarn dev:h5想要生成微信小程序代码yarn dev:weapp编译完成后,在微信开发者工具中使用导入项目就可以了。5、注意,不要在编译过的
2020-06-08 23:13:27
759
原创 node服务部署--总流程
一、服务器内存不能小于2G二、更换系统盘,公共镜像选择centerOs,使用最新版本。三、安全设置,使用自定义配置,设置密码。四、重新启动后,需要在云服务中安装node五、使用cdm连接远程服务器。1、使用命令: ssh 用户名@ip地址 回车如果报如下错误需要使用vim 加对应路径去编辑该文件。将该文件下所有内容删除,两次d,然后保存。如果不报错,输入相应的服务器密码进行登录。到此,本地连接远程服务器就完成了本地连接服务器。六、配置密钥,实现不用输入用户名和
2020-05-21 19:12:42
1969
原创 服务器安装最新版本的node
1、连接服务器,运行yum update -y命令 升级一下yum版本,为安装node做准备。2、使用yum install -y nodejs命令安装nodejs3、使用yum安装的node版本过低,不建议使用此方法安装。4、在服务器下载node最新版本,方法:在本地新建installNodejs.sh文件输入如下内容#!/bin/shread -p "Enter GCC download URL (https://ftp.gnu.org/gnu/gcc/): " gccURL
2020-05-13 15:44:13
953
1
原创 本地配置密钥ssh,不使用密码登录服务器
一、使用cdm连接远程服务器。1、使用命令: ssh 用户名@ip地址 回车如果报如下错误[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F1jrtIRl-1589350083527)(C:\Users\张前领\AppData\Roaming\Typora\typora-user-images\image-20200513111300703.png)]需要使用vim 加对应路径去编辑该文件。将该文件下所有内容删除,两次d,然后保存。如果不报错,
2020-05-13 14:09:06
925
原创 使用echarts遇到一些问题总结(饼图,折线图)
1、折线图配置getLineOption() { const { dayDataList, averageCompletedQty } = this.props.dataList; const dateArr = dayDataList.map(item => moment() .add(item.dayNum - 7, 'days') .format('MM.DD') ); const qtyArr = dayData
2020-05-11 12:27:18
2781
原创 node学习-5 图片上传
图片上传原理:将.jpg, .MP3,.mp4,.png,.ppt,.js,.html,.excel,.gif等文件转换成数据流形式进行传递到服务器,服务器将传递过来的信息以文件形式保存起来。上传图片必须使用post的方法进行提交。使用multer第三方插件可以方便的实现文件上传。yarn add multer // 安装// 简单版的实现const express=require...
2020-04-27 16:16:54
122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人