- 博客(24)
- 收藏
- 关注
RSS订阅原创 蜗牛慢行的2020
2020年依然是拖拖拉拉的一年，大多的flag都难产了。没有想到的是写技术博客这件事居然完成了。虽然本身目标就定的小，总共完成12篇博客文章即可。分摊到每个月也就一篇文章。看起来很简单是吧？但是你看看我以前的历史记录就知道有多么不容易。跟大多数人一样，我是拖延症患者。我17年就开了博客，仅写了两篇文章。18年空缺。19年仅1篇。2020年有20篇交卷。本拖延症晚期患者很是满意。最初想写博客是因为我平时工作就有记录的习惯，一般都在本地，后来发现有点杂乱也不方便随时随地翻阅。就整理重写传到了网上。我一开始
2020-12-24 10:49:12
166
1
原创 （针对多个react版本）获取组件的dom元素/值
工作中不免遇到各种react版本，获取dom元素/值是常见需求。所以今天针对目前的几个版本点提供不同的解决方案。欢迎留言讨论补充。感谢 ^ _ ^针对多个react版本 - 父组件获取子组件的dom元素/值 React 16.3版本以上第一、子组件非公用组件，使用createRef实现第一、子组件公用组件，使用forwardRef实现React 16.3版本以下第一、子组件非公用组件，使用createRef实现第一、子组件公用组件，使用forwardRef实现React 16.3版本以上分两种情况：
2020-12-12 21:20:11
1108
原创 原生JS实现自动无缝切换轮播图(可鼠标拖动)
^ _ ^ 最近参加了一个免费的华为在线课程，上面一个作业是用原生js实现轮播图。练手的同时发现工作中框架用的多。原生的都不如以前那么熟练了。特此写这篇文章记录一下。希望能帮助到一些新手盆友。一起学习吧。目录功能需求实现思路html & CSS结构分析JS逻辑实现知识点小结功能需求功能上要实现以下4个需求：自动无缝切换图片鼠标左右拖动切换图片点击小点切换对应图片浏览器窗口尺寸改变不影响以上功能实现思路html & CSS结构分析JS逻辑实现知识
2020-08-17 20:49:12
6481
2
原创 JS可折叠区域及accessbility实现（无障碍网页）
实现效果源码<!DOCTYPE html><html><head> <title>collapsible menu</title></head><style type="text/css"> .collapsibleMenu{ width: 400px; color: #0072ac; margin-bottom: 20px; } .isCollapsible{ display: blo
2020-08-11 20:57:18
803
原创 Jquery: 阻止冒泡后click事件还是触发两次??
今天接到一个移交过来的项目, 发现Bug是有一个click事件会触发两次。我第一反应：是不是没有阻止冒泡？然而是添加了preventDefault的。最后通过debug和读完源代码，才发现click监听事件被绑定了两次。当然正常情况下，没人会傻到给同一个元素添加两次监听事件。但是项目参与的人多了，杂了就很容易出现这种情况。如果你找不到重复添加监听事件的位置，或者不知道应该删除哪个的时候。可以用这个方法。希望能帮到同样掉坑的盆友节约时间。e.stopImmediatePropagation()//阻
2020-07-21 21:17:38
290
原创 React通过原生鼠标事件实现拖拽(drag and drop)列表重排序
虽然现在html5已经有支持拖拽的事件，但是支持还不那么全面。所以目前大部分的拖拽还是通过原生的鼠标事件来实现列表重新排序。话不多说。一步步开始做吧盆友们可以通过下面链接查看所有代码和效果。https://codesandbox.io/s/drap-and-drop-to-reorder-list-iqwqjStep1.准备一个模拟数据let list = [];for(let i = 0; i< 10; i++){ list.push(`item ${i}`);}Step2
2020-06-25 12:36:04
2870
3
原创 React公用scrollToTop（返回顶部）组件
现在web页面要兼容各种设备，部分页面的内容长度在手机端就显得过于冗长。除了给客户提供一个按钮，一键返回顶部。更好的客户体验就是当客户做某种操作的时候，就自动滚动到顶端。这样就能顺畅的进行接下来的操作了。目前我所接触到需要自动返回顶部的需求分为两种当客户切换页面时当客户当前页面进行某些操作或者顶端显示错误信息总共两个步骤1.创建一个单独的组件import { Component } from 'react';import { withRouter } from 'react-router-
2020-06-20 10:37:00
2405
原创 js实现浏览器往手机端，PC端自带日历添加事件提醒
之前接收到一个需求，要求添加一个链接。用户点击后就可以在手机端，PC端的日历中添加一个待办事项，能够到时提醒。各种google后发现，只要编辑ics格式文件，点击下载。手机端、PC端会识别和询问是否要加入日历。话不多说，例子走你。希望能帮助到碰到类似需求的盆友。<!DOCTYPE html><html lang="en"> <head> &...
2020-04-25 09:14:51
3868
6
原创 TypeScript - 枚举详解
知识点列表数字枚举字符串枚举合成枚举 （包括字母和数字类型）计算成员和常量成员枚举成员作类型运行时枚举编译时枚举反向映射 (仅仅适用于数字枚举)const枚举环境枚举数字枚举没有初始化值，默认从0开始自增enum Direction { Up, Down, Left, Right,}console.log(Direction.Up...
2020-04-25 08:48:33
674
原创 TypeScript - 泛型解析Generics
泛型主要用于创建重用组件，允许用户去使用自己的类型去重用这些组件。如何定义泛型？function identity<T>(arg: T): T { return arg;}对比一下function identity(arg: any): any { return arg;}就很容易理解了，实际上就是运用了一个变量T去捕捉用户提供的类型 （例如: nu...
2020-04-25 08:46:19
268
原创 TypeScript - 函数详解
JS中创建函数的两种方式// 命名函数function add(x, y) { return x + y;}// 匿名函数let myAdd = function(x, y) { return x + y; };函数类型定义函数类型参数类型 x: number返回值类型 function add(x: number, y: number): number TypeScri...
2020-04-01 21:07:30
490
原创 TypeScript - 类详解
类写法class Greeter { greeting: string; //属性 constructor(message: string) { //构造器： this.greeting = message; } greet() { //方法 return "Hello, " + this.greeting; }}let greeter = ne...
2020-03-23 21:37:02
398
原创 替换多个敏感词
此例子只考虑少量的敏感词词库替换。let comments = "sexy girl yes, no sexy fuck";let abusiveWordsData = ['fuck', 'ass', 'sexy girl', 'sexy']; //敏感词词库function replaceWords (comments){ const rgx = new RegExp(abusive...
2020-03-12 20:45:11
3415
原创 TypeScript - 接口详解
TypeScript的核心原则之一是对值所具有的形态进行类型检查，在TypeScript中，接口的作用就是命名这些类型和在你的代码和第三方代码之间建立契约举个栗子function printLabel(labeledObj: { label: string}) { console.log(labeledObj.label);//类型检查检查printLabel的全部调用，传递的参数里面...
2020-03-11 22:00:53
572
原创 TypeScript - ES2015与Typescript之间变量声明, 解构赋值的区别和新增
本文只介绍了在es2015与Typescript之间变量声明, 解构赋值的区别和新增如果你不熟悉怎么使用let和const还有解构赋值，请参考阮大神的ES6教程https://es6.ruanyifeng.com/#docs/lethttps://es6.ruanyifeng.com/#docs/destructuring如果你不清楚为什么不使用var.请参考官方文档http://ww...
2020-02-27 22:42:12
801
原创 TypeScript - 基本类型详解
基本类型Boolean布尔值let isDone: boolean = false;Number数字let decimal: number= 6; //十进制let hex: number = 0xf00d; //十六进制let binary: number = 0b1010; //二进制let octal: number = 0o744; //八进制String字符串...
2020-02-26 21:53:18
338
原创 Cannot find name 'Set'. Do you need to change your target library? Try changing the `lib`compiler
错误信息TS2583: Cannot find name ‘Set’. Do you need to change your target library? Try changing the lib compiler option to es2015 or later.错误截图解决方案：修改tsconfig.json. 我目前用的版本是"typescript": “^3.7.5”{ ...
2020-02-25 21:54:41
7284
1
原创 js动态提示输入框剩余字符数及accessbility实现（无障碍网页）
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
2020-02-24 19:09:18
394
原创 三种CSS方式实现弹出窗口（popup window）
1. 使用display: flex；进行上下居中布局在容器里面添加以下几行css语句 display: flex; justify-content: center; align-items: center;注意： 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。<!DOCTYPE html><html lang=...
2020-02-21 21:16:17
10386
1
原创 React Hook - 对比Class组件理解学习
Hooks 出了好些时间，之前看过官方文档。用的不多忘了些。趁着复习的时间，写篇博客整理一下自己的理解。如果能够启发些同行新手那就功德无量了。废话不多说，我按照官方已出的API，...
2020-02-14 17:32:39
1954
原创 GIT bash可以用，但是cmd, vscode, intelliJ的命令行不能识别git
在安装GIT的时候没有设置环境变量第一步、在GIT bash里面查找git的安装路径第二步、设置系统环境变量第三步、cmd, vscode, intelliJ的命令行测试...
2020-01-31 22:51:09
721
1
原创 两栏自适应布局6种方案（一侧定宽，一侧自适应宽度）
最近看面试题，看到很多次类似的题目，左侧定宽右侧自适应， 或则右侧定宽左侧自适应。网上众说纷纭，示例很多没有原理讲解。所以借助自己复习总结。希望能给初学者，自学者一些帮助吧。共勉。。。目前所知的主要5种方式方法一：固定宽度区域浮动，自适应区域设置margin(值 = 固定的宽)原理：float的固定宽度区域脱离文档流。自适应区域默认占满父元素宽度。通过设置margin(值 = 固定的宽) ...
2019-01-03 16:16:03
2875
原创 为什么在Firefox里placeholder的颜色比设置的代码浅， 比其他浏览器浅
今天在开发的时候突然发现在Firefox下设置的placeholder颜色不是代码设置的颜色。本着码农朴实的精神，我先检查下是不是写错了。 毕竟各大浏览器都坚持以自我为中心，其他为goushi的精神。 坚持要苦逼的前端写不同兼容的代码。 但是不管姑奶奶我怎么改， 代码是生效了， 颜色是改了。 就是取色器取出来的不是宝宝设置的颜色呀（此处一脸懵逼）。心里好气， 可是还是要保持微笑。 这TM怎么过测试...
2017-03-30 22:17:15
1767
原创 java-将xlsx（excel）文件转换成json
最近在工作接触到将xlsx(excel)转换成Json文件的需求。特此写个文章总结学习。以供以后参考。首先了解一下Json的语法 摘抄自http://www.w3school.com.cn/json/json_syntax.aspJSON 语法是 JavaScript 对象表示法语法的子集。数据在名称/值对中 数据由逗号分隔 花括号保存对象 方括号保存数组JSON 值可以是：数字（整数
2017-01-16 21:40:56
4723
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人