- 博客(32)
- 收藏
- 关注
RSS订阅原创 v-dom-portal 切换路由后，元素不消失
简单来说就是将子组件渲染到父组件以外的位置，尤其当父组件设置了、等属性时，使用的方式能够让子组件在视觉上“跳出”父组件容器部分源码：当使用指令的组件插入父节点后，执行方法：例如直接在组件上添加那么该组件就会被添加到文档中当切换路由时，该组件依然存在，没有从页面中消失解决方式：手动删除绑定的元素在Vue，可以使用 ref 引用组件，调用 ****方法删掉...
2022-07-05 15:30:12
387
原创 React--useEffect
使用 useEffect它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Effect Hook 可以让你在函数组件中执行副作用操作import React, { useState, useEffect } from "react";function Counter () { const [count, setCount] = useState(0) useEffect(() => { console.log('Counter Ef
2022-05-27 19:02:56
3335
原创 React--render props
什么是 render props官网链接：https://react.docschina.org/docs/render-props.html术语 “render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术render属性接收的一个函数，该函数返回一个React元素。也就是说，具有render props的组件使用外部传递进来的函数去子组件结构，而不是用自身的渲染逻辑使用示例1：import React from "react";fu
2022-05-18 15:48:26
370
原创 React--refs回调
refs创建 & 挂载官方文档：https://react.docschina.org/docs/refs-and-the-dom.html在React单向数据流中，props是父组件与子组件交互的唯一方式，要修改一个子组件，一般只能通过更新props重新渲染。在某些情况下，需要在典型数据流之外强制修改子组件，被修改的子组件可能是一个React组件实例，也可能是一个DOM元素ref属性附加到React元素上，以便访问。可以附加到以下几种节点：使用React.createRef()方法创
2022-05-17 20:24:10
603
原创 React--shouldComponentUpdate
shouldComponentUpdate 作用官方文档：https://react.docschina.org/docs/optimizing-performance.html使用方式：class Hello extends React.Component { shouldComponentUpdate(nextProps, nextState) { if (nextProps.greeting !== this.props.greeting) return true if
2022-05-16 11:45:52
256
原创 React--JSX
JSX是什么实际上， JSX 仅仅只是 React.createElement(component, props, …children) 函数的语法糖JSX能够提供给我们在JavaScript代码中编写HTML标签的能力这样做的好处：将HTML代码片段可以当做变量任意地进行赋值、传递和计算等操作，在使用上更加地灵活；使得结构（视图层HTML）与行为（逻辑层JS）相统一，都在同一个文件、函数中处理，编写、维护和复用更加地方便和高效以上仅个人见解如下的代码：function h
2022-05-13 15:51:22
149
原创 React--高阶组件（HOC）
高阶函数一个函数执行的返回结果还是一个函数时，它就是一个高阶函数，如下function debounce (fn, delay = 500, context) { let timer = null return function (...args) { if (timer) { clearTimeout(timer) } timer = setTimeout(() => { fn.apply(context, args) time
2022-05-12 19:24:21
1621
原创 React--Refs转发
基本使用在Vue和React中，ref都是框架（React是JavaScript库）提供给我们的一种直接操作DOM行为的方式，在Vue中的template模板中，不管是组件（会将外部传递的ref属性再传递给组件内部模板定义的根元素上）还是普通标签元素（如div、button），使用ref都能够引用到DOM元素但是在React中，普通的标签能够赋予ref直接引用，而对组件需要使用refs 转发普通标签元素用法如下：// Home.jsexport default class Home extends
2022-05-11 17:24:49
660
原创 Vue指令图片懒加载插件学习笔记
文章链接：https://mp.weixin.qq.com/s/OO7jVd2kIlkRtNNaRjGLuQ插件方便复用，封装成一个插件：// lazy.jsexport const lazyPlugin = { install (app, options = {}) { const lazy = new Lazy(options) app.directive('lazy', { inserted: lazy.add.bind(laz
2022-03-23 22:53:24
473
原创 Axios -- cancelToken取消请求
官网使用方式如下：const CancelToken = axios.CancelToken;const source = CancelToken.source();axios.get('/user/12345', { cancelToken: source.token}).catch(function (thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message);
2022-03-11 21:43:19
1584
原创 小程序面试问题
文章目录小程序面试问题汇总及解答双向绑定git开发流程**上线管理****前后端问题解决方式****路由跳转方式****安全策略****包限，分包处理****setData 同步还是异步****双向绑定原理****宏任务 微任务****小程序常用的API****```openId unionId```****css3动画****整个敏捷开发是怎样的****前端用到的加密技术****叙述小程序登录**小程序面试问题汇总及解答双向绑定与React中的数据更新机制类似，在小程序中，直接使用赋值语句，如thi
2021-07-12 08:52:55
290
原创 STC15单片机DS18B20数字温度模块
使用的是如图所示的测温模块一开始还以为这个模块会把一个模拟量输出到 dat 引脚，然后我还用了ADC ，结果无用功，还以为是它的模块坏了。。。提醒：接入电源后，模块上的灯没有亮，并不是模块坏了时序时序很重要！时序很重要！时序很重要！微秒级的精确延时初始化、写时序、读时序C代码注意延时函数就行了ds18b20.c#include "stc15.h"#include "delay.h"#include "util.h"#include "ds18b20.h"//管脚定义
2021-03-31 00:10:12
1134
1
原创 pygame.error: Unable to open file ‘audio/gege.wav‘ 报错
pygame.mixer.Sound() 加载音频 pygame.error: Unable to open file 'audio/gege.wav'报错报错的根本原因是音频的 … , 不清楚各种格式的音频数据流有什么区别, 但我猜肯定是音频的本质问题之前看过几篇解决这个问题的博客从网上下载 mp3格式的音频, 然后将格式改成 wav或者 ogg更换播放设备, 比如: …, 插入耳机 ????结果都没有解决除非下载的音频直接就是 wav格式的否则就要 ----使用 Audaci
2020-10-09 19:14:56
1693
1
原创 Python 完美碰撞检测
两个常见的碰撞问题及解决圆形物体碰撞时, 默认情况下使用的是"矩形区域"去计算碰撞, 导致有时候矩形区域的"角"碰撞了, 也被判断为碰撞解决:圆形物体实例需要有一个 radius 属性, 即, 半径碰撞检测的方法设置碰撞检测函数 collided=pygame.sprite.collide_circle# collide 就是第四个参数pygame.sprite.spritecollide(ball, ball_group, True, pygame.sprite.collide
2020-10-09 18:51:08
2814
1
原创 Python base64编码解码
base64 加密错误错误信息:TypeError: a bytes-like object is required, not 'str'base64.b64encode()方法的参数必须是一个 bytes-like object类型str <–> bytesstr --> bytess = 'abcd's = bytes(s, encoding='utf-8')# 或者是s = str.encode(s, 'utf-8')# 或者是s = s.encode(
2020-09-15 22:56:06
375
原创 JS继承
构造函数绑定使用 apply/call方法, 使用父级构造函数创建自己的属性或方法function Father(name, age) { this.name = name this.age = age}function Son(name, age) { Father.apply(this, arguments)}const son = new Son('Jack', 20) // {name: "Jack", age: 20}实例继承将子对象的 prototype属性指向
2020-08-25 17:25:51
127
原创 二叉树的深搜广搜的递归迭代
定义节点: a / \ c b / \ / \f g d efunction Node(value) { this.value = value; this.left = null; this.right = null;}const a = new Node('a')const b = new Node('b')const c = new Node('c')const d = new Node('d')const e
2020-08-18 00:05:02
399
1
原创 next 生成的静态页面放在 GitHub Pages 上访问不到资源
稍微记一记，刚学了点 nextjs 就急着写个人博客，结果······被这个坑折磨了一下午，我自己肯定是不会忘记了，如果能被关键字检索到这里，帮到别人，也挺好 ????next 生成静态页面使用下面命令导出静态页面 npm run build && next export如果没有特别配置，导出的文件目录是 out，这个 out 还不要紧，主要是 _next 目录，GitHub Pages 默认会忽略以下划线开头的文件夹，不会读取里面的资源.nojekyll（大一点，醒目????
2020-08-07 22:25:11
1204
1
原创 深入认识 React 的 setState
组件为了能够维护自身的状态,设置了state为了能够让React跟踪到状态的变化,规定只能通过setState更新状态可能异步setState 的调用方式相当于 Object.assign(之前的state,新的state)然而,其实 setState 改变数据这个行为,有时候可能是异步的,也就是说,如果要立即获取改变后的状态,可能做不到如下的代码的大致过程:state 中声明了一个 nhtml 中的 button 注册了一个点击事件点击后,让 n + 1立即打印 n无论点击多少.
2020-07-09 10:13:27
208
原创 multer结合FormData多文件上传
tips记录一下使用multer 和 FormData 多文件上传的几个注意点和具体过程页面input 元素添加 multiple 属性创建formdata实例,将文件迭代添加到imgs字段;必须添加到同一个字段将formdata作为fetch的 body 发送;注意,不要添加任何响应头(我之前就是自作聪明添加了"Content-Type":“multipart/form-data”,一直没有成功),它会自动设置的<!DOCTYPE html><html lang="en
2020-07-08 19:07:24
563
原创 multer 文件上传
文件上传使用的是 express 搭建的 nodejs 服务器form 表单注意设置 enctype: multipart/form-data 属性,否则服务器将无法正确解析表单数据<form action="/api/upload" method="POST" enctype="multipart/form-data"> <p> <input type="file" name="img123" accept="image/*"> &l
2020-06-11 12:30:41
168
原创 问题报错:
项目引入:Vue项目引入bootstrap报错报错原因:使用的是直接在 index.html 中引入bootstrap相关JS文件,因为这样不用修改webpack的配置或者加载其他插件这些JS 文件不能放在 assets 文件夹下,访问会报错 Uncaught SyntaxError: Unexpected token '<'assets文件夹下不要放置JS文件,可能是webpack模块打包的原因,具体webpack的知识我也不知道,之后会学习的解决办法:可以将要引入的JS文件放在其
2020-05-25 12:09:16
267
原创 webgl立方体纹理旋转
开始初学webgl,刚学了纹理,然后就想像使用css制作立方体照片效果开始做了六个面都是一样的,没有达到目的,然后就想做六个面不同的谁知道,这一做,做完后头都晕了,但究其原因,就是那些基本的矩阵作用没搞懂,比如这个模型矩阵,就仅仅是操作传入的坐标,而且就算是绘制六个面,使用六组不同的坐标,也只需要传入一个矩阵就可以了,我之前还每次绘制都传了,反而导致了一些问题再就是纹理,按照书上的做法,...
2020-04-16 11:20:47
391
原创 JavaScript中的bind
bind是ES5中新定义的方法，作用是改变调用它的函数内部的this指向。可以传递两个参数，第一个参数函数内this的指向，第二个及之后参数则作为函数的参数调用。调用该方法会返回一个函数实例，就是改变this指向后的新函数。function test1(...params){ console.log(this.abc) console.log(params) ...
2020-03-17 22:50:48
94
原创 js实现KMP算法，浅显易懂
开始开始看了很多遍视频，一直一脸懵逼，然后看了几篇博客文章，一i边比较，一边自己码，总算理解了。首先，KMP算法是用来干什么的？用来匹配字符串，如果匹配，返回索引值。其次，为什么要用KMP算法？因为能简化时间复杂度（废话，算法都是用来提升效率的）。然后，KMP算法是以什么方式简化时间复杂度的？一般我们匹配字符串可以用正则表达式，或者拿这个字符串与目标字符串一个个比较，那么就有一个问题...
2020-03-13 17:59:03
466
原创 js链表，约瑟夫斯环
function Node(value) { this.value = value; this.next = null;}class List { constructor() { this.head = new Node(1); // 直接令头指针值为 1 this.head.next=this.head; } ...
2020-03-10 22:30:37
92
原创 栈实现中缀转后缀，并用逆波兰方式计算
stack.jsclass Stack { constructor(){ // dataStore 保存所有数据 this.dataStore=[]; // top 指示可以添加数据的“位置” this.top=0; } // 当然定义栈自己的push 方法，并让顶指针加一 push(elem){ ...
2020-03-10 12:34:56
132
原创 用栈实现括号匹配，并返回括号不匹配或缺失位置
基本思路：使用用两个栈，一个存储所有字符，一个只存储括号s1入栈所有字符而遇到前括号，入栈s2；遇到后括号，查看s2最顶部的括号是否匹配若匹配则让s2出栈该后括号匹配的前括号，即最顶部的括号若不匹配，则返回括号不匹配或缺失的位置stack.js:// stack.jsclass Stack { constructor(){ // dataStore 保存...
2020-03-10 12:10:02
1048
原创 text-overflow
text-overflow盒子为inline-block或者block属性，且设置了固定的宽度。一行文本溢出显示省略号：代码：.box { width: 200px; height: 100px; line-height: 30px; border: 1px solid black; /* 主要是以下几行 */ ...
2020-02-09 16:46:09
199
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人