JQ...-CSDN博客

原创 node接入支付宝支付API

【代码】node接入支付宝支付API。

2023-06-07 17:06:25 315

原创 vue3源码由浅入深

vue源码由浅入深响应式系统渲染器组件化内置高阶组件等一些实现的原理

2023-02-25 00:07:22 99

原创 https://zhuanlan.zhihu.com/p/113222681?utm_medium=social&utm_oi=1185581117233733632&utm_id=0

https://juejin.cn/post/7085235740111536158

2022-12-16 21:25:18 896

简单封装使用1 创建wokerconst workercode = () => { this.onmessage = function (e) { let that = this; let params = JSON.parse(e.data); if (params.type === "xhr") { let xhr = new XMLHttpRequest(); xhr.open(params.method, params.url);

2022-05-21 12:25:21 416

原创 popper.js源码初识研究总结

第一阶段实现popper能够定位到盒子的上下左右1 首先获取当前tooltip元素所在的位置的父级哪个是定位属性 relative/absolute2 计算出当前tooltip父级定位元素的 getBoundingClientRect 和 refrence的getBoundingClientRect getBoundingClientRect能计算当前盒子的宽高 top是盒子上边缘距离浏览器顶部的距离 bottom是盒子下边缘距离浏览器顶部的距离左右同理这里 tooltip父级定位元素的上

2022-01-25 22:31:06 2002

原创 js实现弹幕(分辨率问题已解决部分)

目前代码还是有一些bug，主要是调整浏览器大小的时候会出现文字运动停顿等问题，后续有时间在解决，不同文字长度速度不同而产生的文字堆叠问题已经解决，原理就是追击原理，代码如下，看效果可以直接拷贝到vscode打开浏览器运行即可<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" conten

2022-01-21 22:01:43 534

原创 go学习第二天

类型转换其他类型转字符串类型通过fmt.Sprintf("%v",要转换的变量) var num1 int = 90 var num2 float64 = 23.456 var mychar byte= 'a' var isB bool =true var str string var str2 string str = fmt.Sprintf("%v", num1) fmt.Printf("类型是%T值为%v\n", str, str) str2 = fmt.Sprintf("%v"

2021-09-18 22:26:42 111

原创 go语言学习第一天

声明变量声明单个变量var i int=10 i := "rom"声明多个变量var n1,n2,n3 intvar ( n1="n1" n2="n2")n1,n2,n3 := 100,"jerry",'c'不同类型之间不能互相更改var i int = 10i=15 // 可以更改i=1.2 // 不可以更改因为1.2不是int类型查看变量的数据类型var n1 = 100fmt.Printf("n1的类型%T",n1)数据类型int类型int类型中

2021-09-18 21:47:03 69

原创前端实现超大量数据的list渲染-----虚拟列表 virtualList功能实现

多了不说直接上代码和简易版原理图######### 注：兄弟们勿喷第一次画图<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-wid

2021-08-05 17:43:11 1190

原创 react兄弟传值，使用发布订阅模式

react兄弟传值，以及跨代传值使用react传值的时候你还在通过父组件，收兄弟一的值给兄弟二吗，跨代传值还在一层层的去穿props吗，如果还在这么做，我觉得看了这个案例，应该会对你所帮助。如果用过vue的应该知道vue里面有个api叫vue.$ bus.on和vue.$bus.emit，这个api正式通过发布订阅模式这种方法来解决跨代传值层层传递的缺陷，不多啰嗦直接上代码<!DOCTYPE html><html lang="en"> <head> &

2021-07-24 16:28:13 164

原创 js实现函数的call方法(非es6)

call方法这个问题当初刚学js的时候就很困扰，fn.call(this,a,b,…)如果不用es6的解构方法，this后面的参数到底是如何传递给另外一个函数作为多个参数呢，今天回看红宝书突然回想起了这个问题，也找到了答案，不多说直接上代码 var obj = { color: "red", }; var color = "blue"; function sayColor(a, b) { console.log(this.color,

2021-07-21 21:23:37 201

原创 vue或者react为什么不推荐使用index作为key

react的diff算法执行新旧虚拟dom替换的一个流程1.旧的虚拟dom和新的虚拟dom对比，首先看他们的key是否相同2.相同继续对比他们的内容，不同生成新的真实dom进行替换3.如果内容和key都相同，复用旧的真实dom 不做改变那么如果我们使用遍历时候自动生成的index作为每个节点的key可能会出现什么问题呢？下面放个小案例首先，初始时我们进行遍历persons他会是这样一个过程，源数据1.persons: [{ id: 1, name: “张三”, age: 15 },{ i

2021-07-19 23:49:08 530 10

原创 echart中custom类型的图表

echart中custom类型的图表自定义系列，是比较灵活的系列，我们可以在renderItem这个方法中进行设定在坐标系中的某个坐标做些什么事情，比如画折线，矩形等来展示数据。这个案例主要展示的是，在三个大类下六个小类分别所占时长，通过矩形的宽度表示其时长，矩形越宽时长越长echart依赖包请自行npm下载引入<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" />

2020-12-26 23:41:28 1870

原创 el-table中表格数据新增字段首次渲染后再次修改该字段表格内容不刷新问题

问题演示首先，使用定时器演示从后台获取过来数据，然后添加isPlaying字段，表格能正常渲染出来。但是当我们点击修改按钮修改isPlaying的时候，isPlaying的实际数据已经改变但是表格渲染出来的值却没变。 <template> <div> <el-table :data="list" style="width: 100%"> <el-table-column label="日期" width="180">

2020-09-14 22:22:54 1077

原创 vue路由缓存，结合router-view中key属性进行配置

文件目录2.路由配置详情import Vue from 'vue';import VueRouter from 'vue-router';import Home from '../views/Home.vue';import Layout from '../views/Layout.vue';import Redirect from '../redirect/redirect.vue';import problemManage from '../views/problem-manage.vue

2020-08-11 23:11:54 1471

原创 axios二次封装

import axios from "axios";import qs from "qs";import { Toast } from "antd-mobile";/****** 创建axios实例 ******/const service = axios.create({ baseURL: "http://localhost:8080", // api的base_url timeout: 5000, // 请求超时时间});service.interceptors.request.u

2020-08-10 22:35:03 94

原创 react将this.setState结合promise及async await 改为同步更新

import React, { Component } from "react";import "./scss/header.scss";export default class header extends Component { state = { header: "", }; setStateAsync = (state) => { return new Promise((resolve, reject) => { this.setState(s

2020-07-14 23:32:27 1251

原创前端小技巧

阻止console.log()方法在全局添加下面函数window.console.log = function() {};打断点让程序强制停止在断点之前debugger

2020-05-23 13:36:51 83

原创处理一些兼容性的代码

1.兄弟节点解决兼容性方法： function getNextElementSibling(element) { var el = element; while (el = el.nextSibling) {&nbs

2020-05-23 13:27:33 135

原创 .eslint.js和.prettierrc.js配置项

rules: { 'quote-props': 0, 'dot-notation': 0, 'consistent-return': 0, 'no-multiple-empty-lines': 0, 'prefer-arrow-callback': 0, 'wrap-iife': 0, 'no-undef-init': 0, 'no-new-wrappers': 0, 'linebreak-style': 0, 'max-len

2020-05-23 13:08:11 4901

原创 js自定义音乐播放器

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> *

2020-05-21 22:05:12 370

原创 js之小球曲线运动

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> &lt

2020-05-21 22:02:40 298

原创常用代码

// 随机生成id uuidconst uuid = (_) => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => ( c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4))) ).toString(16) );// 日期格式化 function dateForma

2020-05-21 22:01:45 183

原创使用privide/inject和this.$refs/this.$root进行通信

前言曾几何时，你是否有坐在家里等待出去工作，期间无所事事的那段时光；曾几何时，你是否有不知所措而心中莫名空虚寂寞的痛苦岁月；曾几何时，你是否有决定让自己保持进步，不再为回想起自己空虚的一天而烦恼；如果是这样，请翻阅我的官方博客。介绍通常在vue中我们会经常使用到一些组件间的通信方法，比如父-子、子-父、兄弟、vue-bus、vuex等，那么除了这些还有没有其他的通信方式呢。当然，今儿我就找到了另外的两种方法，privide/inject和this.$ refs / this.$ root注意：以下步

2020-05-13 14:51:16 386

空空如也

空空如也