- 博客(51)
- 收藏
- 关注
RSS订阅原创 TypeScript
any类型会关闭类型检查，可能导致潜在的运行时错误。unknown类型在编译时进行类型检查，更安全，但需要显式地进行类型断言或类型检查。在实际开发中，推荐使用unknown类型，因为它提供了更好的类型安全性。只有在确实需要绕过类型检查的情况下，才使用any类型。
2024-12-13 11:19:43
966
原创 图片懒加载+IntersectionObserver
现在，当用户滚动页面并且图片进入视口时，图片将自动加载。这种方法可以提高页面加载速度，特别是对于包含大量图片的网页。在JavaScript中，图片懒加载可以通过监听滚动事件和计算图片距离视口顶部的距离来实现。属性设置为一个透明的1x1像素图片作为占位符，并将实际的图片URL设置为。在JavaScript中，创建一个函数来处理图片懒加载。在页面加载完成后调用。
2024-12-06 21:47:52
347
原创 this、apply、call、bind
箭头函数没有自己的this，箭头函数的this就是上下文中定义的this，因为箭头函数没有自己的this所以不能用做构造函数。一般来说，this总是指向调用某个方法的对象，但是使用call()和apply()方法时，就会改变函数体内部this的指向。因为定时器中采用回调函数作为处理函数，而回调函数的this 指向 window。3）使用 new 实例化对象，在构造函数中的this指向实例化对象。里面，这里的this始终指向的是window对象，指向调用该方法的对象。对象的值，扩充函数赖以运行的作用域。
2024-12-06 14:12:30
1087
原创 js 删除链表倒数第k个节点
要删除链表倒数第k个节点，可以使用双指针法。在这个示例中，我们首先创建了一个哑节点（dummy node），它的。指针先移动k+1个节点。接下来，我们同时移动两个指针，直到。指针指向的节点就是要删除的节点的前一个节点。指针，使其指向要删除节点的下一个节点，从而实现删除操作。指针指向链表的头节点。然后，我们使用两个指针。js 删除链表倒数第k个节点。
2024-12-06 13:16:33
149
原创 媒体查询、浏览器一帧渲染过程
媒体查询（Media Query）是CSS3中的一个重要特性，它允许开发者根据设备的特定条件（如视口宽度、设备像素比、方向等）来应用不同的样式规则。这使得网页能够根据不同的设备和屏幕尺寸进行自适应布局，从而提供更好的用户体验。在浏览器中，一帧的渲染过程涉及多个步骤，这些步骤共同协作以呈现流畅的用户体验。通过使用媒体查询，开发者可以创建更加灵活和自适应的网页，从而满足不同用户的需求。为了避免卡顿，开发者应尽量减少每一帧的工作量，确保渲染过程在16ms内完成。
2024-12-06 13:09:02
561
原创 前端工程化
前端工程化是一种将软件工程的方法应用于前端开发的过程，旨在提高开发效率、降低维护成本、优化代码质量，并支持团队协作。以下是一些关键方法，通过这些方法可以显著。通过实施前端工程化，团队可以更高效地进行开发，减少重复劳动，降低出错率，从而提高项目的代码质量。
2024-12-05 20:16:37
300
原创 观察者模式和发布订阅模式
Publisher 和 Observer 相互不认识，中间有媒介。如在 A 组件中绑定一个事件，在 B 组件中触发这个事件，这个两个组件相隔十万八千里互补认识，那么就通过中间event这个媒介来通讯。Subject 和 Observer 直接绑定，中间无媒介。如点击事件，事件直接和按钮进行绑定。
2024-11-25 18:48:45
734
原创 webpack构建流程、基础配置、打包性能优化、热更新、和Vite区别
用于扩展webpack功能的工具，可以在webpack构建过程中执行更复杂的任务，如打包优化、资源管理、环境变量注入等。happyPack 的原理是，将这些任务分解到多个子进程中，并行执行，执行完成后把结果发送到主进程，从而减少整体的打包时间。webpack 在打包过程中，loader 转化js、css、img等文件是同步进行的，一个一个的转换。属性，将公共的或不常改动的第三方包名称，配置在属性中，打包时会自动忽略当中的包。：实质上是一个函数，接受源文件内容作为输入，并输出处理后的内容。
2024-11-21 13:04:06
1343
原创 Redux和ReduxToolkit
在createStore中可以用middleware中间件对dispatch进行改造，比如当action传入dispatch会立即触发reducer，有些时候我们不希望它立即触发，而是等待异步操作完成之后再触发，这时候用redux-thunk对dispatch进行改造，以前只能传入一个对象，改造完成后可以传入一个函数，在这个函数里我们手动dispatch一个action对象，这个过程是可控的，就实现了异步。，根据action的type返回一个新的state。为false则不对比。
2024-11-21 11:38:05
816
原创 css预处理器
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。可以在 CSS 中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等。需要引入编译过程 有学习成本。
2024-11-21 11:01:12
311
原创 前端性能优化
因为先加载 HTML 再加载 CSS，会让用户第一时间看到的页面是没有样式的、“丑陋”的，为了避免这种情况发生，就要将 CSS 文件放在头部了。（2）在减少首屏css加载完后，异步加载css，css会阻塞渲染，在css文件请求、下载、解析完成之前，浏览器将不会渲染任何处理的内容，客户端渲染: 获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。①延迟脚本，defer和async，async下载完成立即执行，defer，页面加载完成再执行。
2024-11-21 10:59:07
478
原创 FIber + webWorker
为了解决这个问题，JavaScript 允许主线程把二进制数据直接转移给子线程，但是一旦转移，主线程就无法再使用这些二进制数据了，这是为了防止出现多个线程同时修改数据的麻烦局面。需要注意的是，这种通信是拷贝关系，即是传值而不是传址，Worker 对通信内容的修改，不会影响到主线程。是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用。
2024-11-21 10:53:31
1461
原创 微前端+qiankun
当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。微应用需要在自己的入口 js (通常就是你配置的 webpack 的 entry js) 导出 bootstrap、mount、unmount 三个生命周期钩子，以供主应用在适当的时机调用。：主框架不限制接入应用的技术栈，微应用具备完全自主权。配置中定义子项目的入口。
2024-11-21 09:35:31
700
原创 【React...归纳】
WebSocket是一种在单个TCP连接上进行全双工通信的协议。它可以使客户端和服务器之间的实时数据交换变得更加简单和高效。与HTTP不同，WebSocket没有请求/响应模型，而是建立一个持久连接，并且允许双方随时发送消息。当使用WebSocket时，客户端通过向服务器发起握手来建立连接。一旦握手完成，客户端和服务器就可以相互发送消息了。这些消息可以是文本或二进制格式的任何内容。然而，在使用WebSocket时可能会出现错误。例如，在建立连接期间发生故障、无法解析传输数据等情况下都可能会导致错误。
2023-07-03 23:36:17
816
原创 js 实现 求最长递增字串
求最长递增字串题目描述有一个只由字符1到9组成的长度为n的字符串s，现在可以截其中一段长度为k的子串并目将该子串当作十进法的正整数，如对于子"123”，其对应的十进制数字就是123。想让这个正整数尽可谈的大，请计算该正整数。数传入一个长度为n的字符串s和一个正整数k，请返回答案。输入"321”,2输出32代码var s = '321'var k = 2var arr = s.split('')if (arr.length <= k) { console.log
2021-08-27 22:59:05
582
原创 js 实现 数组扁平化，数组求和求和
数组扁平化toString和split结合先通过toString()把数组转成String对象，再结合split() 方法使用逗号分隔符将String对象分割成字符串数组，再用map函数将数组中的字符串转成数字。var arr=[1,2,[3,4,[5]],6,[7,[8,9,[10,11,[12]]]]]var str = arr.toString().split(',').map(Number)console.log(str) 递归通过循环递归的方式，一项一项地去遍历数组，如果每一项
2021-08-14 20:45:24
378
原创 js实现水仙花数
水仙花数时间限制： 4000MS内存限制： 557056KB题目描述：春天是鲜花的季节，水仙花就是其中最迷人的代表，数学上有个水仙花数，他是这样定义的： “水仙花数”是指一个三位数，它的各位数字的立方和等于其本身，比如：153=13+53+3^3。 现在要求输出所有在m和n范围内的水仙花数。输入描述输入数据有多组，每组占一行，包括两个整数m和n（100<=m<=n<=999）。输出描述对于每个测试实例，要求输出所有在给定范围内的水仙花数，就是说，输出的水仙花数必须
2021-08-12 18:43:40
829
原创 js实现 输出数组中第一个唯一数的下标
输出数组中第一个唯一数的下标题目描述：输入一个整数数组，数组中有些数只出现过一次，我们称它为“唯一数”，出现过两次或两次以上的数不是唯一数。请编写一段代码寻找出数组中第一个出现的唯一数，输出该唯一数的下标。如果有多个唯一数的情况，请输出第一个唯一数的下标如果数组中没有找到唯一数，请输出-1，作为异常下标，表示没有找到唯一数。输入描述：输入第一行为数组的长度n;第二行是数组中n个数，数与数之间用空格隔开输出描述：输出数组的第一个唯一数的下标或者-1（如果没有唯一数）样例输入：1
2021-08-01 19:59:58
1108
原创 mongoDB重要知识点
MySQL与MongoDB之间最基本的差别是什么?答：MySQL和MongoDB两者都是免费开源的数据库。MySQL和MongoDB有许多基本差别包括数据的表示(data representation)，查询，关系，事务，schema的设计和定义，标准化(normalization)，速度和性能。通过比较MySQL和MongoDB，实际上我们是在比较关系型和非关系型数据库。MongoDB成为最好NoSQL数据库的原因是什么?答：以下特点使得MongoDB成为最好的NoSQL数据库：面向文件的..
2021-07-28 10:58:06
444
原创 mysql
一、SQLStructure Query Language(结构化查询语言)简称 SQL。分类1、DDL (Data Definition Language) 数据定义语言，用来操作数据库、表、列等； 常用语句：CREATE、 ALTER、DROP2、DML (Data Manipulation Language) 数据操作语言，用来操作数据库中表里的数据；常用语句：INSERT、 UPDATE、 DELETE3、DCL (Data Control Language) 数据控制语言，用来操作访问权
2021-07-12 23:48:54
138
原创 Node.js 之 Crypto模块
目录一、下载加密库：二、MD5加密三、MAC加密四、对称加密、非对称加密一、下载加密库：npm install crypto常见的摘要算法 与 对应的输出位数:MD5：128位SHA-1：160位SHA256 ：256位SHA512：512位二、MD5加密概述：MD5消息摘要算法，属Hash算法一类。MD5算法对输入任意长度的消息进行运行，产生一个128位的消息摘要(32位的数字字母混合码)。MD5主要特点:不可逆，相同数据的MD5值肯定一样，不同数据的MD5值不一样v
2021-06-26 23:51:32
3946
原创 sql练习
目录sql练习创建表语句查询数据表练习题sql练习创建表语句#创建部门CREATE TABLE IF NOT EXISTS dept ( did int not null auto_increment PRIMARY KEY, dname VARCHAR(50) not null COMMENT '部门名称')ENGINE=INNODB DEFAULT charset utf8;#添加部门数据INSERT INTO `dept` VALUES ('1', '教学部');IN
2021-06-19 21:36:53
299
原创 react脚手架配置
react脚手架配置代理总结方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明：优点：配置简单，前端请求资源时可以不加任何前缀。缺点：不能配置多个代理。工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）方法二第一步：创建代理配置文件在src下创建配置文件：src/setupProxy.js编写setupProxy.js配置具体代理规则：const
2021-06-16 17:50:44
147
原创 React
1、React入门1.1 React简介官网英文官网: https://reactjs.org/中文官网: https://react.docschina.org/介绍描述用于动态构建用户界面的 JavaScript 库(只关注于视图)由Facebook开源React的特点声明式编码组件化编码React Native 编写原生应用高效（优秀的Diffing算法）React高效的原因使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。DOM Diffi
2021-06-16 17:44:43
104
原创 浏览器构成、H5语义化、新特性
浏览器页面有哪三层构成以及作用构成结构层表示层行为层对应HTMLCSSJavaScript作用实现页面结构完成页面的表现与风格实现客户端的一些功能和业务h5语义化HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构，如 header,footer,nav，从标签上即可以直观的知道这个标签的作用，而不是滥用div。语义化就是给标签添加语义，让合适的标签去做适合的事常用语义化标签有：title:页面头部信息 header:定义文档的页眉 foo
2021-06-09 16:36:51
191
3
原创 同步和异步
一、单线程（1）单线程的概念java是一门多线程语言，我们常常可以利用java的多线程处理各种各样的事，比如说文件上传，下载等，而JavaScript却不支持多线程。JavaScript是一门单线程的语言，因此，JavaScript在同一个时间只能做一件事，单线程意味着，如果在同个时间有多个任务的话，这些任务就需要进行排队，前一个任务执行完，才会执行下一个任务，（2）为什么是单线程JavaScript的单线程，与它的用途是有很大关系，我们都知道，JavaScript作为浏览器的脚本语言，主要用
2021-05-30 10:34:11
119
原创 Vue(三）
目录十二、路由路由的使用Vue-router客户端实例属性路由对象和路由匹配使用路径名称query传参和params传参的使用和区别vue-router的嵌套十三、vue-cli脚手架vue-cli解释全局安装创建项目命令行窗口方式图形界面方式创建十四、vue的ajax请求安装axios并引入基本用法十五、跨域请求跨域概念十六、动画在进入/离开的过渡中，会有 6 个 class 切换自定义过渡类名十七、性能优化十二、路由路由的使用Vue-routerVue Router 是 Vue.js 官方的路
2021-05-27 23:35:25
280
2
原创 Vue(二）
目录八、过滤器九、Vue生命周期的介绍十、自定义指令全局指令局部指令钩子函数钩子函数参数函数简写参数传递十一、组件1 注册组件2 创建组件3 组建嵌套嵌套限制5 组件命名6 自定义属性propsprop类型传递静态或动态 PropProp 验证data与props区别7 组件的钩子函数8 父子组件的参数传递9 单向数据流10 修改prop11 $emit的用法12 动态组件13 插槽(slot)具名插槽作用域插槽八、过滤器可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bin
2021-05-19 20:26:38
265
原创 Vue(一)
目录一 、mvvm思想优点：二、vue第一个实例vue属性三、vue指令常用指令：数据的绑定：v-for的使用：1 遍历数字2 遍历普通数组3 遍历对象4 遍历对象数组5 key键的使用6 循环中调用方法v-if,v-show四、传递事件对象五、事件修饰符六、按键修饰符1 监听pc键盘上的值2 自定义全局按键修饰符七、class绑定1.使用字符串2.使用数组3.使用对象4.使用数组+对象5.使用数组+三元表达式6.对象的升级7.绑定style对象Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不
2021-05-12 19:31:56
451
原创 浏览器渲染、闭包、原型等
浏览器渲染大致流程处理 HTML 标记并构造 DOM 树。处理 CSS 标记并构造 CSSOM 树。将 DOM 与 CSSOM 合并成一个渲染树。根据渲染树来布局，以计算每个节点的几何信息。将各个节点绘制到屏幕上。构建渲染树从 DOM 树的根节点开始遍历每个 可见 节点。对于每个可见的节点，找到 CSSOM 树中对应的规则，并应用它们。根据每个可见节点以及其对应的样式，组合生成渲染树。第一步遍历节点的时候，需要知道什么节点是不可见的。一些不会渲染输出的节点。比如 script
2021-05-08 22:26:07
160
原创 html,css,js重要点
目录垂直居中的实现css去除浮动行内元素、块级元素、空元素h5十大新特性CSS选择器类型选择器优先级伪类伪元素call()和apply()的区别垂直居中的实现1、table-cell方法 Html结构：<div class="box"> <span>垂直居中</span></div>css:.box{ display: table-cell; vertical-align: middle; text-a
2021-04-15 18:12:32
532
原创 JS 之 运算符
标识符标识符：所有 JavaScript 变量必须以唯一的名称的标识，即变量名称构造标识符规则：必须以字母开头（也可以是$和_）可包含字母、数字、下划线_、美元符号$区分大小写不可以是JS关键词声明变量声明变量即创建变量，可通过var let const关键字来声明变量。声明变量后若不赋值，则值为 undefined.变量作用域var 函数作用域 function(){}let,const 块级作用域，{}运算符1. 算术运算符+加法-减法*乘法/除法% 系数+
2021-04-09 21:01:05
130
原创 Nodejs 之 Express框架
Express一、Express简单介绍二、路由2.12.2 通配符2.3 参数传递三、资源访问3.1 静态资源的访问3.2 动态页面的访问3.2.1 ejs模板3.2.2 访问动态页面3.2.3 Ejs 后缀修改为 Html四、express框架中**请求**方法属性五、express框架中**响应**方法属性一、Express简单介绍Express 是一个基于 Node.js 平台，快速、开放、极简的 web 开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用Expres
2021-04-08 21:13:18
372
原创 Nodejs 之 promise
express一、CommonJs二、Promise2.1 回调地狱2.2 promise是什么2.2.1 抽象表达2.2.2 具体表达2.2.3 Promise有三个状态2.2.4 promise的状态改变2.3 promise基本流程2.4 promise的优势2.4.1. 指定回调函数的方式更加灵活2.4.2 支持链式调用, 可以解决回调地狱问题2.5 promise的使用：解决回调地狱问题2.6 async/await 同时使用2.7 Promise的使用2.8 Promise的几个关键问题一、C
2021-04-08 09:09:09
723
原创 Nodejs 之 Event 模块
Event模块一、概述二、对象1. events模块只提供了**一个对象** `events.EventEmitter`2. `EventEmitte`r的核心3. 常用API的方法三、Node.js的事件循环机制一、概述events是Node.js最重要的模版，原因是Node.js本身架构就是事件式的，而它提供了唯一的接口。所以是Node.js事件编程的基石。events模块不仅用于用户代码与Node.js下层事件循环的交互。还几乎被所有的模块依赖。二、对象1. events模块只提供了一个
2021-04-01 20:42:03
456
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人