- 博客(51)
- 收藏
- 关注
RSS订阅原创 设计模式（前端）
1.环境搭建1）初始化npm环境下载node.js执行npm init命令 (生成package.json)根目录下，新建src文件夹，src文件夹下新建index.js文件：alert("Hello World");2）安装webpacknpm install webpack webpack-cli --save-dev为了安装的快一点，使用npm.taobao.org淘宝镜像地址:npm install webpack webpack-cli --save-dev
2024-02-07 15:54:53
2223
1
原创 前端性能优化
一、速度为什么很重要？1.效果关乎留存用户BBC 发现其网站的加载速度每增加一秒，就会额外损失 10% 的用户。2.效果关乎转化次数的增加速度较快的网站可以提高转化率并改善业务成果。3.性能关乎用户体验对网页加载速度延迟的压力反应类似于观看恐怖电影或解决数学问题，并且比在零售店排队等候的压力更大。二、HTML 性能的一般注意事项该 HTML 的初始请求需要经历多个步骤，每一步都需要一些时间。减少在每个步骤上花费的时间，可加快至第一字节的时间 (TTFB)。虽然 TTFB 不是您在网页加载速度
2023-11-10 02:58:36
223
原创 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
10580
9
原创 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
83
原创 比较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
850
原创 前端表单提交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
1265
原创 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
256
原创 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
207
原创 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
243
原创 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
553
原创 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
146
原创 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
349
原创 js之Iterator
迭代器的应用数据处理：汇总下面对象中的数字let a = { b: { c: [ '1', '2', '3' ], d: [ '4', '5', '6', '7' ], e: [ '8', '9',
2021-03-14 22:11:16
406
原创 js之generator
基本使用Generator 函数是 ES6 提供的一种异步编程解决方案.生成器函数在执行时能暂停，后面又能从暂停处继续执行。Generator 函数function关键字与函数名之间有一个星号；函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）function* name([param[, param[, ... param]]]) { statements }调用一个生成器函数并不会马上执行它里面的语句，而是返回一个这个生成器的 迭代器 （ iterator
2021-03-14 10:36:20
611
原创 js之proxy
Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。语法// target: 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。// handler: 一个对象，该对象的属性值通常是函数，定义了代理各种操作时p的行为。对象上的属性名是特定且可选的，如果没有某个属性，就会保留源对象的默认行为。const p = new Proxy(target, handler)handler 对象的方法有：
2021-03-14 00:08:00
1286
原创 js之Reflect
Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法，是 ES6 为了操作对象而提供的新 API。Reflect不是一个函数对象，因此它是不可构造的。Reflect的所有属性和方法都是静态的。意义现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。修改某些Object方法的返回结果，让其变得更规范化。如Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Re
2021-02-28 23:20:56
15579
原创 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
700
原创 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
1562
原创 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
966
原创 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
454
原创 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
5999
原创 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
493
原创 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
101
原创 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
421
原创 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
860
原创 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
77
原创 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
3027
原创 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
6814
原创 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
613
原创 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
135
原创 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
127
原创 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
800
原创 vue插槽的用法
原文链接1. v-slotvue插槽有两种：具名插槽和作用域插槽，2.6.0以后，使用新语法v-slot指令（缩写为#）将两种语法统一起来。老旧的语法，这里不再赘述，参见vue官网。下面讲讲新语法的用法。<!-- 后备内容显示用户的名，以取代正常情况下用户的姓 --><!-- 父组件 --><!-- 要用template包裹，slot名称为slotNa...
2019-12-12 10:31:25
280
原创 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
790
原创 Three.js如何加载本地资源?
动机模型资源往往比较大，数据内容变动不大，可重复利用率不高。频繁请求比较浪费网络资源，加载到本地可以既可以节约请求，充分利用资源，并且可以节省用户下载时间，提高用户体验。那么怎么做才能实现我们的需求呢？方案（1）存考虑用indexDB将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer...
2019-09-05 16:00:11
6772
10
原创 vue实现手动动态挂载某个组件
我们在开发中，可能会碰到这样的情况：我们需要在某个时刻 在一个动态生成的元素上 挂载某个组件，那么我们该怎么实现呢？例如，我们在点击按钮之后，在某个div上手动挂载一个组件。 <button onclick="handleClick()"></button> <div id="container"></div>import Vue fro...
2019-08-07 11:46:34
8115
原创 为什么控制台打印事件对象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
2467
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人