HTML
月半叫做胖
好好学习 冲鸭
展开
-
日常开发:分页组件的思路梳理
分页组件的思路梳理1. 分页组件的几种场景分析首先这里做几个假设假设最多显示9个分页符省略部分用…来进行表示场景1: 总页数小于等于9页该场景没啥好说的 所有的分页符均显示就行了场景2: 总页数大于9页 且只有一边存在省略情况[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0W8lMkSJ-1595141809098)(./image/image-20200718221106689.png)]此场景有两种情况 左边省略和右边省略:这里要注原创 2020-07-19 14:59:39 · 716 阅读 · 0 评论 -
日常开发: Web Worker实现秒杀倒计时
Web Worker实现秒杀倒计时灵魂拷问 -> 为啥要用web worker因为我们知道 setInterval(() => {}, 1000)代表的意思其实是最快1秒之后能执行, 而如果事件阻塞了的话 就不知道要多久我们才能执行上这个事件了, 因此如果倒计时的话,就会存在这个倒计时的时间被卡住的问题, 如果是秒杀的问题的话~问题有点严重1. 预备知识介绍1. 主进程和子进程之间主要通过消息进行通信postMessage: 发送消息 -> 可以接受任何参数由父到子 或者原创 2020-07-19 14:56:20 · 1956 阅读 · 0 评论 -
日常随笔:列表拖拽换行的例子
22. 列表拖拽转换的例子今天看到有些表格中能够通过拖动来换行,手动排序的功能,想来自己实现一下,类似效果如下主要解决问题的办法drag元素clientX和clientY动画元素animition解决思路委托外部元素监听内容元素的(dragStart阶段,定位被拖动的元素)委托外部元素监听元素已经被拉到哪个元素的位置 (使用dragover确定,停留在哪个元素的...原创 2020-02-29 21:24:44 · 446 阅读 · 0 评论 -
React Hooks: useRef, useImperativeHandle, forwardRef的使用方法
1. 三者用处useRef: 用于获取元素的原生DOM或者获取自定义组件所暴露出来的ref方法(父组件可以通过ref获取子组件,并调用相对应子组件中的方法)useImperativeHandle:在函数式组件中,用于定义暴露给父组件的ref方法。React.forwardRef: 将ref父类的ref作为参数传入函数式组件中,本身props只带有children这个参数,这样可以让子类转发...原创 2020-01-03 11:32:41 · 13167 阅读 · 0 评论 -
日常随笔:JS实现将一个元素从一个标签中移动到另一个标签中的简单方法
使用 append 方法完成页面内元素的迁移问题描述要将一个元素target从一个标签(div1)中移动到另外一个标签(div2)中,应该怎么做呢一般做法:先将target从div1中保存并从div1中将target删除,然后在div2中添加该元素特殊做法: 今天发现直接append该target元素!!!实验验证<!DOCTYPE html><html la...原创 2019-12-24 21:16:18 · 3748 阅读 · 0 评论 -
日常随笔:javascript拖拽drop和drag的使用
Drag,Drop踩坑笔记1. 几个概念1. 拖拽事件摘自MDN:HTML drag-and-drop uses the DOM event model and drag events inherited from mouse events. A typical drag operation begins when a user selects a draggable element, ...原创 2019-12-24 14:49:49 · 1686 阅读 · 0 评论 -
Canvas学习笔记
Canvas 学习笔记0. 参考文档菜鸟教程1. 兼容性以及获取上下文<script> var canvas = document.getElementById('plot'); let ctx = null; canvas.getContext && (() => { console.log(canvas.getConte...原创 2019-11-21 21:00:15 · 406 阅读 · 0 评论 -
日常随笔: Typescript 中使用 reduce Object.keys的方法
Typescript 中使用 reduce Object.keys的方法export interface IAccurateInfo { rmse: IAccItem; nrmse: IAccItem;}export interface IAccurateList { testSet: IAccurateInfo; trainSet: IAccurateInfo;}...原创 2019-11-08 09:28:21 · 3420 阅读 · 0 评论 -
解决webpack打包css时CssSyntaxError的问题
打包CSS文件时的CssSyntaxError问题// 可以使用的代码const path = require('path');module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') },...原创 2019-09-22 18:14:38 · 6969 阅读 · 0 评论 -
防抖和截流
JavaScript中的防抖和节流什么是防抖什么是节流防抖节流的区别应用场景0. 参考博客js的防抖截流为什么要做防抖和节流: 如scroll事件和input中的change事件 等变化频繁的事件,如果我们绑定事件后任由这些事件触发,最后因为频繁出发这些事件,导致性能受到很大影响。1. 什么是防抖函数防抖:一段时间内只能发生一次,如果重复触发只执行一次(将多个事件合并为一次进...原创 2019-09-09 14:48:21 · 1387 阅读 · 0 评论 -
React学习笔记之十一:高阶组件(HOC)
11.高阶组件(HOC)什么是HOC怎么封装一个HOCHOC的小栗子HOC的用法深入博文推荐1. 什么是HOC高阶组件(HOC)不是React的API是一种基于组件的编程方法,是为了组件更好的复用而存在的。高阶组件!!!就是一个函数 不要慌!比如获取博客信息列表组件和获取评论列表,虽然可能评论列表在博客信息列表之间有一些差距,比如博客可能有转发等功能,而评论列表可能要有自动...原创 2019-07-28 12:06:37 · 516 阅读 · 0 评论 -
React学习笔记之十三:React-Router之基础语法和嵌套路由
1.React-Router的基本用法react-router的几个重要工具Router (BrowserRouter)RouteLinkRouter路由器Router: 主要用于包裹整个路由信息和路由跳转信息的容器Route路由规则: 用于识别特定的URL后,将页面导向特定的组件(URL -> Component)Link路由链路:类似于a标签,将页面跳转到特定的U...原创 2019-08-04 20:56:38 · 366 阅读 · 1 评论 -
uni-app云打包方法
uni-app打包成安卓app1. uni-app 云打包流程:发行 -> 原生app云打包 -> 使用DCloud公用证书 -> 输入包名 -> 去除广告选项 -> 打包 (如果显示已经成功上传到云平台,只需要等待打包的结果即可)打包的结果会显示在控制台内,打包成功就会返回一个网址,从网址中可以下载打包的apk文件如果失败 很多时候是manifeast.js...原创 2019-04-28 16:40:41 · 17985 阅读 · 0 评论 -
JS的内存泄漏问题
JS中存在的内存泄漏内存泄漏最终将导致页面反应迟缓,崩溃,高延迟1. 什么是内存泄漏我们知道内存是有限的,比如8G,16G, 当我们创建了一些变量,其就会在内存中的对应位置 (堆栈的概念)栈内存一般存储基础的数据类型(Number String Null undefined Boolean Symbol)堆内存一般存储引用类型,包括对象Object和数组Array但是我们如果一味的往里...原创 2019-04-16 11:55:53 · 480 阅读 · 0 评论 -
Vuex的入门指南
Vuex的入门指南Vuex1. 什么是vuex官网描述如下store和全局变量的区别通俗的理解为什么要用vuex2. 概念介绍子组件如何修改store中的参数子组件如何监听响应Vuexvuex是什么(有什么用)概念介绍及使用方法vuex官网1. 什么是vuex官网描述如下每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大...原创 2019-04-12 11:24:05 · 159 阅读 · 0 评论 -
VS code 突然HTML无法补全的问题解决
如果安装了VS Great Icons可以看一下所对应的html文件的图标,是否为如果已经是这个类似箭头的图标,说明已经被VScode识别为html文件,那么应该已经可以实现html补全如果部分不能补全,可能是1-未安装插件;2-可能存在插件冲突 如果没有被VScode识别为html文件1-ctrl+shift+p2-change the language mode...原创 2019-01-10 09:38:44 · 8394 阅读 · 4 评论