js
关注
分享
扫一扫
文章平均质量分 66
qianlingvip
这个作者很懒，什么都没留下…
展开
-
react路由拦截（路由守卫）
最近在做项目时候，遇到了返回时候如果用户没有保存表单，需要拦截路由跳转，并给出提示信息是否要退出。相信做过vue项目的小伙伴都对vue的路由守卫并不陌生，react中如何实现呢？原创 2022-10-21 19:00:32 · 13577 阅读 · 1 评论 -
小程序和h5通信
随着HTML5兴起，其独特的新特性，完全能够满足app开发需求，并且，相比于原生更容易入门，缩短开发周期，现在很少有纯原生的APP。原创 2022-07-25 11:14:36 · 6393 阅读 · 0 评论 -
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 · 2227 阅读 · 0 评论 -
初探Web Components
原生组件封装原创 2022-03-30 16:12:20 · 1381 阅读 · 0 评论 -
前端开发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 · 1083 阅读 · 0 评论 -
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 · 5038 阅读 · 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 · 652 阅读 · 0 评论 -
使用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 · 6541 阅读 · 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 · 847 阅读 · 0 评论 -
前端使用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 · 967 阅读 · 1 评论 -
node学习系列-3
十一、promise异步对于node大部分都是异步函数，在处理异步函数的时候，为了顺序执行，需要在回调里嵌套回调，就会导致回调地狱，为了解决这个问题，可以使用promise来处理，async/await处理。删除文件使用promise简单实现：function delLink(){ const fs=require('fs'); return new Promise((res, ...原创 2020-04-27 11:25:48 · 152 阅读 · 0 评论 -
nodejs学习笔记系列--模块
nodejs学习笔记一、node特点：非阻塞I/O事件驱动chrom V8引擎二、优点：由于非阻塞 I/O造就了高并发的特点，高并发特别好，适用于网络请求比较大的场合。三、前端js和服务端js区别前端jsdom操作基本语法操作bom操作ajax不能修改文件基本语法服务端js 能修改文件 能操作数据库 不能操作dom 基本语...原创 2020-03-12 14:33:33 · 240 阅读 · 0 评论 -
JavaScript滑块验证
效果图：简单粗暴，直接上代码，无需解释<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>拖动验证</title> <style> @font-face { font-family: 'icon...原创 2019-11-27 16:18:23 · 389 阅读 · 0 评论 -
打印局部div内容，带样式方法总结
接下来我要总结的打印局部div并且带样式方法有两种，分别都是在react项目中使用：第一种就是简单粗暴的方式：1、首先在项目中引入Print.js文件：/* * @Author: 张前领 * @Date: 2019-10-14 11:04:37 */ export default function Print (dom, options) { if (!(thi...原创 2019-10-14 14:24:09 · 1282 阅读 · 0 评论 -
js实现页面的局部打印
1、其原理就是通过给打印dom设置id值，通过新建iframe，将需要打印的dom结构塞进iframe中，这样不会跳转页面，也不会刷新页面，防止本页面内容还没有处理完逻辑，而发生不必要的跳转，导致逻辑被刷新。2、这要就会造成一个问题，引入外部样式出现问题，只能插入标签样式。代码如下：function prints(){ const el = document.getElem...原创 2019-10-12 22:32:57 · 461 阅读 · 0 评论 -
canvas画布--动态饼形图
代码清单：1、index.js文件：var c=document.getElementById("canvas6"); var ctx=c.getContext("2d"); //获取画布中心为圆心 var x=c.width/2; var y=c.height/2; //初始速度为2° var speed=2/360*2*Math.PI; var setArr=[...原创 2019-09-19 16:23:36 · 314 阅读 · 0 评论 -
canvas画布--随机动感小球
这两天学习canvas，把一些东西总结一下，比起枯燥的每一条的总结，直接上代码来的更直接。index.html文件<div class="box"> <div class="text"> <h2>欢迎来到canvs动画小球世界</h2> <canvas id="canvas3" width="1500" height=...原创 2019-09-19 13:54:54 · 569 阅读 · 0 评论 -
今天推荐一个好用的前端时间格式处理工具
今天揭开这个时间格式处理工具的神秘面纱，这个工具名字就是moment。使用步骤：1、首先在react或者vue项目中引入它，npm installmoment --save-dev2、在需要处理时间的组件中引入它：//require 方式var moment=require('moment');//import 方式import moment from 'momen...原创 2019-09-18 13:18:03 · 654 阅读 · 0 评论