- 博客(144)
- 收藏
- 关注
RSS订阅原创 JS/node：事件循环
执行所有同步代码->执行当前宏任务->所有当前宏任务涉及的微任务都放入当前宏任务队列的末尾作为微任务队列、并且清空所有微任务->碰到宏任务，会作为下一个宏任务处理，然后循环处理。如果消息队列对所有的任务一视同仁，可能会导致某些紧急任务得不到快速的处理，也可能导致某些长时间执行的任务堵塞其他任务，基于这种情况，浏览器把异步任务分为了宏任务和微任务。修改后的消息队列机制是：队列里的每个宏任务末尾都跟着微任务，在执行宏任务时，将所有的微任务都放入当前宏任务队列的末尾，执行完所有微任务之后，再执行下一个宏任务。
2026-03-06 14:29:53
330
原创 CSS：左右固定、中间自适应布局
1.通过定位实现，父元素是定位元素，对于三栏布局，三栏都是absolute定位，左边的栏距离父元素的left为0；父元素的display的grid。grid-template-columns设置成左栏width 1fr 右栏width。这种方式需要先写左边的浮动块和右边的浮动块，最后写中间的栏，否则右边浮动块会串行。父元素是flex，中间子元素的flex-grow设置成1。1fr表示剩余空间的分配比例。
2026-03-06 09:42:05
59
原创 JS：JSON.parse(JSON.stringify(obj)) 实现深拷贝需要注意的问题
5.序列化后，会丢弃对象的constructor。也就是说，这种方法只能序列化对象的可枚举自有属性。1.对于Date类型的数据，经过JSON转换之后，Date数据会变成String。3.对于函数、undefined，序列化结果会把函数或者undefined丢失。NaN、Infinity 和-Infinity，则序列化的结果会变成 null。2.对于RegExp、Error 对象，则序列化的结果将只得到空对象。（直接序列化undefined也会产生报错）（直接序列化函数会产生报错）
2026-03-05 23:43:46
69
原创 CSS：水平居中
table可以将一个元素渲染成表格，默认情况下，表格的宽度由其内容决定，不会自动撑满父容器。再配合margin:0 auto即可水平居中。（父级元素是行内元素或者块级元素均可）这种情况自身设不设置witdh都可以，只要自身有内容能撑开width即可。（当前元素设不设置width均可，只要内容能撑开width即可）。（父级元素的display可以是块级元素，也可以是行内元素）（父级元素可以是行内元素，或者块级元素）此时当前元素需要设置width。
2026-03-05 22:39:41
246
原创 JS:localStorage、sessionStorage、cookie
当浏览器第一次向服务器发送请求时，一般是没有cookie的，浏览器会在响应中设置Set-Cookie，并在Set-Cookie里进行标识。除了这种需要浏览器和服务器一起设置的值以外，还有一些值可以只设置在浏览器端（个人设置），比如浏览器的颜色显示等，Web存储（localStorage、sessionStorage）可以实现这种功能。对于不同的tab页签，数据并不是完全不传递，如果是从一个页面打开一个新的窗口或者一个新的 tab 页，那么这个新的页面会复制顶级会话的 sessionStorage。
2026-03-05 15:59:23
205
原创 CSS: 实现两栏布局
由于浮动，右边栏会和左边栏重叠，所以margin-left设置成左边栏的width，将左右边栏错开。右子div为绝对定位，left为左子div的weight，其他方向上的距离都为0。左子div设置width，右子div设置flex-grow自动填充剩余空间。左子div为绝对定位，右子div设置同width的margin-left。如果父级元素设置了宽度，子div可以设置height为百分百。设置右边栏的width为auto或者百分百，填充右边空间。设置父div为相对定位。设置父div为相对定位。
2026-03-04 16:44:16
62
原创 Node.JS 学习笔记8
对于Node.js来说，JS指的是服务器端的JS，而不是浏览器端的JS，对于前端来说，HTML和JS当然可以是混合的，但是对于服务器端来说，有时候，服务器需要响应一个HTML数据，而HTML数据中可能包含一些JS语句。在之前的笔记介绍的方法中，所有的路由都是放在index.js下的，但是，随着项目功能的增多，路由逻辑可能变得非常多，如果都写在index.js下，代码量会非常大，不便于阅读和维护。在index.js中，访问根目录返回public下的a.html，在a.html中，访问静态资源11.png。
2026-01-22 08:58:56
720
原创 Node.js 学习笔记6
cnpm是淘宝构建的npmjs.com的完整镜像，也就是说，淘宝把npm对应的资源下载到国内服务器，使用cnpm指令时，访问国内服务器即可。对于国内的网络来说，有时候npm指令会由于网络问题无法执行，因此可以使用国内镜像来避免这个问题。网址：https://npmmirror.com/安装cnpm：npm install -g cnpm --registry=https://registry.npmmirror.comcnpm的指令和npm一样，只不过是把npm替换成cnpm。
2026-01-08 15:39:27
710
原创 JS 正则表达式
文档里面已经写的很详细了，这篇主要是根据用法做一些代码练习通过/ / 关键字创建正则表达式， /与/之间的部分即为正则表达式的，对于字面量来说，表达式本身即为正则表达式，一般不需要额外的转义。调用RegExp对象构造函数创建正则表达式，需要注意，这时候传入的是，而非正则表达式字面量。为了构造函数接收字符串之后，能将其正确处理为字面量含义，需要进行字符串和字面量之间的转义。：转义通过 \ 来进行，
2026-01-07 08:12:30
716
原创 node.js 学习笔记5
开发环境：在项目开发时，用来测试的本地地址及环境，一般是指开发人员的电脑生产环境：项目正式运行的环境，一般是指正式的服务器电脑。
2026-01-07 00:05:07
1097
原创 React useState setState之后获取到的数据一直是初始值
在dataPush方法内部，会获取dataSource的值，然后再dataSource之前再添上传入的参数，再触发set方法赋值回dataSource。本地想写一个往数组里添加数据的逻辑，添加完数据需要重新渲染页面效果，所以通过useState辅助，获取需要添加的数据之后，直接调用set方法，不太懂为什么会造成这种现象，检索了一下也没弄明白，以后能理解的时候再来回顾原理。但解决方式就是每次先给dataSource赋值，然后再调set。
2025-12-31 14:22:56
273
原创 React antd table 基础用法笔记1
通过columns数组，给表格配置表头信息：columns配置数组中每个元素都是对象，每个对象是table中某一列的表头配置。
2025-12-30 15:25:21
408
原创 node.js 学习笔记4
1.在浏览器地址栏输入网址，然后点击回车，会给该网址发送GET请求2.点击a标签链接，会给a标签绑定的URL发送GET请求3.LINK标签引入的CSS，如果CSS是URL，会给该URL发送GET请求4.script标签引入的js，如果js是URL，会给该URL发送GET请求5.video/audio引入多媒体，如果引入地址是URL，会给该URL发送GET请求6.img标签引入如图，如果img绑定是URL，会给该URL发送GET请求7.form标签中的method为GET时。
2025-12-28 20:35:24
1094
原创 React上绑定全局方法
2.在index文件（项目默认的主页面）上import这个方法，由于其他页面都是它的子页面，所以这种import能够在其他页面上生效。说React.$UUID不是函数，本地打印了一下，结果是undefined，推断是全局方法没绑定成功，直接调用报错了。1.先手动引入，暂时规避报错。
2025-12-26 16:12:36
168
原创 HTML 拖放API
draggable属性可用于DOM标签，设置为true表示可以拖动，为false表示不可以拖动。其false和true必须显示设置，不能省略。（以vue3代码为例）
2025-12-25 16:08:56
263
原创 css 练习笔记1
设置成preserve-3d的时候，可以把父元素空间想象是一个3D空间，父元素变形效果和子元素变形效果可以存在空间关系。设置成flat的时候，可以看成父元素内部空间是平面的，子元素和父元素的动画效果都在同一个平面。表示 class b只有在b是定义在class a的后代元素上时才生效。设置父元素内部是3D还是2D。或者（scss语法）
2025-12-25 09:43:12
272
原创 前端 ResizeObserver API
ResizeObserver可以监视Element内容盒或边框盒或者SVGElement边界尺寸的变化。在调用时配置监控逻辑，并返回实例监控对象，通过监控实例对象绑定需要监控的DOM，当DOM尺寸变化时，触发监控逻辑。
2025-12-25 08:35:09
848
原创 vue3 状态管理器 pinia 用法笔记1
)setup风格配置函数的调用和配置对象一样，都是通过import引入定义的useCounterStore方法，调用后返回仓库实例对象store。
2025-12-24 09:32:27
337
原创 TS 模块/命名空间
对于某个ts类型文件来说，该文件内部的方法只能在文件内部使用，该文件即可具有一个或多个模块，模块内部的方法不在全局作用域中，外部不可见。如果想要在其他文件中使用ts文件中定义的方法，需要在ts文件中通过export导出，并在其他文件中通过import导入。用于全局类型声明，与普通的TS类型语法类似，只不过在类型声明语句前加一个declare，类型声明即可全局生效。命名空间定义了标识符的可见范围，一个标识符可在多个命名空间中定义，它在不同命名空间中的含义是互不相干的。外部模块/模块：从外部引入的模块。
2025-12-22 16:55:18
238
原创 react antd form表单基础使用笔记1
表单数据提交有两种方式，一种是使用Form.Item在Form表单中添加提交按钮，另一种是在Form表格外面触发提交事件，在提交事件中调用Form表单的提交方法。这种方案的逻辑是，通过Form.Item提交按钮，触发表单的初步提交，表单进行数据校验，校验成功后进入onFinish，在onFinish中进行提交要进行的逻辑。校验通过Form.Item上的rules控制，设置校验规则后，如果进入提交逻辑，会自动进行校验，若校验不通过，不会进入后续提交逻辑。在表单外通过其他事件触发表单的提交逻辑。
2025-12-22 08:08:51
323
原创 datagrip 连接达梦数据库
然后在新建的Project Data Sources里，填写账户名、密码，和链接URL。要创建class，本地导入驱动，选择Driver Files下面的+，会弹出来三个选项，选择第一个，本地JARs，然后选择本地的达梦数据库驱动。首先要添加驱动，点开软件之后，左上角是Database Explorer，下面有一排操作栏，点击+号，然后找到下面的driver。填好之后点击Test Connection测试是否连通，如果绿了点击OK就可以了。在这个页面最重要的是创建对应的class，其他的都可以不改。
2025-12-18 16:24:47
660
原创 React 动态显示icon
通过@ant-design/icons引入Icon大对象，通过Icon['icon名']获取对应的对象，在需要添加icon的地方调用React.createElement就可以显示icon。
2025-12-17 14:08:28
242
原创 TypeScript 学习笔记3 js类
想要定义一个类，可以使用两种方式，1.声明式2.类表达式类的声明式表达不具有提升，因此不管是使用声明式还是表达式，在定义之前都不能访问到类。
2025-12-16 09:21:49
301
原创 TypeScript 学习笔记2
interface（接口）的部分用法与type类似，但与type不同的是，interface用于定义对象的类型别名，同时，interface可以定义可选属性与只读属性，且interface定义的对象也可以被看做是类的一种规范，可以用来实现具体的类。有时，对于某个值，编码人员可能清除该值的详细信息，比如该对象上的某个方法等，但typescript会因为不知道其值，而在静态阶段对其进行报错。可以尽量少使用any。通过type 类别别名 = 类型 的形式，可以给类型起别名，在实际使用时，使用别名表示变量的类型。
2025-12-15 14:29:43
924
原创 Next.js 路由 简单学习笔记
页面路由在页面路由模式下，如果希望页面默认渲染自定义的组件，需要修改pages文件夹下的_app文件。路由对应的页面，会自动填充到Component的位置。而页面的props，默认是一个空对象。除非使用数据获取方法为页面进行预加载。应用路由在应用路由模式下，如果要创建共享的布局，需要修改app目录下的layout文件。layout会在{chidren}处渲染路由组件或者layout文件。
2025-12-03 15:53:04
545
原创 vue3 computed 练习笔记
会记这篇博客，其实主要是因为在实际项目拆分组件的时候，拆分的是一个dialog，而digloag绑定的v-model来源于父组件，props不能直接作为v-model，且由于传递的v-model是控制dialog是否显示的visiable，如果dialog关闭，visiable的值需要回传给父组件，因此需要用到computed的set和get实现。基础语法：在对象内部，使用get 函数，在访问对象.属性名时，会触发get对应的方法。语法将对象属性绑定到查询该属性时将被调用的函数。当尝试设置属性时，set。
2025-11-25 10:47:02
358
原创 TypeScript学习笔记1
TS是JS的扩展语言，是JS的超集，TS包含了JS的所有内容，再此基础上，TS增加了静态类型检查、接口、泛型等内容，在实际运行时，TS需要编译为JS，然后交给浏览器或其他的JS环境运行。
2025-09-21 23:29:51
831
原创 React useEffect 学习笔记
如果不是函数，会引发报错，也就是说，如果给回调函数添加async，这也会导致报错，因为async函数默认返回Promise，如果确实要使用异步调用，可以在useEffect内部定义一个函数，这个函数是async函数，然后再在useEffect内部调用这个函数。如果在每次useEffect调用时，不进行清除，由于useEffect内部操作是独立的，也就是说，useEffect内部的操作被看成独立的函数内容，每次调用都会重新执行一遍，并不会产生覆盖，那么每次调用时都会创建一次链接，造成多个链接。
2025-09-09 00:25:52
671
原创 Next.js学习笔记1 路由/layout/template
严格模式，在next.js项目中是默认打开的，但有时候严格模式会产生问题，严格模式在开发阶段，内部会模拟组件挂载卸载的过程，有时候，一个方法会被触发两次，如果觉得这对调试问题产生了影响，可以在next.config.mjs文件中配置关闭，但一般还是推荐打开。对于一个页面文件，文件内部也可以有自己的layout，在根布局的{children}内部，是自己页面的layout，文件夹中的页面会作为{children}嵌套在自己的layout中。文件里也可以有文件嵌套，内层文件也可以有自己的laylout。
2025-09-08 09:50:27
1050
原创 React 学习笔记5 ajax/兄弟组件传值/路由
前后端通信时，一般是并不同源的，为了请求能够处理（请求可以发送，服务器端也会响应，但是浏览器会丢弃这个响应），需要在React中通过代理（和前端同一端口开一个服务器，代理服务器和前端同源，代理服务器和后端服务器不存在跨域问题，因此可以进行交互）进行配置。在接收数据的组件里订阅消息，订阅消息使用PubSub.subcribe订阅，这个函数的第一个参数是消息名，第二个参数是消息发布时触发的回调函数，回调函数有两个参数，消息名和接收到的参数。后端会根据请求，找到对应的处理函数，返回响应的数据。
2025-09-08 09:19:30
639
原创 React 学习笔记4 Diffing/脚手架
如果在旧虚拟DOM中找到了与新虚拟DOM中一样的key，则可以确定这两个节点是同一个，如果虚拟DOM中的内容没变，则直接复用，如果虚拟DOM中的内容改变了，则生成新的DOM并进行替换。对于两个组件，如果他们各有自己的css文件，且css文件中存在冲突的命名，则后引入的样式会覆盖先引入的文件，为了避免这种情况，首先，要给css的名字之前先加上module，然后，在引入样式时，给引入的样式命名，然后给组件中标签配置样式时，配置命名.样式，就可以避免冲突。包含了基础的需要的配置，并且可以下载好所需的相关依赖。
2025-09-02 16:47:50
1134
原创 React 学习笔记3 生命周期 受控/非受控组件
在React，事件绑定通过on事件名（事件名首字母大写）的形式来进行绑定。React中使用的事件，是React重新封装的自定义事件，并不是原生DOM事件，这是为了更好的兼容性考虑。React的事件是通过事件委托的方式处理的，也就是说，DOM上绑定的事件会被委托给最外层的DOM。通过这种方式提升效率。事件回调函数具有参数event，因此也可以使用event.target获得事件对应的DOM。
2025-09-01 10:56:42
646
原创 React 学习笔记2 props、refs
在使用组件时，有时希望组件中展示组件定义外部的数据。在组件上有一个props属性，在通过类式方法定义组件时，可以在渲染组件时，在组件标签上添加属性，这个属性会以key value的形式放入props。
2025-08-25 16:21:38
822
原创 React 学习笔记1 组件、State
React是用于构建用户界面的JS库。React是由Facebook（Meta）开发的，是开源的。React采用组件化模式、声明式编码，可以提高开发效率，提高代码复用率。使用React Native，可以用React语法进行移动端开发，可以使用JS编写安卓和IOS应用，而不需要使用java oc swift。React使用虚拟DOM和Diffing算法，减少与真实DOM的交互。
2025-08-22 19:09:26
1147
原创 HTTP0.9/1.0/1.1/2.0
每次一个请求处理完成后连接不会直接断开，一次通信中，可以发送多个请求，不会反复发送TCP请求，没有不断建立和断开连接的开销。HTTP1.0中，使用短连接，当服务器返回数据之后，就会断开连接，每次发送请求，都要重新建立连接（三次握手）然后传输数据，然后再断开连接。一般请求都是客户端向服务器发起，但有了服务器推送，服务器端可以告知客户端还有信息要传输，客户端不关闭连接，而是待机等待。首部压缩/头部压缩：建立头部索引表，将传输过的头部存入表中，下次传输时，如果表中有这个头部，就传输索引号，否则传输请求头。
2025-08-17 23:52:13
240
原创 VUE3 学习笔记2 computed、watch、生命周期、hooks、其他组合式API
在vue3中，虽然也能写vue2的computed，但还是更推荐使用vue3语法的computed。computed是一个函数。它的参数接收一个函数，这个函数可以是普通函数，也可以是箭头函数，由于vue3中没有this，所以无需关注函数类型对this指向的影响。这个函数就是计算的方法函数。但是通过这种方式定义的计算属性，是只读的，无法对属性进行修改。如果计算属性同时需要读取和修改，要通过下面这种形式：传入computed的参数是一个对象，在对象中配置get和set。
2025-08-15 09:50:45
1513
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人