自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(47)
  • 收藏
  • 关注

原创 husky 报错npm: command not found

我是mac环境下,由于使用了nvm,不能正确识别node路径,执行代码提交后,husky一直报错:.husky/pre-commit: line 8: npm: command not found查询husky官方文档才知道如何解决:创建~/.huskyrc文件,增加对nvm路径的支持:# ~/.huskyrc# This loads nvm.sh and sets the correct PATH before running hookexport NVM_DIR="$HOME/.nvm"

2022-03-31 11:24:37 3544 7

原创 最长递增子序列

最长连续递增子序列

2022-03-03 19:22:13 20

原创 OAuth

https://www.ruanyifeng.com/blog/2014/05/oauth_2_0.htmlhttp://www.ruanyifeng.com/blog/2019/04/oauth_design.htmlhttps://www.ruanyifeng.com/blog/2019/04/oauth-grant-types.htmlhttps://www.ruanyifeng.com/blog/2019/04/github-oauth.html

2022-02-23 10:02:37 31

原创 比较HTTP/HTTP1.1/HTTP2/HTTP3

1.HTTP在 HTTP/1 中,为了性能考虑,我们会引入雪碧图、将小图内联、使用多个域名等等的方式。这一切都是因为浏览器限制了同一个域名下的请求数量(Chrome 下一般是限制六个连接),当页面中需要请求很多资源的时候,队头阻塞(Head of line blocking)会导致在达到最大请求数量时,剩余的资源需要等待其他资源请求完成后才能发起请求。HTTP 版本中,我们是通过文本的方式传输数据。在 HTTP/1 中,我们使用文本的形式传输 header,在 header 携带 cookie 的情况

2022-02-14 19:39:19 750

原创 前端表单提交HTTP请求头编码类型相关知识

表单提交要设置Content-Type,分为两种类型application/x-www-form-urlencoded和multipart/form-data1.application/x-www-form-urlencoded其中application/x-www-form-urlencoded用来提交字符串类型数据,参数的格式为key=value&key=value。2.multipart/form-datamultipart/form-data提交二进制数据。注意:上传文件也要指

2021-11-02 17:16:08 531

原创 js文件分块转base64文本

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <titl

2021-10-28 16:38:57 101

原创 ES2019 重点总结

1.Array.prototype.flat()Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维的数组。该方法返回一个新数组,对原数据没有影响。flat(depth),flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,depth默认为1。const arr1 = [1, 2, [3, 4]];arr1.flat();// [1, 2, 3, 4]const arr2 = [1, 2, [3

2021-03-21 18:23:28 104

原创 ES2018 重点总结

1.for await of(1)for await of和for…of的对比及使用for…of循环用于遍历同步的 Iterator 接口,for await…of循环用于遍历异步的 Iterator 接口。function Gen (time) { return new Promise(function (resolve, reject) { setTimeout(function () { resolve(time) }, time) })}// for

2021-03-20 18:06:47 125

原创 ES2017重点总结

1.async/awaitasync 就是 Generator 函数的语法糖。async函数将 Generator 函数的星号(*)替换成async,将yield替换成await。Generator 函数的返回值是 Iterator 对象,而async函数的返回值是 Promise 对象。(async 函数显式返回的不是 Promise 的话,会自动包装成 Promise 对象)await 不可以脱离 async 单独使用。一旦遇到await,会等到异步操作完成,再接着执行函数体内后面的语句。a

2021-03-18 00:50:32 259

原创 ES2016重点总结

1.Array.prototype.includesbefore:使用Array.prototype.indexOf()来确定数组中是否含有某个元素,因为该方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];console.log(beasts.indexOf('bison'));// expected output: 1// start from ind

2021-03-16 23:44:06 70

原创 js之导入导出

导出表达式式导出// 导出变量/常量export const name = 'hello'export let addr = 'BeiJing City'export var list = [1, 2 , 3]// 导出函数export function say (content){ console.log(content);}export function run (){ console.log('run')}// 导出对象export ({ code: 0, me

