qq_39852145的博客

设计模式（前端）

qq_39852145 — Wed, 07 Feb 2024 15:54:53 +0800

1.环境搭建 1）初始化npm环境下载node.js 执行npm init命令 (生成package.json) 根目录下，新建src文件夹，src文件夹下新建index.js文件： alert("Hello World"); 2）安装webpack npm install webpack webpack-cli --save-dev 为了安装的快一点，使用npm.taobao.org淘宝镜像地址: npm install webpack webpack-cli --save-dev

前端性能优化

qq_39852145 — Fri, 10 Nov 2023 02:58:36 +0800

一、速度为什么很重要？ 1.效果关乎留存用户 BBC 发现其网站的加载速度每增加一秒，就会额外损失 10% 的用户。 2.效果关乎转化次数的增加速度较快的网站可以提高转化率并改善业务成果。 3.性能关乎用户体验对网页加载速度延迟的压力反应类似于观看恐怖电影或解决数学问题，并且比在零售店排队等候的压力更大。二、HTML 性能的一般注意事项该 HTML 的初始请求需要经历多个步骤，每一步都需要一些时间。减少在每个步骤上花费的时间，可加快至第一字节的时间 (TTFB)。虽然 TTFB 不是您在网页加载速度

promise、async/await的执行顺序

qq_39852145 — Tue, 07 Nov 2023 21:35:07 +0800

【代码】promise、async/await的执行顺序。

web获取媒体流

qq_39852145 — Sun, 02 Apr 2023 00:43:00 +0800

/ 将媒体流设置到 video 标签上播放。// 获取本地音视频流。// 播放本地视频流。

husky 报错npm: command not found

qq_39852145 — Thu, 31 Mar 2022 11:24:37 +0800

我是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 hook export NVM_DIR="$HOME/.nvm"

最长递增子序列

qq_39852145 — Thu, 03 Mar 2022 19:22:13 +0800

最长连续递增子序列

OAuth

qq_39852145 — Wed, 23 Feb 2022 10:02:37 +0800

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

比较HTTP/HTTP1.1/HTTP2/HTTP3

qq_39852145 — Mon, 14 Feb 2022 19:39:19 +0800

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

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

qq_39852145 — Tue, 02 Nov 2021 17:16:08 +0800

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

js文件分块转base64文本

qq_39852145 — Thu, 28 Oct 2021 16:38:57 +0800

ES2019 重点总结

qq_39852145 — Sun, 21 Mar 2021 18:23:28 +0800

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

ES2018 重点总结

qq_39852145 — Sat, 20 Mar 2021 18:06:47 +0800

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

ES2017重点总结

qq_39852145 — Thu, 18 Mar 2021 00:50:32 +0800

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

ES2016重点总结

qq_39852145 — Tue, 16 Mar 2021 23:44:06 +0800

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

js之导入导出

qq_39852145 — Sun, 14 Mar 2021 23:15:28 +0800

导出表达式式导出 // 导出变量/常量 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

js之Iterator

qq_39852145 — Sun, 14 Mar 2021 22:11:16 +0800

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

js之generator

qq_39852145 — Sun, 14 Mar 2021 10:36:20 +0800

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

js之proxy

qq_39852145 — Sun, 14 Mar 2021 00:08:00 +0800

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

js之Reflect

qq_39852145 — Sun, 28 Feb 2021 23:20:56 +0800

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

js 解构赋值

qq_39852145 — Mon, 22 Feb 2021 22:12:40 +0800

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