- 博客(169)
- 收藏
- 关注
RSS订阅
原创 前端面试HTML5+CSS3+JS+TS4+Vue3+React18+八股文+手写+项目+笔试
变量声明不开辟内存,只是告诉编译器,要声明的部分存在,要预留部分的空间。var i;变量定义开辟内存。var i=123;props公开，单向数据流值，父子组件间的唯一通信不可改1.每个组件对象都会有props（properties的简写）属性2.组件标签的所有属性都保存在props中3.内部读取某个属性值：this.props.propertyNamestate私有（通过Ajax获取回来的数据，一般都是私有数据），React 把组件看成是一个状态机（State Machines），
2022-05-07 21:13:34
29503
13
原创 浏览器解析url--＞建立TCP连接--＞发起https请求--＞关键渲染路径CRP
脚本开启和关闭：将直接添加到样式表中意味着目标元素通常会在不久的将来发生变化，而浏览器会保留优化更长的时间。过度使用将导致内存使用过多，并导致更复杂的渲染发生，因为浏览器试图为可能的更改做准备。这将导致更差的性能。/* 关键字值 *//* <custom-ident> 示例 *//* <custom-ident> 示例 *//* 两个 <animatable-feature> 例子 *//* 全局值 */
2024-08-23 14:25:38
934
2
原创 Error in callback for watcher “function () { return this._data.$$state }“: “Error: [vuex] do not ...
Vuex 中，所有的状态变更应该通过 mutation 来进行，以确保状态变更的可追踪性和可预测性。直接修改一个数组或对象，Vue 无法跟踪这种改变的来源，导致可能的数据流问题和组件渲染错误。当直接修改 Vuex 的状态，比如通过。
2024-08-23 11:15:53
376
原创 Vuex、Redux状态管理库
Redux比较独立，可以跟很多框架结合使用，不过主要还是跟React配合比较好，也是最常见的React状态管理的库。当 Vuex 中的状态发生变化时，computed 属性会自动更新。但状态变更是通过称为 mutations 的同步函数来处理的，而异步逻辑则需要放在 action 中处理。这样store对象就可以在其他组件中进行使用了，例如在组件中。第一个箭头函数作为 Vuex getter 的定义部分，它可以访问到。在 Vuex 中，有类似于 Redux 的 action 的概念，
2024-07-24 11:22:11
993
原创 通信流程：https【SSL/TLS】，git仓库【https/SSH】，蓝牙【面对面快传/AirDrop】
用散列/哈希函数得到摘要/哈希值MD5： 128位散列值 (要被淘汰了)SHA-1： 160位散列值SHA-256: 产出256位的散列值。
2024-07-15 16:11:41
868
原创 vue：标签属性绑定Vue实例【ref，reactive，内置指令v-bind，v-on】,预定义变量、方法【$methods，$computed】
trim：自动过滤输入的首尾空白字符。.number：自动将用户的输入转为数值类型。.lazy：将实时更新的input事件改为移出输入焦点或回车的change事件，适用于大量输入，或者需要精确验证（邮件、号码）-- 过滤首尾空白字符 -->-- 将输入转为数值 -->-- 使用 change 事件替代 input 事件 -->
2024-07-14 11:04:20
1116
原创 ES6-ES13符号：单双引号、变量的解构赋值、占位符 、字符串模版`${} `、扩展运算符...、?,??,_,||=,&&=,in
是 truthy 值（不是 false、null、undefined、空字符串、0、NaN），则将。是 falsy 值（false、null、undefined、空字符串、0、NaN），则将。且等于(&&=) ： a &&= b 等同于 a && (a = b);或等于(||=) ：a ||= b 等同于 a || (a = b);) 的情况下不会引起错误，该表达式短路返回值是。含局部变量时用模板字符串（反引号 ``` `）链式运算符，不同之处在于，在引用为空 (
2024-07-14 10:18:17
1088
原创 开发常识：命令行终端、库源码、版本、开发环境阶段、API和SDK
在开发和测试阶段，使用 HTTP 可能更方便，避免了配置证书和加密协议的复杂性，节省了开发时间。开放的CDN（内容分发网络）平台，用于托管开源的JavaScript、CSS和NPM包。的测试，包括功能测试、性能测试、兼容性测试等，以确保软件的质量和稳定性。的网络环境或特定的攻击场景，此时使用 HTTP 可能更合适。软件版本提交给测试团队后的。测试，旨在快速验证软件的。
2024-07-04 21:17:53
334
原创 移动端适配之viewport
此Hook利用了的resize事件，处理移动设备上因等导致视口变化API 提供了有关视觉视口（visual viewport）的信息，即用户实际看到的部分，这部分可能会因为UI元素（如地址栏和键盘）的显隐而改变。
2024-04-19 21:43:08
753
原创 navigator.clipboard/ textarea 选择剪切
如果不支持或者用户没有授权访问剪贴板，代码会回退到使用一个不可见的。API 来复制文本。元素来实现复制功能。
2024-04-19 11:38:56
420
原创 前端性能优化
1.做（三省）：懒能不能？的：减少渲染+缓存静态资源；如果要做，能不能？紧急缓慢/万一不用做了的：延迟非必要+预处理必要；拖不下去的时候，能不能？：压缩体积，多路复用2.能否更快更好3.预防。
2024-04-16 22:54:12
863
原创 CSS框架：Tailwind CSS
扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件。
2024-02-04 19:21:30
2495
1
原创 yarn/npm certificate has expired
目录报错原因：HTTPS 证书验证失败方法a.检查网络安全软件：可能会拦截或修改 HTTPS 流量b.strict-ssl:false关闭验证【临时方法】yarn 安装包时报“certificate has expired”_yarn certificate has expired-CSDN博客
2024-02-04 18:06:53
2099
原创 国际化（i18n)：react、vue、element兼容
i18n应用中，下述 JSON 对象通常会根据不同的语言或功能模块被拆分成多个独立的 JSON 文件，如zh->home.json，en->login.json。从本地化资源文件中获取特定键的字符串，并且可以动态地插入变量。"CN" 则表示该语言的特定区域，即中华人民共和国（China）。（namespace，如下述zh.json中的login），避免了不同组件间状态管理的复杂性和冗余性。包含国际化设置的对象，判断和切换语言。等在整个应用程序中需要访问的数据。，.xml，.ts存储对象。
2024-02-04 17:29:51
1561
原创 setTimeout、setInterval、requestAnimationFrame，定时器不准时
变动观察器）是一种Web API，它允许开发者监视DOM树的变化并在这些变化发生时执行回调函数允许监视DOM树的变化，因此它也可以用于异步任务的调度。不同设备的屏幕刷新频率可能不同， setTimeout/setInterval只能设置固定的时间间隔，这个时间和屏幕刷新间隔可能不同。考虑极端情况，假如定时器里面的代码需要进行大量的计算，或者是DOM操作，代码执行时间超过定时器的时间，会出现定时器不准的情况。是一种宏任务，但是优先级较低，可能在其他异步任务之后执行。这样设计的原因，如果在GUI渲染的时候，
2024-01-30 19:04:44
1010
原创 js中字符串string，遍历json/Object【匹配url、邮箱、电话，版本号，千位分割，判断回文】
URL结构一般包括协议、主机名、主机端口、路径、请求信息、哈希。
2024-01-26 11:20:27
428
原创 前端环境安装【mac/window，nvm/node，npm/yarn，react/vue/ts，git，vs，沙箱/测试/运行，package与package-lock/yarn.lock】
nvm 主要是用来管理和 npm 版本的工具，可以用来切换不同版本的 nodejs。安装nvm之前先卸载node。
2024-01-15 19:28:29
1184
原创 css预处理器之sass（scss）
mixin中插值不能作为赋值语句的值部分，只能用做属性名定义或者选择器构建时@include中不能使用插值。通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起.1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”%声明的代码，如果不被 @extend 调用的话，不会产生任何代码。在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个。比如在不同的地方调用一个相同的混合宏时，不能将两个。2、类似 JS的注释方式，使用“//” 两者区别，
2023-11-29 22:24:00
1791
原创 【面试】typescript【类成员，接口interface与别名type，高级/工具类型】
TS与java不同，TS默认隐式。所以可以通过ts特有的元组限制。但有时需要存储不同类型的值。
2023-11-29 17:16:32
1287
原创 手写promise A+、catch、finally、all、allsettled、any、race
同步版1.将promise的resolve和reject函数传给实例用2.实例给resolve和reject函数传值。
2023-11-28 23:13:50
581
原创 封装进度条onUploadProgress+axios取消请求的上传组件
点击或拖拽上传文件-- 使用正则表达式替换所有点号 -->请上传{{ format.replace(/\./g, "") }}格式文件，上传多份文件时以最后一次为准
2023-11-27 14:56:18
935
原创 【前沿技术了解】web图形Canvas、svg、WebGL、数据可视化引擎的技术选型
不同库使用不同的渲染技术。使用G2（canvas），f2（移动端），G6（用于图关系数据）、L7（三维）WebGL等更高级的技术。将一张跨域的图片绘制到 canvas 上，这个 canvas 就是被污染的，此时无法读取该 canvas 的数据。了解底层原理可以帮助你更好地优化代码和解决问题，因为你对系统如何工作有更深入的理解。在遇到复杂问题时，缺乏底层原理的理解可能会限制你找到最佳解决方案的能力。在不设置宽高的情况下，默认为300 * 150，超出部分会被隐藏。，它是浏览器提供的绘制动画的 api。
2023-11-26 22:24:54
757
原创 react组件通信
4、将子组件中想要传递给父组件的数据，作为参数传递给这个函数。3、子组件通过props获取到父组件传递过来的西数，并旦地。，这样就可以在逻辑中通过this.context。也可以定义一个静态方法。2、将函数作为属性的。属性进行向下传递的，那么接收的语法是通过。
2023-11-24 23:06:04
1047
原创 模块化Common JS 和 ES Module
一个模块=实现的。共享时，同名变量冲突：下层 js 能调用上层 js 的方法，但是上层 js 无法调用下层 js 的方法。
2023-11-19 16:39:46
444
原创 HTTP与HTTPS，HTTP版本，状态码
无状态是指服务端无状态是指服务端不会存储每次的会话信息，对于客户端每次发送的请求，都认为它是一个新的请求，上一次会话和下一次会话没有联系。的全称是Transport Layer Security，即安全 传输 层协议。的全称是Secure Sockets Layer，即安全 套接 层协议。1.0->1.1（一次传输多个文件，默认。HTTP/2和HTTP/3，主要支持。用SSL/TLS对数据进行。表示客户端发送了一个带有。服务器返回此响应（对。将请求者转到新位置。
2023-11-14 17:40:35
1076
原创 手写实现js类/方法【改变this、map、Object、发布订阅、promise】
Object.create法创建一个新对象，使用现有的对象来提供新创建的对象的proto。
2023-11-14 15:14:58
86
原创 promise与 fetch、async/await
包裹，这样传进promise.all的数据都是resolved状态的。catch方法返回的promise实例会被。在Promise里，执行顺序是。
2023-11-14 14:38:33
614
2023年最全前端笔面（20w字）pdf
2023-05-07
2022轻量级端口转发rinetd.tar.gz
2022-12-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人