2021-03-14 23:15:28 229

原创 js之Iterator

迭代器的应用数据处理:汇总下面对象中的数字let a = { b: { c: [ '1', '2', '3' ], d: [ '4', '5', '6', '7' ], e: [ '8', '9',

2021-03-14 22:11:16 270

原创 js之generator

基本使用Generator 函数是 ES6 提供的一种异步编程解决方案.生成器函数在执行时能暂停,后面又能从暂停处继续执行。Generator 函数function关键字与函数名之间有一个星号;函数体内部使用yield表达式,定义不同的内部状态(yield在英语里的意思就是“产出”)function* name([param[, param[, ... param]]]) { statements }调用一个生成器函数并不会马上执行它里面的语句,而是返回一个这个生成器的 迭代器 ( iterator

2021-03-14 10:36:20 492

原创 js之proxy

Proxy 对象用于创建一个对象的代理,从而实现基本操作的拦截和自定义(如属性查找、赋值、枚举、函数调用等)。语法// target: 要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。// handler: 一个对象,该对象的属性值通常是函数,定义了代理各种操作时p的行为。对象上的属性名是特定且可选的,如果没有某个属性,就会保留源对象的默认行为。const p = new Proxy(target, handler)handler 对象的方法有:

2021-03-14 00:08:00 488

原创 js之Reflect

Reflect 是一个内置的对象,它提供拦截 JavaScript 操作的方法,是 ES6 为了操作对象而提供的新 API。Reflect不是一个函数对象,因此它是不可构造的。Reflect的所有属性和方法都是静态的。意义现阶段,某些方法同时在Object和Reflect对象上部署,未来的新方法将只部署在Reflect对象上。修改某些Object方法的返回结果,让其变得更规范化。如Object.defineProperty(obj, name, desc)在无法定义属性时,会抛出一个错误,而Re

2021-02-28 23:20:56 7266

原创 js 解构赋值

1. 数组的解构赋值// 对不需要的值,使用',',将该该值略过。const [first, , third, ...rest] = [1, 2, 3, 4, 5];console.log(first) // 1console.log(third) // 3console.log(rest) // [4, 5]const [a, b = 'default'] = []console.log(a,b) // undefined 'default'String、Set、Map等所有可遍历对

2021-02-22 22:12:40 607

原创 js正则表达式的修饰符

1. i修饰符ignore - 不区分大小写: 将匹配设置为不区分大小写,搜索时不区分大小写: A 和 a 没有区别。2. g修饰符global - 全局匹配:查找所有的匹配项。3. m修饰符multi line - 多行匹配:使边界字符 ^ 和 $ 匹配每一行的开头和结尾,记住是多行,而不是整个字符串的开头和结尾。es6新增4. y修饰符sticky -“粘连”修饰符: y修饰符的作用与g修饰符类似,也是全局匹配,后一次匹配都从上一次匹配成功的下一个位置开始。不同之处在于,g修饰符只要剩

2021-02-18 20:49:29 967

原创 js数据结构之Map

1. 定义Map 对象保存键值对,并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。键的比较:NaN 是与 NaN 相等的(虽然 NaN !== NaN),剩下所有其它的值是根据=== 运算符的结果判断是否相等。创建:let map = new Map([iterable])Iterable 可以是一个数组或者其他 iterable 对象,其元素为键值对(两个元素的数组,例如: [[ 1, ‘one’ ],[ 2, ‘two’ ]])。 每个键值对都会添加到新的 M

2021-02-17 22:04:51 553

原创 js数据结构之Set

1. 定义Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用。Set中的元素只会出现一次,即 Set 中的元素是唯一的。2.实例属性和方法Set.prototype.size返回 Set 对象中的值的个数Set.prototype.add(value)在Set对象尾部添加一个元素。返回该Set对象。Set.prototype.clear()移除Set对象内的所有元素。Set.prototype.delete(value)移除Set中与这个值相等的元素,返回Set.pro

2021-02-17 21:12:15 251

原创 js函数的不定参数

es5function sum () { let num = 0 // arguments是伪数组使用数组方法需要先转换为数组 Array.prototype.forEach.call(arguments, function (item) { num += item * 1 }) return num}es6es6中不建议使用arguments,故使用展开运算符存储参数function sum (...nums) { let num = 0 nums.forE

2021-02-17 14:21:16 4435

原创 js参数的默认值

es5:function f (x, y, z) { if (x === undefined) { x = 0 } if (y === undefined) { y = 1 } if (z === undefined) { z = 2 } return x + y + z}es6:function f (x = 0, y = 1, z = 2) { return x + y + z}// 注意,如果中间的参数想使用默认值,那么给其赋值u

2021-02-17 14:11:20 353

原创 js的继承

ES6的继承class Parent0 { constructor (name = 'parents0') { this.name = name }}class Child0 extends Parent0 { constructor (type = 'child0') { super() // 无需定义父类之外额外属性时,constructor和super皆可省略,构造函数会隐式执行。 this.type = type }}let s0 = ne

2021-02-16 22:24:14 56

原创 js静态方法

es5:let Person = function (type) { this.type = type}// 静态方法Person.breathe = function () { console.log('breathing')}// 原型上的方法Person.prototype.speak = function () { Person.breathe() console.log('hhhhhh')}let student = new Person('student')

2021-02-16 21:27:34 301

原创 js类属性的setter和getter

在“类”的内部可以使用get和set关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。class A { constructor () { this._a = 'a' } set a (val) { if (Object.prototype.toString.call(val) !== '[object String]') { this._a = 'error' } else { this._a = val } }

2021-02-16 21:07:33 498

原创 js的类

es5:let Person = function (type) { this.type = type}Person.prototype.speak = function () { console.log('hhhhhh')}let student = new Person('student')let teacher = new Person('teacher')student.speak = function () { console.log('I love studyin

2021-02-16 20:42:08 35

原创 js数组方法find()和findIndex()

查找数组es5:let resultlet arr = [1, 2, 3, 4, 5]let findArr = arr.filter(item => { return item === 4})if (findArr.length !== 0) { result = true} else { result = false}es6:findfind() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。let arr = [1, 2, 3,

2021-02-16 20:19:45 2611

原创 js数组方法Array.fill

Array.fillarr.fill(value[, start[, end]])fill() 方法用一个固定值填充一个数组中,从起始索引到终止索引内的全部元素,不包括终止索引,返回被修改后的数组。value:用来填充数组元素的值。start:起始索引,默认值为0。end:终止索引,默认值为 this.length。// 填充数组const arr = Array(3).fill(1); // [1, 1, 1]const arr1 = [1,2,3,4,5].fill(0,1,3)

2021-01-24 14:50:59 2277

原创 js数组方法Array.of

Array.of根据参数(参数数量不定),生成新数组。除了Array.of外,以下数组类型也具备of方法,方法功能类似。Int8ArrayUint8ArrayUint8ClampedArrayInt16ArrayUint16ArrayInt32ArrayUint32ArrayFloat32ArrayFloat64Arrayconst arr1 = Array.of(1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]const arr2 = Array(1, 2,

2021-01-24 14:38:01 382

原创 js伪数组转数组

伪数组转数组伪数组:按索引方式储存数据具有length属性let arrLike = { 0: ‘a’, 1: ‘b’, 2: ‘c’, length: 3}常见伪数组arguments、NodeListES5:function test () { let args = [].slice.call(arguments) let imgs = [].slice.call(document.querySelectorAll('img'))}ES6:function te

2021-01-23 23:53:16 85

原创 js数组遍历方法及其区别

1.for循环支持break和continueconst arr = [1, 2, 3, 4, 5]for (let i = 0; i < arr.length; i++) { if (arr[i] === 1) { continue } else if (arr[i] === 4) { break } else { console.log(arr[i]) }}// 2 32.forEach不支持break和continueconst ar

2021-01-23 22:51:02 89

原创 js的作用域以及let和const

一、作用域作用域类型:1.全局作用域2.局部作用域3.块状作用域4.动态作用域1.全局作用域变量在函数或者代码块{}外定义,即为全局作用域。这里需要注意一点:全局变量和全局对象上window的属性的区别。在全局作用域内,使用var 声明的为全局变量,未使用var声明的为window的属性。var a = 1b = 2delete b // 返回true,等同于delete window.bconsole.log(b) // Uncaught ReferenceError: b is

2021-01-23 21:51:28 416

原创 vue插槽的用法

原文链接1. v-slotvue插槽有两种:具名插槽和作用域插槽,2.6.0以后,使用新语法v-slot指令(缩写为#)将两种语法统一起来。老旧的语法,这里不再赘述,参见vue官网。下面讲讲新语法的用法。<!-- 后备内容显示用户的名,以取代正常情况下用户的姓 --><!-- 父组件 --><!-- 要用template包裹,slot名称为slotNa...

2019-12-12 10:31:25 187

原创 js实现“3天打雨,两天晒网”

从1990年1月1日开始,3天打鱼,2天晒网。输入任意一个日期(格式为xxxx-xx-xx),判断那天是打鱼还是晒网。打鱼返回’He is working’,晒网返回 ‘He is having a rest’。日期或格式不正确输出’Invalid input’。function fishOrRest (string) { let arr = string.split('-').map(it...

2019-11-15 20:04:03 515

原创 Three.js如何加载本地资源?

动机模型资源往往比较大,数据内容变动不大,可重复利用率不高。频繁请求比较浪费网络资源,加载到本地可以既可以节约请求,充分利用资源,并且可以节省用户下载时间,提高用户体验。那么怎么做才能实现我们的需求呢?方案(1)存考虑用indexDB将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据。IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer...

2019-09-05 16:00:11 4445 9

原创 vue实现手动动态挂载某个组件

我们在开发中,可能会碰到这样的情况:我们需要在某个时刻 在一个动态生成的元素上 挂载某个组件,那么我们该怎么实现呢?例如,我们在点击按钮之后,在某个div上手动挂载一个组件。 <button onclick="handleClick()"></button> <div id="container"></div>import Vue fro...

2019-08-07 11:46:34 7162

原创 为什么控制台打印事件对象e时里面的currentTarget为null,而打印e.currentTarget时为DOM对象?

<!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-UA-Comp...

2019-06-17 17:28:56 2115

转载 js原生实现元素拖拽

<!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-U...

2019-04-19 15:31:41 156

转载 将接口请求到的数据下载下来存储在本地

function funDownload(content, filename) { let cont = JSON.stringify(content); // 创建隐藏的可下载链接 var eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.di...

2019-03-08 16:09:58 2462

原创 几种方法实现上下固定中间自适应布局

HTML:&lt;div class="top-center-bottom"&gt; &lt;div class="top"&gt;top&lt;/div&gt; &lt;div class="center"&gt; 视口单位(Viewport units)&lt;br&gt;

2019-02-27 19:32:54 2329

原创 [实战]input失焦事件先于点击事件发生时怎么办?

例子:看上面这个例子,我们的需求是:点击备注表格时,该表格变为可编辑状态的输入框,会出现输入框、两个按钮。点击对勾时,会修改备注发送给后端修改请求,修改备注,变为不编辑状态,输入框、按钮消失。失去焦点时,输入框同样变为不可编辑状态,输入框、按钮消失。问题的关键在于,input失焦事件总是先于对勾按钮的点击事件发生的。即当我们点击按钮对勾时,已经先失去了焦点,将按钮隐藏了。因此根本不可能...

2019-02-12 15:16:12 2040

空空如也

空空如也

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

TA关注的人

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