![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
日常总结
文章平均质量分 78
haoyanyu_
这个作者很懒,什么都没留下…
展开
-
业务代码codereview规范
为什要要codereview新功能开发好上线前,一般都要进行codereview,在codereview过程中,可以发现一些问题,提早规避线上问题或故障;也可以规范代码,大家互相学习和进步。codereview原则先看代码可读性和规范性,其次再考虑抽象和复用,最后考虑性能comments不能省略,留下记录很重要,最好是面对面codereview每次review的规模不应该太大,200行左右,不要超过800行虚心接收别人的comments常规问题检查代码是否能实现预期功能代码格式是否规原创 2021-03-10 17:20:21 · 448 阅读 · 0 评论 -
vsCode自定义代码片段,生成个性化代码模板
在vscode编辑器里开发代码时会发现,vscode内置了一些语言的代码片段,会在智能提示框里一起出现,帮助自动补全代码,用起来很方便。这些代码片段是通过snippets来实现的,在扩展市场里提供里各种语言的代码片段那么这些snippets是如何实现的呢?如果我们自己业务开发中经常用到的代码也能在编辑器里智能补全的话,就可以省去很多重复的工作,大大提升开发效率。本文就来汇总一下,开发自定义snippets的几个步骤,简单几个步骤,配置出适合自己的vscode找到配置用户代码片段的入口入口一:在原创 2021-03-03 18:35:37 · 888 阅读 · 0 评论 -
ArrayBuffer、TypedArray、DataView的关系
三者关系ArrayBuffer是原始的二进制数据缓冲区。TypedArray是描述一个底层的ArrayBuffer的类数组视图。DataView视图是可以从ArrayBuffer对象中读写多种数值类型的底层接口。ArrayBufferArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区,是一个字节数组。只能通过TypedArray和DataView来操作其内容。ArrayBuffer的格式如下:通用属性:ArrayBuffer.prototype.byteLengt原创 2021-01-08 16:00:07 · 542 阅读 · 0 评论 -
hosts文件究竟是干嘛用的?位置在哪?格式是什么?
hosts文件的作用1. 加快域名解析在浏览器输入域名后,浏览器会先去hosts文件查找域名跟IP的映射关系,当查到后直接访问对应的IP地址,否则会用域名去DNS解析,解析出IP后再访问,通过hosts可以节省DNS解析这一个过程,快速访问网站2. 方便局域网用户在局域网中,一般很少部署DNS服务器,如果让大家通过IP地址访问系统,也太不人性化了,因为需要记住很多IP,这个时候通过hosts的映射关系可以直接访问局域网中服务器的IP地址。3. 屏蔽网站当一些网站频繁干扰冲浪或者不想.原创 2020-12-12 21:05:36 · 2045 阅读 · 0 评论 -
去掉chorme浏览器自动补全时input框的背景样式
input开启自动补全后,选择内容后input框背景颜色变成了淡蓝色,手动填写的input背景不会变化,如下图:原创 2020-11-22 15:11:35 · 825 阅读 · 1 评论 -
js实现行内多个元素动态均匀分布
需求背景平台首页有选货市场,商品大图展示时,要求根据浏览器宽度均匀排布。即浏览器宽度不同,一行展示的商品数量不同,通过改变外边距,让商品均匀填充满容器盒子。原实现方案通过css的flex布局和justify-content: space-between让商品元素均匀排布。效果如下:可见,当商品铺差不多够满了一行时展示效果是ok的,不足一行时,就会有问题。新思路不再用flex布局,使用float浮动,让商品元素一行展示;根据父容器的宽度,计算出一行可以展示的数量 n;计算每个商品的mar原创 2020-10-20 15:49:10 · 1576 阅读 · 0 评论 -
css隐藏滚动条只需三行代码
.manage-suggest-scroll { flex: 1; overflow-y: scroll; /** IE下隐藏滚动条 */ -ms-overflow-style: none; /*火狐下隐藏滚动条*/ scrollbar-width: none; /** Webkit内核浏览器 */ &::-webkit-scrollbar { display: none; .原创 2020-10-20 11:43:24 · 254 阅读 · 0 评论 -
canvas系列 — canvas改变画布大小后,画布变空白的原因及解决方案
前言之前记录过canvas常用的api的含义这些理论知识下面通过几个实战????来加深对canvas的理解和使用(以下代码都是基于vue3的,顺道一起学习,一举两得????)css和js都可以控制画布大小的改变,但是css里只是让画布像图片一样缩放,内部的像素大小是不变的。直接在html标签中设置width和height属性或者使用JavaScript也可以改变画布的尺寸,这个时候就不是缩放画布了,而是真正的改变了画布内的像素大小。???? 例子 ????改变canvas大小,画布会变空白的原因原创 2020-09-13 17:38:12 · 4521 阅读 · 1 评论 -
canvas系列 — canvas常用API介绍
1. Canvas APICanvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。在html里的形式是:<canvas id="canvas"></canvas>js里:Document.getElementById() 方法获取HTML <canvas> 元素的引用。接着,HTMLCanvasElement.getConte原创 2020-09-13 17:26:11 · 6130 阅读 · 0 评论 -
微信小程序:随页面滚动渐变的顶部导航组件
需求:进入页面时,没有导航栏,随着页面向上滚动,滚动条透明度逐渐变清晰,最后全部展示出来。随着页面向下滚动,导航栏再逐渐消失思路:一个fixed定位的导航栏组件,外部传入opacity来控制css属性来控制透明度。页面使用时,在onPageScroll里用throttle防抖方法在滚动时改变opacity核心代码:// gradient-bar.jsconst { SDKVersion, version, statusBarHeight } = wx.getSystemInfoSync();原创 2020-08-15 21:56:21 · 2605 阅读 · 0 评论 -
微信小程序之将页面滚动到顶部或者目标位置wx.pageScrollTo
将页面滚动到指定位置有两种情况:页面滚动到顶部;滚动到某个元素的位置;wx.pageScrollTo()可以实现以上两种需求,具体用法如下综上:对于情况一,页面滚动回顶部,直接设置scrollTop: 0:wx.pageScrollTo({ scrollTop: 0});注意:重点!重点!重点!以上代码要生效的前提是,当前页面高度超过一屏对于情况二,滚动到目标位置,需要用selectorwx.pageScrollTo({ selector: '#hot-title'原创 2020-08-11 20:28:10 · 14679 阅读 · 2 评论 -
微信小程序之1rpx的边框在部分机型上展示不全的问题
最近写小程序的商品列表时,商品卡片里需要展示商品的【优惠券】或者【包邮】标签。设计稿里,标签的边框是0.5px, 在微信小程序里就是1rpx的宽度。测试的时候发现在一部iphone6手机上,【包邮】的右边框展示不完整,如下图:测试数据没有商品图片,忽略忽略,看【包邮】标签就好 ????包邮标签的样式写在css里,border: 1rpx solid #FF4444;border-width改成2rpx(即1px)是可以正常展示的,只不过边框变宽了,但是要按照稿子来啊*(审美缺失部的名头可是原创 2020-08-10 15:24:29 · 1387 阅读 · 0 评论 -
小程序瀑布流布局的实现方案
文章目录瀑布流布局1. 高度固定的横向瀑布流2. 宽度固定的纵向瀑布流2.1 一次性渲染所有元素2.2 当需要动态加载新数据时情况一:每次获取到的数据数量相同情况二:每次获取到的数据数量不确定情况三: 元素之间高度差变大,每次的数量也可能不一样Masonry插件小程序的实现细节2.3 项目中遇到的情况????????????????总结????????????瀑布流是现在很流行很常见的一种布局,表现为参差不齐的多栏布局,产品很喜欢用。刚开始写小程序就遇到了瀑布流的需求,也是有点刺激~~瀑布流布局瀑布原创 2020-08-06 23:29:33 · 2595 阅读 · 1 评论 -
vue-cli3搭建的项目遇到Syntax Error: **/path/:Missing class properties transform.
事情经过是这个样子的:????有一天下午,天气晴朗,肚子有点饿,但是还不到下班时间,没心思敲业务代码了,于是灵机一动,在vue-cli3搭建的项目里动手实现一个event bus类吧。于是一顿猛敲class EventBus { constructor() { this._events = this._events ?? new Map(); } // 触发事件 fire = (event, ...args) => { // ... } // 添加事件监听原创 2020-08-03 17:46:27 · 2449 阅读 · 1 评论 -
vue组件间通信技巧--父子组件,兄弟组件,隔代组件
1. 父子组件方法一:父组件传递参数给子组件通过props如下:// 父组件<template> <div> <hello-world msg="hello world"/> </div></template><script>import HelloWorld from './components/HelloWorld.vue';export default { name: 'App', co原创 2020-07-15 16:08:57 · 729 阅读 · 0 评论 -
持续更新:每日一道面试题 — 今天的你比昨天更博学了吗?
1. es2020知识点Q:// x最终返回值是什么??var obj = {};var x = +obj.hyy?.name ?? 'hello world!';console.log(x);A:NAN解析:?是链判断运算符,如果值不存在,则返回undefined;??是如果左侧是null或者undefined则返回右侧的值,否则返回左侧值;+转成数字;如果不是数字返回NaN。所以最终就是:+undefined ?? ‘hello world!’ 即 NaN ?? ‘hello原创 2020-06-22 17:53:11 · 327 阅读 · 0 评论 -
PPT模板免费下载--好用的下载网站推荐
最近写PPT的频率有点多,多到什么程度呢,毕业5年一共写了大概8次PPT,其中今年就写第三次了。。。。PPT写的丑怎么办,只能靠好看的模板撑场子了。。推荐两个免费下载好看的高级的实用的选择很多的PPT模板的网站吾道 https://www.woodo.cn/海量模板,主题丰富,可在线编辑,可下载到本地创客贴https://www.chuangkit.com/海量模板,可在线编辑,可以下载到本地;不同的是他还提供了其他场景,不仅限于PPT,还提供了海报,公众号封面等,如下:有个共原创 2020-06-21 20:48:13 · 507 阅读 · 0 评论 -
URL查询字符串的处理小妙招——URLSearchParams
URLSearchParamsURLSearchParams接口定义了一些很实用的处理URL查询参数的方法;例如:从查询参数里获得某个属性的值,把一个对象转成查询参数,修改查询参数等。以前不知道这个接口的时候,是用正则表达式来处理,好痛苦的呢。直接用在 for…of 结构中一个实现了 URLSearchParams 的对象可以直接用在for...of结构中(跟map很像);for (const [key, value] of mySearchParams) {}for (const [key,原创 2020-06-15 17:39:33 · 837 阅读 · 0 评论 -
React Hook之useCallback和useMemo的使用和源码分析
如何使用感觉useCallback和useMemo两者很像,前者返回一个memorized的回调函数,后者返回一个memorized的值。看一下他们是如何定义的useCallback接受一个回调函数和依赖项数组作为参数,返回回调函数的memorized版本// useCallbackuseCallback<T>(callback: T, deps: Array<mixed> | void | null): T当这个回调函数传递给自组件时,可以用useCallbac原创 2020-06-15 16:57:56 · 915 阅读 · 0 评论 -
React Hook之useEffect的使用和源码分析
作用副作用前端开发中的副作用一般有:dom操作、浏览器事件的绑定和取消绑定、http请求、打印日志、访问系统状态、执行IO更新等。在class类组件中,副作用一般写在componentDidMount,componentDidUpdate, componentWillUnMount, componentWillUpdate里,但是函数组件没有生命周期,这个时候就可以用useEffect来解决了,这一个hook可以替代以上四个生命周期;useEffect的使用useEffect是组件第一次渲染和每次原创 2020-06-07 22:06:59 · 924 阅读 · 1 评论 -
React Hook之useState、useReducer的使用和源码分析
React Hook16.8以前一般使用类组件或者函数组件;前者有完整的生命周期API,可以管理组件状态,但是this指向在使用时需要格外注意一;一般通过HOC实现复用;通过shouldComponentUpdate()或者PureComponent组件进行性能优化,防止不必要的更新。后者是函数组件,一般是传入的数据进行展示,没有生命周期,只有props,是无状态组件;16.8以后新增了React Hook特性,它是函数组件,但是通过hook钩子可以管理内部状态,而且可以调用生命周期;通过钩子的原创 2020-05-25 19:35:01 · 1297 阅读 · 0 评论 -
make命令的简单用法
最近发现公司已有项目中有个Makefile文件,构建项目用的。以前好像在Linux系统里见到过下面就通过项目里makefile文件的配置内容学习记录一下make是怎么用的。make基本规则语法# 定义规则target: prerequisities[tab] commands# 执行make targettarget: 要生成的文件名或伪目标(只要target在当前目录下不存在,就会构建,否则执行命令也不会有任何反应)prerequisite: 前置条件(重新构建的判断依据,只要这两原创 2020-05-11 18:36:13 · 1613 阅读 · 0 评论 -
给大金额数字添加逗号分隔符
方法一:思路:split()方法截取整数部分,整数部分reverse()后,每隔三位插入一个逗号,最后一个三位不加逗号。方法二:利用正则/** * 格式化金钱格式 * @memberof module:money * @param {number} value 待格式化的金额数字 * @param {boolean} cent 是否是分 * @param {boolean} showComma 是否显示千分位逗号 * @returns {string} 格式化原创 2020-05-09 09:58:57 · 5530 阅读 · 0 评论 -
typescript学习重难点总结--可索引类型,interface, type, 泛型, keyof,工具泛型等
ts代码编译原理核心原则之一:对值所具有的结构进行类型检查(鸭式辩型)ts数据类型ts的数据类型基础的有string, number, boolean, any, null, undefined, never, 数组类型等等等。ts里还有一些内置类型例如在html中DOM元素的一些类型,实现复制功能时用到过HTMLTextAreaElement, Selection,Range等点击...原创 2020-04-23 15:13:44 · 3689 阅读 · 0 评论 -
css--实现img图片填充,剪裁效果
业务背景实现一个轮播图,轮播区域宽度自适应,高度100px; 图片分辨率由用户上传获得。为了让图片不变形,需要对图片进行居中裁剪。实现使用css的属性 object-fit: cover原理css可替换元素展示效果不是由css决定,是一种外部对象, 它们外观的渲染独立于csscss不会影响到其中内容的展示,只能改变它的位置,和内容在框里的位置或者定位方式。例如object-...原创 2020-04-20 14:48:34 · 10940 阅读 · 0 评论 -
typescript基础——函数
定义函数函数的输入输出要进行类型的定义,函数的参数一旦定义好以后,输入多或者少都是会编译报错的,返回类型也必须跟定义的一致;// 1function fun(a: string, b: number): number { return parseInt(a + b);}// 2 这种写法只对右侧的匿名函数进行了类型定义,左侧的funs只能通过类型推断得出const funs = ...原创 2020-04-11 18:11:12 · 131 阅读 · 0 评论 -
typescript基础——数据类型和类型断言
typescript是一种给javascript添加特性的语言扩展。扩展功能包括:类型批注和编译时类型检查类型推断类型擦除接口枚举Mixin泛型编程名字空间元组Await变量声明let [变量名]: [数据类型] = 值数据类型any 任意类型声明为any的变量可以赋予任意类型的值不明确变量类型时使用;改写现有代码时,在编译时选择性的包含或者移除类型检...原创 2020-04-07 15:29:01 · 766 阅读 · 0 评论 -
《css世界》笔记-文档流以及流的破坏与保护
《css世界》笔记何为“流”?“流”是CSS世界中的基本定位和布局机制;CSS世界构建的基石是HTML, html最具代表性的两个基石块级元素<div>, 内联元素<span>。流体布局: 就是利用元素“流”的特性实现的各类布局效果,因为“流”本身具有自适应特性。流体布局是自适应布局(凡是具有自适应特性的布局统称)的一种实现,例如表格布局设置为100%...原创 2020-04-06 23:00:26 · 341 阅读 · 0 评论 -
mac上安装nvm管理node版本以及nvm如何设置node默认版本
安装curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash验证输入nvm --version如果提示命令不存在可以重新打开终端试一下可能因为缺少.bash_profile文件运行touch ~/.bash_profile创建一个文件,输入一下内容export NVM...原创 2020-04-05 16:45:15 · 3110 阅读 · 2 评论 -
git踩坑系列 — git push时,报错 Commit validation failed for commit
开头一堆废话,可直接跳到文末事情是这样发生的:一直用vscode作为代码编辑器,终端也是用vscode自带的。某个阴天的上午,我准备git push我的代码,push之前,我先pull了一下远程代码,不巧的是,有冲突。于是,全神贯注的解决完冲突后,重新commit了一下,commit时,没有自己描述commit信息,而是用的vscode自动生成的Merge branch。。。。那一串描述文...原创 2020-04-03 16:00:42 · 1339 阅读 · 0 评论 -
关于如何生成sshkey
查看已有sshkeyls -al ~/.ssh如果有sshkey,直接复制内容即可生成新的sshkeyssh-keygen -t rsa -C "my-email@163.com"默认会在相应路径下(/your_home_path)生成id_rsa和id_rsa.pub两个文件复制sshkey内容macpbcopy < ~/.ssh/id_rsa.pubwindows...原创 2020-04-01 10:23:40 · 125 阅读 · 0 评论 -
利用canvas影像合成实现刮刮卡效果
文章目录Canvas对象CanvasRenderingContext2D合成刮刮乐效果的实现Canvas对象HTML的canvas元素;它定义了一个在客户端使用脚本绘图的API,可以直接为这个对象定义width和height。也可以用toDataURL()方法从画布中导出图片。不过实际绘图API是由getContent()方法返回的一个独立“上下文”对象 —> CanvasRend...原创 2020-03-30 16:02:41 · 203 阅读 · 0 评论 -
字节跳动一面的几道面试题
一面问题比较基础,但是由于平时使用vue+js, 字节跳动该岗位是react+ts,再加上面试表现的太紧脏,一面就凉凉了。。。。下面凭记忆还原一下面试题,都很常见,如有错误欢迎指出实现三列布局,左右宽度固定,中间列自适应我的答案:左右float, 中间用marginflex布局,左右固定宽度,中间flex: 1上下两个div,上面margin-bottom:20px, 下面margi...原创 2020-03-19 00:32:55 · 2093 阅读 · 0 评论 -
记一道字节跳动的面试题 js操作dom的执行顺序
面了一轮字节跳动,遇到一个面试题记录一下题目如下function demo () { const now = new Date().valueOf() document.body.style.backgroundColor = 'red'; while(new Date().valueOf() - now <= 2000) { continue; } document.bo...原创 2020-03-18 23:45:31 · 589 阅读 · 1 评论 -
window.performance对象
通过window.onpageshow的事件对象的persisted属性可以判断页面是否是从缓存读取的。但试了几次,不管刷新还是前进后退persisted都是false。查了一下看到一个新对象window.performance属性如下:其中有个navigation属性,里面的type也是来标记当前页面是刷新还是前进后退打开的memory表示js占用的内存情况;navigation....原创 2020-03-10 15:58:16 · 518 阅读 · 0 评论 -
document对象和window的常用事件
documentreadystatechange当document.readyState的值发生变化时就会触发以上事件readyState的值有:1. loadingDOM还在加载中(此时貌似js还没开始执行,js里捕获不到这个状态)2. interactiveDOM已经加载完毕,css,图片,iframe里的页面还没加载完($(document).ready()就是指这个时候即触...原创 2020-03-10 15:17:45 · 669 阅读 · 0 评论 -
js里的位运算|&^~>>
几种位运算的含义:| 按位或运算 0010 | 1000 = 1010 & 按位与运算 0010 & 1000 = 0000 ^ 按位异或运算 >> 右移一位,高位原本是1就补1,否则补0 << 左移一位,低位补零,高位移除 ~ 取反, 0变1, 1变0 举例子说明:(位运算前先把数字转为...原创 2020-03-08 20:49:16 · 1075 阅读 · 0 评论 -
cookie、session、Token、JWT究竟是怎么用的?
实际项目中经常用到cookie,session,token,知道是授权、验证用户身份用的,最近看了一个公众号文章,趁热记录一下它们究竟怎么工作的。凭证:访问应用时对用户进行身份认证和授权的东东。cookie和sessionhttp是无状态的协议,每个请求都是独立的,服务端无法确认当前访问者的身份,无法辨认是不是同一个人,这个时候需要维护一个状态,用来告知服务端发送来的请求是否来自同一浏...原创 2020-03-01 22:10:10 · 235 阅读 · 0 评论 -
mockjs在项目中的使用方法详解
Mockjs是一个模拟数据生成器,用于帮助前端开发,使其独立于后端进程,并减少一些单调性,特别是在编写自动化测试时。一、项目实战1. 安装mockjsnpm install mockjs --save-dev2. 引入mockjs,模拟数据// 新建一个mock.js文件import Mock from 'mockjs';const { Random } = Mock;cons...原创 2020-02-29 23:02:57 · 1661 阅读 · 0 评论 -
git踩坑系列 — git pull 代码时报错refusing to merge unrelated histories
出现场景:本地新建一个文件夹开始开发项目,开发完成后要同步到git仓库,此时在根目录运行以下指令git initgit add .git commit -m 'initial commit'git pull origin dev // 执行这里就报错了执行到git pull 时,会报题目显示的错误,主要还是因为这是两个独立的仓库此时git pull origin dev -...原创 2020-02-27 23:52:01 · 267 阅读 · 0 评论