![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
日常开发
月半叫做胖
好好学习 冲鸭
展开
-
日常学习:Typescript 4 学习笔记
Typescript 4 学习笔记可变元组类型元组标记class 从构造函数推断成员变量类型短语赋值法将 catch error 判定为 unknown 而非 any0. 准备工作安装 typescript 4 beta 体验版npm initnpm install typescript@beta配置 workspace 启动package.json 文件中增加 script 配置, 一定要使用 node_modules 下的 tsc 不然用全局的编译时候还是会报错,因为原创 2020-08-02 12:24:09 · 506 阅读 · 0 评论 -
日常开发:分页组件的思路梳理
分页组件的思路梳理1. 分页组件的几种场景分析首先这里做几个假设假设最多显示9个分页符省略部分用…来进行表示场景1: 总页数小于等于9页该场景没啥好说的 所有的分页符均显示就行了场景2: 总页数大于9页 且只有一边存在省略情况[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0W8lMkSJ-1595141809098)(./image/image-20200718221106689.png)]此场景有两种情况 左边省略和右边省略:这里要注原创 2020-07-19 14:59:39 · 704 阅读 · 0 评论 -
日常开发: Web Worker实现秒杀倒计时
Web Worker实现秒杀倒计时灵魂拷问 -> 为啥要用web worker因为我们知道 setInterval(() => {}, 1000)代表的意思其实是最快1秒之后能执行, 而如果事件阻塞了的话 就不知道要多久我们才能执行上这个事件了, 因此如果倒计时的话,就会存在这个倒计时的时间被卡住的问题, 如果是秒杀的问题的话~问题有点严重1. 预备知识介绍1. 主进程和子进程之间主要通过消息进行通信postMessage: 发送消息 -> 可以接受任何参数由父到子 或者原创 2020-07-19 14:56:20 · 1943 阅读 · 0 评论 -
React+Nodejs中间层(一):环境搭建+实现接口转发
Koa+React+Webpack环境配置1. 初衷最近,因疫情在家写了一些东西.想到之前去实习的时候,公司用的Nodejs做中间层,实现数据格式的处理,请求转发,SSR等功能,想自己也折腾下这么个东西,刚好最近或多或少的学了一些Webpack,就从webpack搭一个Koa作为中间层,页面路由,同时使用React的这么一个脚手架吧,只是一个自己的玩具吧,哈哈哈哈.2. 使用中间层的作用我...原创 2020-03-18 16:04:42 · 4057 阅读 · 0 评论 -
学习笔记:SKU组件(React版)
SKU组件(React版)源码起因今天看掘金的时候看到前端SKU算法实现,因为公司也有涉及到SKU的业务,记录一下自己写SKU的一个例子吧,刚好他有提供后端的API接口数据,mock一下干起来,但是在做的时候还是有很多问题的,这里做一下记录实现效果mock数据export const simulatedSku = { id: 2, title: "林间有风自营针织衫", ...原创 2020-03-16 16:12:03 · 3576 阅读 · 0 评论 -
ES2020整理:?和??,动态加载,BigInt,Promise.allSettled
ES2020 学习笔记原文地址1. babel 环境配置babel 版本在7.8以上,babel-cli 8以上均支持es2020中的语法,具体可参照本项目的webpack配置2. es2020 中值得关注的点对象定义中的私有变量当我们创建一个类的时候,该类会在各个场景下被使用,可能我们并不希望每一个内部的参数都被全局共享,因此在方法或者变量前添加#,使得该方法或者类名只在类内部可用...原创 2020-03-14 10:35:28 · 1578 阅读 · 0 评论 -
开发随笔:React使用IntersectionObserver实现无限下拉
17. 无限下拉的例子参考博文1. 工具介绍IntersectionObserver: 一个元素是否在视窗中可见, 通过该对象实现对于DOM元素的异步监听功能的实现。基本使用方法:创建一个IntersectionObserver的类函数,在类函数创建时,传入需要监听事件的回调处理函数主要用用于当元素和视窗发生交互时候,调用回调函数回调中的entities是所有监听对象组成的数组...原创 2020-03-02 01:37:16 · 5213 阅读 · 0 评论 -
日常随笔:列表拖拽换行的例子
22. 列表拖拽转换的例子今天看到有些表格中能够通过拖动来换行,手动排序的功能,想来自己实现一下,类似效果如下主要解决问题的办法drag元素clientX和clientY动画元素animition解决思路委托外部元素监听内容元素的(dragStart阶段,定位被拖动的元素)委托外部元素监听元素已经被拉到哪个元素的位置 (使用dragover确定,停留在哪个元素的...原创 2020-02-29 21:24:44 · 440 阅读 · 0 评论 -
日常开发:Websocket初探
WebSocket使用方法前端使用方法利用WebSocket建立一个WebSocket对象通过监听该对象的 onopen, onmessage方法,实现数据的交互,处理后端传来的信息<!--- Game1 ---><!DOCTYPE html><html lang="en"> <head> <meta charset...原创 2020-02-27 15:11:53 · 194 阅读 · 0 评论 -
日常随笔: 实现拖拽上传文件并展示
19. 拖拽上传图片并展示上传图片1. 解决思路:通过利用,监听drop方法,从dataTransfer中得到上传的源文件利用FileReader类中的readAsDataURL将二进制文件转换成base64字符串将该字符串放入img的src中即可上传功能使用FormData进行处理,利用append方法添加内容之后利用post上传到服务器,获取文件地址1. 核心处理详细内容...原创 2020-02-24 15:47:12 · 447 阅读 · 0 评论 -
Flutter学习笔记:有状态组件和组件间通信
3. Flutter有状态组件和组件通信0. 一个计算器的简单例子再学习过程中在本例子中用到了几个注意点进行笔记:Flutter有状态组件的定义方法Flutter子组件和父组件之间的通信过程动态组件生成的方法关于定义回调函数类型上碰到的写法问题实现效果:1. Flutter有状态组件的定义创建一个类(有状态组件),该类用于继承StatefullWidget在有状态组件中...原创 2020-02-08 19:07:14 · 1586 阅读 · 1 评论 -
练手的React静态博客项目
React练手博客项目如果被人看到了觉得还行的话进去点个star把有什么问题的话可以直接评论,希望大家多批评指正,作为前端小菜鸟的我还是要多多学习鸭...原创 2020-02-07 20:00:59 · 729 阅读 · 2 评论 -
Flutter学习笔记二:基础组件的使用
1. flutter 在ubuntu下的环境配置具体内容审核不通过,可以看github主要踩坑包括android studio的安装java 版本和sdkmanager不兼容,降java版本sdk的安装(工具的使用)2. 基础组件的使用0. 心得flutter并不像前端一样有分离的js,css,javascript,都是通过组件的形式进行安排的,布局是一个组件对象内的属性等等,...原创 2020-01-31 21:36:54 · 196 阅读 · 0 评论 -
开发随笔: useRef获取之前状态以及useEffect的坑小记
16. useEffect中的坑以及利用useRef记录之前的状态1. 场景描述用法在使用useEffect这个hooks的时候,我们通过会通过给他增加一个依赖项,来完成当某个或某些依赖发生改变的时候,完成一些副作用的操作,其正常用法如下:import React, { useEffect, useState } from "react";import "./styles.css";c...原创 2020-01-20 16:39:31 · 8472 阅读 · 0 评论 -
开发随笔:React异步加载组件封装
React异步载入组件封装作者正在开源一个基于React+Typescript+node.js的博客系统,源码在练手开源项目, 有想一起学习的或者有空的大佬可以帮我看看代码,提提意见,顺便给个star最好不过拉。谢谢大家1. 场景叙述今天,碰到这样一个问题,就是当表单重载修改的时候,需要根据接口返回的数据来实现表单的初始化,如果是自己封装的受控组件的话,其实很简单,直接通过value赋值,然...原创 2020-01-18 22:28:06 · 564 阅读 · 0 评论 -
React Hook: 使用Context和useReducer代替Redux (Typescript)
14. React Hook: useContext + useReducer代替redux0. 背景当组件嵌套很深,通过一直传参的方法来实现会非常麻烦,为了共享一些参数,一般可以通过Context来实现参数的托管,如果要对部分参数进行修改,可以通过redux或者mobx来做状态的集中管理。在有了React hooks之后,通过Context + useReducer完成Redux的功能,这里...原创 2020-01-13 11:42:40 · 3176 阅读 · 1 评论 -
开发随笔:在react中使用带参的防抖节流回调
12. 在react中使用防抖和节流1. 原理为什么要使用防抖节流,以及防抖节流的原理可以细看防抖和节流2. 在React中使用防抖节流错误的例子import React from "react";import { debounce } from "lodash";export function ErrorInput() { const onChange = e => {...原创 2020-01-11 12:09:29 · 1134 阅读 · 3 评论 -
开发随笔:React传递图片文件到后端的文件上传组件封装过程
10 . React 图片或者文件上传问题通过 base64 前端处理图片为 base64 的解决方案利用 FileReader 对数据进行读取,如果是图片会将图片读取为 base64 的形式将得到的 base64 的字符串传给后端后端直接保存该html字符串,之后调用接口查询该数据直接前端通过img标签完成自动解析即可参考博文代码实现function App() {...原创 2020-01-09 10:40:41 · 2953 阅读 · 0 评论 -
开发随笔:flex:1被内部元素撑开问题解决办法
flex:1由于内部元素被撑开的问题问题描述当flex:1的元素当其子元素过长(文本过长)时,会直接撑开父元素<!---html---> <div class="wrapper"> <div class="left">1</div> <div class="middle"> ...原创 2019-12-27 09:46:58 · 11997 阅读 · 4 评论 -
日常随笔:JS实现将一个元素从一个标签中移动到另一个标签中的简单方法
使用 append 方法完成页面内元素的迁移问题描述要将一个元素target从一个标签(div1)中移动到另外一个标签(div2)中,应该怎么做呢一般做法:先将target从div1中保存并从div1中将target删除,然后在div2中添加该元素特殊做法: 今天发现直接append该target元素!!!实验验证<!DOCTYPE html><html la...原创 2019-12-24 21:16:18 · 3737 阅读 · 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 · 1671 阅读 · 0 评论 -
日常随笔:发布一个npm包
npm包发布流程实例编写基础的模块代码注册npm帐号(有的话直接进入下一步)配置webpack配置package.json优化(ReadMe+单元测试)发布1. 编写一个简单的Math库math.js// math.jsconst square = x => x ** 2;const cube = x => x ** 3;export const My...原创 2019-11-27 22:44:12 · 163 阅读 · 0 评论 -
开发随笔:利用业务组件zent封装表单组件
zent封装表单组件zent版本7.4.31. 利用zent的几个组件FormControl: 包裹封装组件,用于为封装的表单组件提供label, invalid等参数,与其他封装的表单组件统一格式FieldSet: 包裹封装的外部组件,当FormStrategy.View时,为上级托管的Form组件添加字段nameForm.useField: 初始化一个model,包括初始值,键...原创 2020-01-04 17:01:04 · 543 阅读 · 0 评论