自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

万少博-FE

记录学习,积累经验

  • 博客(157)
  • 收藏
  • 关注

原创 前端漫漫路

最近更新时间: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 465

原创 我的博客地图

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

2018-01-27 12:04:59 3651

原创 常用工具方法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 28

原创 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 10

原创 常见错误语法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 38

原创 服务器运维学习总结

最新更新时间: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 22

原创 在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 42

原创 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 64

原创 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 58

原创 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 37

原创 在不刷新和不跳转页面的情况下向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 210

原创 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 54

原创 工作中遇到的问题

最新更新时间: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 62

原创 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 132

原创 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 427

原创 移动端开发问题汇总

最新更新时间: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 82

原创 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 427

原创 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 302 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 1636 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 168

原创 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 353 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 178

原创 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 319

原创 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 2219 2

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

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

2020-07-07 16:46:59 1471

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

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

2020-06-27 12:06:29 1800

原创 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 355

原创 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 102

原创 在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 1613 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 330

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

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

2020-05-27 13:19:33 757

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

最新更新时间: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 130

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

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

2020-04-14 16:00:31 4724

原创 Canvas学习记录之drawImage

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

2020-03-16 01:06:46 209

原创 Canvas学习记录之fillText

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

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

原创 Canvas学习记录之rect
原力计划

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

2020-03-14 14:29:51 237

原创 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 101

原创 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 965

原创 在移动端用canvas技术实现一个画板的工程实例
原力计划

最新更新时间:2020年03月11日22:07:14《猛戳-查看我的博客地图-总有你意想不到的惊喜》本文内容:在研发C端教育类产品的时候,会遇到在作答题目的时候需要验算或者做草稿,因此诞生了一个草稿本或者小黑板的功能模块,本文统称为画板。本文基于canvas技术,深入讨论实现一个画板功能的原理和核心代码。成品示例图画板的功能包括两部分:控制面板区和绘画区,控制面板区如下图上半部分,集...

2020-03-11 23:22:56 195

原创 研发C端产品我遇到的线上事故

最新更新时间:2020年03月03日23:44:03《猛戳-查看我的博客地图-总有你意想不到的惊喜》概述文章主题背景:从业前端开发至今(2016-2020)已有4年时间,有幸在新东方团队参与了用户量过百万的C端产品,经历了从0到1的研发过程,期间参与了技术架构设计、第一次上线面向用户、技术团队管理、项目架构管理、多团队多岗位配合沟通、多人协同开发中代码管理和需求分配、代码审核和分支管理、技...

2020-03-07 20:08:16 184

空空如也

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除