万少博-CSDN博客

原创前端漫漫路

最近更新时间：2018年7月19日18:06:44《我的博客地图》本文主要记录我的前端技术学习过程，以及对前端领域的认识。我阅读的书籍《JavaScript权威指南》——淘宝前端团队翻译，机械工业出版社，第六版，2016.11.23购买，86.2元《深入浅出Node.js》——朴灵编著，人民邮电出版社，2016.11.23购买，40.6元《HTTP权威指南...

2018-07-19 18:35:25 756 2

原创我的博客地图

最新更新时间：2018年01月27日11:52:57前言由于自己写的文章越来越多，查看和查找具体内容变得格外耗时，因此建立此博客目录系统，提高我对自己文章的管理能力，以及方便查看和查找具体内容。规定：每一篇文章都有序号、标题、简介和类别JavaScript基础

2018-01-27 12:04:59 4820

最新更新时间：2022年01月15日14:40:31《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：react父子组件，父组件调用子组件方法，技术方案分析获取函数式组件的实例示例代码父元素import React, {useRef} from 'react'import Child1 form '../child1';import Child2 form '../child2';function Parent(props){ const child1Ref = use

2022-01-15 15:45:19 5785 2

原创 bebel学习总结

最新更新时间：2021年11月24日20:32:13《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：babelbabel-preset-env带来的改变从2017年开始，babel-preset-es2015、babel-preset-es2016、babel-preset-es20**等包均已被babel-preset-env取代1、旧项目升级更新项目依赖npm uninstall --save-dev babel-preset-es2015npm install -

2021-11-24 21:06:46 336

原创常用工具方法100例

最新更新时间：2021年09月16日09:57:13《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：数组一维数组转二维数组，按照N进行分割function toArr(origin,N){ let res = []; let cur = []; origin.forEach((item,i)=>{ if(i % N == 0 && i != 0){ res.push(cur) cur = [] }

2021-09-16 10:06:28 293

原创 ES6实现单例模式

最新更新时间：2021年09月14日15:14:57《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：通过ES6的class实现单例模式类export default class Person { //ES6类的静态方法（只能直接由类名调用的方法）：static getInstance //ES6类的静态属性：直接挂载在类名上的方法，如：Person.instance() static getInstance(data) { if (!Person.instance)

2021-09-14 15:24:30 1191

原创常见错误语法100例

最新更新时间：2021年08月06日21:21:01《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：程序员的基本功就是写代码，基本功的强弱决定了开发的效率和程序的后期运行bug率，本文记录自己在开发过程中遇到的一些语法错误，汇总以自省快速创建元素为对象的非空数组错误示例，数组0号元素的key赋值后，数组每个元素的key都发生了变化//看上去没有问题let tmpArr = new Array(5).fill({key:'',value:''});//tmpArr [{key:

2021-08-06 22:11:41 665

原创服务器运维学习总结

最新更新时间：2021年08月02日16:53:10《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：linux命令、项目部署、项目运维Linux常用命令vimcdcd ~ #进入到当前用户的根目录 /home/admincd .. #返回上层文件夹其他cat a.txt #在终端打印文件内容mkdir test_dir #在当前目录创建文件夹touch a.txt #在当前目录创建文件cp a_dir/* b_dir/ #文件夹内容复制cp a_dir b_dir/

2021-08-02 17:09:40 197

原创在node服务器配置gitlab账号

最新更新时间：2021年08月02日14:50:53《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：我们在本地开发时，可以通过终端输入命令和gitlab仓库交互，比如clone、add、commit、push等操作，前提是已经配置了账号信息。如果想在node服务器上和gitlab仓库进行交互，同样需要配置账号信息，不通过输入账号密码的方式，而是通过ssh的方式。在本地配置gitlab账号注意：生成的是OPENSSH PRIVATE KEY进入gitlab个人设置：http://

2021-08-02 16:44:11 357

原创 GitLab API学习总结

最新更新时间：2021年07月27日16:05:07《猛戳-查看我的博客地图-总有你意想不到的惊喜》文章背景：最近在开发一个需求，在一个PC端中台系统上(前端是antD搭建的React项目+后端是eggJS搭建的Node项目)，前端交互点击一个按钮，需要在Node服务器上完成一系列动作：在GitLab上创建一个新仓库 -> 在Node服务器上动态初始化一个react项目 -> 改写这个项目中的一写文件内容 -> 将这个react项目push到新仓库本文内容：在进行代码管理时，通

2021-07-27 17:04:48 8573

原创 web端代码编辑器和diff工具

最新更新时间：2021年05月18日13:51:49《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：react项目中的代码diff工具JSON.stringify(JSON.parse(json)) 将单行json字符串以带有换行和缩进的格式形式输出import { PureComponent } from 'react';import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';class Di

2021-05-18 14:06:56 603

原创 git学习总结之commit分类

最新更新时间：2021年05月08日15:24:18《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：git commit命令的信息分类commit分类如下feat (A new feature)新功能fix (A bug fix)漏洞修复docs (Documentation only changes)readme或者项目文档修改style (Changes that do not affect the meaning of the code (w

2021-05-08 15:36:48 565

原创在不刷新和不跳转页面的情况下向URL中增删改query参数

最新更新时间：2020年09月08日14:10:19《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：在不刷新和不跳转页面的情况下向URL中增删改query参数，原理，路由push到和当前相同的路由时，页面不跳转、不刷新。方案一：原生操作查询query参数const{ location } = this.props;const { search } = location;let queryStr = search.slice(1);//age=30&name=wansh

2021-03-16 17:37:39 5100

原创 node开发之模块学习总结

最新更新时间：2021年01月13日16:06:59《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：fs-文件系统模块基本APIvar fs = require("fs")fs.open();//打开文件fs.read();//读取文件fs.close();//关闭文件fs.stat();//获取文件信息fs.writeFile();//写入文件fs.readFile();//异步读取文件fs.ftruncate();//截取文件fs.unlink();//删除

2021-01-13 16:42:40 168

原创工作中遇到的问题

最新更新时间：2020年12月08日17:40:28《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：Mac使用过程中遇到的问题、IDE使用过程中遇到的饿问题使用vscode时，webpack配置了别名alias，鼠标点击文件路径无法跳转进入文件//a.js//没有配置别名前的文件引入形式import {getData} from '../../utils/common'//配置别名后的文件引入形式import {getData} from '@/utils/common'

2020-12-08 17:51:55 215

原创 node开发之写接口开发总结

最新更新时间：2020年11月30日14:22:02《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：用egg-js开发接口编写 CRUD （create, read, update, delete）语句查询数据库//read 方案一：query+sql语句let sql = `SELECT COUNT(*) from table1; SELECT * from table2`;this.ctx.app.mysql.query(sql);//异步//read 方案二：get

2020-11-30 14:52:46 322

原创 100条常用SQL语句

最新更新时间：2020年11月27日10:54:07《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：最近在做node开发，写了大量的sql语句，本文以作记录常用sql语句//查询 table1 表中的所有数据SELECT * FROM table1;//查询 table1 表中的数据量SELECT COUNT(*) FROM table1;//按照条件查询 table1 表中的所有数据SELECT * FROM table1 WHERE name="wanshaobo";

2020-11-27 11:19:21 4499 1

原创移动端开发问题汇总

最新更新时间：2020年09月14日15:37:43《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：移动端开发过程中遇到的问题，click事件300ms延迟、点击穿透、1像素边框click事件300ms延迟click事件等待约 300ms 的原因，浏览器需要判断用户是否是双击缩放行为，如果是双击就不会触发 click 事件。因此 click 事件触发代表一轮触摸事件的结束。移动端，对dom元素分别绑定三个事件：onTouchStart、onTouchEnd、onClick

2020-09-14 16:50:11 245

原创 PC端下载文件到本地

最新更新时间：2020年09月08日14:10:19《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：前端开发过程中，经常会遇到下载文件的交互，用户点击一个按钮，浏览器会将文件下载到电脑本地，比如下载word、excel、ppt网站和被下载的资源没有跨域可以借助 a 标签的 download 属性按照文件的默认名称下载，不需要给download赋值<style> a{ text-decoration:none; color:

2020-09-08 14:35:36 1046

原创 js实现真正0ms的setTimeout

最新更新时间：2020年08月12日22:30:16《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：定时器window.setTimeout概述在浏览器中，setTimeout()/setInterval() 的每调用一次定时器的最小间隔是4ms，这通常是由于函数嵌套导致（嵌套层级达到一定深度），或者是由于已经执行的setInterval的回调函数阻塞导致的。实现源码// Only add setZeroTimeout to the window object, and hid

2020-08-12 22:30:48 651 2

原创使用阿里云OSS上传本地资源(图片、文件、音频、视频)

最新更新时间：2020年08月08日23:44:17《猛戳-查看我的博客地图-总有你意想不到的惊喜》背景：在使用阿里云OSS的过程中，通过JavaScript客户端签名直传的方案进行本地资源上传时，在react架构的项目中引入官方提供的Plupload SDK的方案一直上传失败，究其原因是Plupload SDK的方案采用jQuery操作DOM进行上传，通过分析源码发现核心还是传统的formdata格式发送xhr对象上传。本文内容：记录前端开发过程中在不同场景下使用阿里云OSS上传本地资源的方案

2020-08-08 23:45:34 5110 1

原创 js语言中不同数据类型的序列化和反序列化

最新更新时间：2020年08月06日22:51:48《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：数据的序列化，是指将非String类型的数据转化为String类型的数据；数据的反序列化，是指将序列化后的String类型的数据转化为序列化前的类型的数据；Booleanlet a = true;//序列化let serializationA = JSON.stringify(a);//反序列化let deserializationA = JSON.parse(seriali

2020-08-06 22:52:25 718

原创 form表单原生提交和表单序列化

最新更新时间：2020年08月01日16:57:35《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：常见的表单需求有用户登录、收集用户信息、调查问卷等，现在基本都用假的form表单形式来上传数据，真正的form表单形式，js干预较少，数据上传的配置都放在form标签的属性中。基础知识input的name属性规定标签元素的名称，form表单提交时自动捕获只有设置了name属性的表单元素才能在提交表单时传递它们的值当input标签的type为radio/checkbox，label绑

2020-08-01 16:58:34 2060 2

原创 CSS三列布局中间自适应

最新更新时间：2020年08月01日09:09:51《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：本文汇总了常见的六种布局方案：浮动、绝对定位、flex、calc函数、圣杯布局、双飞翼布局两侧左右浮动，中间设左右margin<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>

2020-08-01 10:20:42 414

原创 CSS伪元素巧用

最新更新时间：2020年07月28日09:28:37《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：css伪元素有四个：:first-line 伪元素用于向文本的首行设置特殊样式、:first-letter 伪元素用于向文本的首字母设置特殊样式、:before 伪元素可以在元素的内容前面插入新内容、:after 伪元素可以在元素的内容之后插入新内容:first-line 和 :first-letter 只能用于块级元素:before 和 :after 的display属性默认是inl

2020-07-28 11:44:24 645

原创 JS获取本地图片和网络图片的宽高尺寸和存储大小

最新更新时间：2020年07月08日09:13:28《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：图片作为一种记录信息的载体，比文本更加生动，比视频更加精简，在日常生活中的用处很大。作为前端开发人员，操作图片的场景非常多，本文记录读取本地图片的尺寸和容量，已经获取网络图片的尺寸和容量。读取本地图片html<input type="file" onChange={(e)=>{this.onChange(e)}} className={styles.getImg}

2020-07-08 10:25:10 7858 4

原创在钉钉小程序中实现宽高不定的图片裁剪后等比例缩放中心对齐显示在固定宽高的canvas容器中并生成临时url路径的实例

最新更新时间：2020年07月07日15:59:41《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：在做业务的过程中，遇到图片需要中心对齐自适应显示在固定宽高的容器中，同时对图片裁剪后生成临时url路径上传到服务器，本文记录详细的过程，以及实现方案。图片中心对齐显示在固定宽高的容器中需求：图片横向或纵向至少有一个方向显示全部内容注意：容器为固定宽高，图一宽高比小于1，图二宽高比大于1如图一，图片的宽高比小于1，此时需要将图片的横向全部内容显示。如果图片的宽度大于等于容器

2020-07-07 16:46:59 2376

原创在钉钉小程序中实现录音和播放功能实例

最新更新时间：2020年06月27日11:35:07《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：钉钉小程序开发，录音，播放单段录音，连续播放多段录音项目背景入职公司以来用了一年的时间从0-1完成了一个微信小程序项目的开发，取得了巨大的成功，对自己的技术沉淀有着非常重大的意义，同时也开启了自己的管理道路的职业生涯。近期为了提升公司内部的管理水平，已经启动开发一款钉钉小程序产品，面向于内部全体员工使用，包括培训、考核、学习等功能。DOM<view> <vi

2020-06-27 12:06:29 3596

原创 git学习总结之分支合并(merge、rebase)

最新更新时间：2020年06月09日15:41:23《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：分支管理，分支合并merge将功能性分支合并到主分支，此时会在master分支产生一个新的commit记录K A---B---C---D---E---F master \ G---H---I---J feature_1注意：大写字母表示commit记录git checkout mastergit merge feature_1git pu

2020-06-09 18:04:17 643

原创 JavaScript Date对象详解和实例

*最新更新时间：2020年05月28日13:59:00《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：Date对象，用于处理日期和时间创建Date对象var date = new Date();var date = new Date(milliseconds);var date = new Date('Fri Mar 24 2017 16:42:54 GMT+0800 (中国标准时间)');var date = new Date(year,month,day,hours,minu

2020-05-28 14:29:20 262

原创在swiper页面实现指定区域内容横向滚动的方案

最新更新时间：2020年05月27日16:31:43《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：页面部分内容横向滚动固定宽高区域中图片横向滚动需要面临的几个问题：可滚动区域的内容，滚动的时候swiper页面禁止左右滑动，dom元素需要添加swiper-no-swiping类名隐藏横向滚动条，需要增加一个中间层的dom元素<style>.scrollBox{ display: inline-block; width: 200px;/* 宽度固定 *

2020-05-27 16:44:22 3217 2

原创使用CSS和JS做移动端样式兼容性适配的方案

最新更新时间：2020年05月27日15:26:14《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：移动端不同机型、不同设备的样式兼容性方案汇总机型屏幕宽高，物理尺寸屏幕分辨率，物理尺寸上的像素点个数，单位px，window.innerHeight 和 window.innerWidth-真机浏览器模拟器真机小程序webviewiPhone 5-320*568-iPhone 6/7/8-375*667-iPhone 6/7/8 P

2020-05-27 15:56:41 718

原创阻止事件执行的三种方法(preventDefault、stopImmediatePropagation、stopPropagation)横向对比

最新更新时间：2020年05月27日10:57:02《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：Event对象的一些知识点，事件注册、事件对象、阻止事件概述Event 接口表示在 DOM 中发生的任何事件; 一些是用户生成的（例如鼠标或键盘事件），而其他由 API 生成（例如指示动画已经完成运行的事件，视频已被暂停等等）。为DOM元素注册事件处理函数的三种方式方式一：EventTarget.addEventListenermyButton.addEventListen

2020-05-27 13:19:33 2642

原创固定宽度容器中实现文本超过三行显示...的布局

最新更新时间：2020年05月09日16:23:26《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：在固定宽度容器内，文本以预设的固定行数显示，如果超过设定的行数，以…结尾显示效果如下布局和样式<div className={styles.box}> <div className={styles.text}>这个文本可能会很长，超过三行会以三个点显示。</div></div>.box { width: 100%; ba

2020-05-09 17:16:02 323

原创小程序中监听webview页面点击返回按钮

最新更新时间：2020年04月14日15:04:24《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：小程序退出webview组件之前，在H5页面中进行部分业务逻辑开发概述问题描述小程序中使用webview组件，加载了一个H5的URL链接，web项目采用react架构，用户在页面进行了相关的操作，当用户点击左上角原生返回按钮的时候，在react组件中的component...

2020-04-14 16:00:31 7355

原创 Canvas学习记录之drawImage

最新更新时间：2020年03月16日01:06:23《猛戳-查看我的博客地图-总有你意想不到的惊喜》概述本文内容：本文介绍基于drawImage()绘制图片的一些基本用法，基本图片、固定坐标图片、图片裁剪、图片宽高比压缩、圆角图片、圆形头像图片drawImage(image, x, y)从画布坐标(x,y)开始绘制图片，图片不会被裁剪，宽高比保持不变drawImage(...

2020-03-16 01:06:46 1089

原创 Canvas学习记录之fillText

最新更新时间：2020年03月14日16:20:22《猛戳-查看我的博客地图-总有你意想不到的惊喜》概述本文内容：本文介绍基于fillText()绘制文本的一些基本用法，基本文本(字号、色值、字体)、填充文本、描边文本、自动换行文本、左对齐、右对齐、水平居中、垂直居中、在水平方向基于x轴某点中心对称、水平垂直居中fillText(text, x, y [, maxWidth]);...

2020-03-14 16:27:26 4593 2

原创 Canvas学习记录之rect

最新更新时间：2020年03月14日14:29:22《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：本文介绍基于rect()绘制矩形路径的一些基本用法，矩形、正方形、圆角矩形、线性渐变矩形、辐射渐变圆形rect绘制一个矩形，四个入参依次为：起始点x轴坐标 (起始点为矩形左上角定点)、起始点y轴坐标、宽度、高度canvas画布的原点坐标(0,0)为左上角ctx.re...

2020-03-14 14:29:51 1386

原创 Canvas学习记录之arc

最新更新时间：2020年03月14日00:58:55《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：本文介绍基于arc()绘制圆弧路径的一些基本用法，圆弧、圆形、环形、球形、扇形、饼状图创建二维渲染上下文var canvas = document.getElementById('canvas');var ctx = canvas.getContext('2d');arc...

2020-03-14 01:08:16 1052

原创 git学习总结之fsck、reflog、恢复已删除分支

最新更新时间：2020年03月12日12:09:55《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容：git常用命令fsckgit fsckfill system check 文件系统检查，用来对本地和远程仓库的一致性检查，dangling objects悬空对象在悬空对象列表中，使用git show commitId查看悬空记录的详情，git merge commi...

2020-03-12 13:03:33 3890

空空如也

空空如也