- 博客(110)
- 收藏
- 关注
RSS订阅原创 commonjs和esmodule
模块导出和导入的方式不同。CommonJS使用module.exports导出模块的输出，使用require导入其他模块。导出时，通常是创建一个值的副本，导入时，这个副本被修改不会影响导出的值。导出时，创建的是值的引用，因此对导出值的任何修改都会反映在导入模块中。模块加载和执行的时间点不同。CommonJS的模块在运行时加载和执行，而ES Module的模块在编译时就已经加载和执行。esmodule使用import {a} from './lib.mjs'来导入模块，使用export来导出模块。
2024-03-12 20:45:11
562
原创 flex布局
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），主轴的开始位置叫做main start，结束位置叫做main end；|| <'flex-basis'> ] 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。它的所有子元素自动成为容器成员，称为flex项目，简称“项目”。flex布局详细教程参考。
2024-02-23 11:37:47
328
原创 3. 无重复字符的最长子串
给定一个字符串 s ，请你找出其中不含有重复字符的 最长子串 的长度。请注意，你的答案必须是。因为无重复字符的最长子串是。因为无重复字符的最长子串是。因为无重复字符的最长子串是。，所以其长度为 3。，所以其长度为 1。，所以其长度为 3。
2024-02-22 11:41:15
360
原创 手写AJAX
2：HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。3：LOADING 下载中；responseText 属性已经包含部分数据。0：UNSENT 代理被创建，但尚未调用 open() 方法。1：OPENED open() 方法已经被调用。4：DONE 下载操作已完成。
2024-02-06 10:32:48
1496
原创 scss和less的区别
Sass(Scss)、Less 都是，他们定义了一种新的语言，其基本思想是，用一种专门的编程语言为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。
2024-02-05 11:50:25
1348
原创 Webpack的loader是什么
webpack自带的打包器只能支持JS文件 当我们想要加载css/less/scss/stylus/ts/md文件时，就需要用到loader loader的原理就是把文件内容包装成能运行的JS 比如 加载css需要用到style-loader和css-loader css-loader把代码从CSS代码变成export default str形式的JS代码 style-loader把代码挂载到head里的style标签里 style-loader用到了pitch钩子和request对象有待深入
2024-02-05 10:40:58
371
原创 Webpack插件浅析
Hot-Module-Replacement的热更新是依赖于webpack-dev-server，有时是在打包文件改变时更新打包文件或者重新加载刷新整个页面，HMR是只更新修改的部分。html-webpack-plugin的主要作用就是在webpack构建后生成html文件，同时把构建好入口js文件引入到生成的html文件中。而言，它实质上是一个转换器，将A文件编译成B文件，操作的是。在进行打包时，css代码会打包到js中，不利于文件缓存。比如将A文件编译成B文件，单纯的是一个文件转换过程。
2024-02-05 10:36:17
1227
原创 Webpack源码浅析
compliation就像是生产一部手机，生产的过程基本一致，但生产的手机可能是小米手机也可能是魅族手机。生命周期，之后根据webpack config文件的output配置的path属性，将文件输出到指定的文件夹。compilation代表的是一次编译作业，每一次的编译都可能不同；的加持，代码编写非常灵活，node中流行的callback回调机制（说的就是回调地狱），webpack使用的炉火纯青。至此，从入口文件开始，webpack收集完整了该模块的信息和依赖项，接下来就是如何进一步打包封装模块了。
2024-02-05 08:46:21
1329
1
原创 cookie、session、localStorage、sessionStorage
2 .session是基于cookie实现的，sessionId是存储在cookie中的（例如日常工作中去平台复制session的值，就是在请求头的Cookie字段里面）2. sessionStorage在会话结束后关闭（会话何时结束要看浏览器的行为，有可能是关闭浏览器会话结束，有可能再次打开浏览器点击恢复页面，还保持上一次的会话）2. cookie一般最多是4k，localStorage可以达到5M或10M（不同的浏览器不一样）1. cookie存储在浏览器的文件里，session存储在服务器的文件里。
2024-01-19 10:55:57
306
原创 同源策略和跨域
在服务端设置access-control-allow-origin 允许跨域的源。在浏览器中，所有的请求必须遵守同源策略，否则就会出现跨域问题。同源策略就是协议、ip和端口号三者必须相同。优点：可以代价比较小的实现跨域。缺点：不支持post请求。
2024-01-18 10:58:52
391
原创 实现本地存储函数useLocalStorage
watchEffect：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。watchEffect的特点可以查看。
2024-01-10 20:27:59
661
1
原创 TS元组类型Tuple
Tuple Type（中文翻译：元组类型），可以认为是一个有顺序的数组类型。将一个元组类型转换为对象类型，这个对象类型的键/值和元组中的元素对应。上述类型 TuleDemo 定义了一个元组类型，包含了。两种类型元素，元组长度为 2，其中第一个元素类型是。, 第二个元素类型是。
2024-01-08 20:48:40
435
原创 vue3 内置组件
内置组件无需注册便可以直接在模板中使用。它们也支持 tree-shake：仅在使用时才会包含在构建中。包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。将其插槽内容渲染到 DOM 中的另一个位置。任何时候都只能有一个活跃组件实例作为。中使用它们时，需要显式导入。生命周期钩子将被调用，用来替代。的直接子节点及其所有子孙节点。缓存包裹在其中的动态切换组件。元素或组件提供动画过渡效果。元素或组件提供过渡效果。
2024-01-08 14:49:09
405
原创 vue3生命周期
注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。缓存树的一部分，当组件被插入到 DOM 中时调用。缓存树的一部分，当组件从 DOM 中被移除时调用。注册一个钩子，在捕获了后代组件传递的错误时调用。注册一个回调函数，在组件实例被卸载之后调用。注册一个回调函数，在组件挂载完成后执行。注册一个钩子，在组件实例被卸载之前调用。注册一个钩子，在组件挂载之前调用。注册一个回调函数，若组件实例是。
2024-01-08 14:34:07
457
原创 vue 可写的computed
computed可以接受一个get、set函数的对象，变成可写的computed（创建一个可写的 ref 对象）。
2024-01-08 11:46:00
663
原创 常见的hooks
的前端命名规范，是块(Block)，元素（Element），修饰符（Modifier）的简写。modifier是对block或element的修饰，比如form–theme-dark。Block是模块，比如：article、dialog、sidebar、form、tab。Element为块里的元素，比如form里面的input、submit。可以获取窗口的宽度和高度，并且当窗口大小变化时自动更新。添加点击、键盘、滚动等监听事件。
2023-12-27 19:50:41
474
原创 http和https、http状态码分类
https是加了ssl外壳的http。https是一种通过计算机网络进行安全通信的传输协议，经由http进行通信，利用SSL/TLS建立全信道，加密数据包。https使用的主要目的是提供对网站服务器的身份认证，同时保护交换数据的隐私和完整性。http协议是hyper text transfer protocol的缩写。
2023-12-25 11:47:03
914
1
原创 http1、http1.1、http2
http2仍然存在问题，TCP+TSL建立连接的时间是主要瓶颈，没从根本上解决队头阻塞问题，如果遇到丢包，tcp协议还是会重新发送数据。QUIC 基于 UDP 实现，是 HTTP/3 中的底层支撑协议，该协议基于 UDP，又取了 TCP 中的精华，实现了即快又可靠的协议。http1.1中默认支持长连接，即在一个TCP连接上可以传输多个http请求和响应，减少了建立和关闭连接的消耗和延迟。队头阻塞是指：当顺序发送的请求序列中的一个请求因为某种原因阻塞时，在后面排队的请求也一并阻塞，导致客户端收不到数据。
2023-12-25 10:51:03
924
原创 手写promise
1.promise有且只有三个状态：pending、fulfilled、rejected，状态之间的转换是只允许pending转向fulfilled或rejected，其它任何状态都不能相互转换。3.注意在写调用函数时，多想想函数的this是什么，是否符合我们预期的this，如果不符合，就需要使用bind或call方法指定函数的this。手写promise的过程是按照promise A+标准，先写测试用例，然后测试驱动开发，开发一个满足测试用例的promise。接口提供了监视对 DOM 树所做更改的能力）
2023-12-22 19:54:53
374
原创 EventLoop笔记
在浏览器环境中只需要区分宏任务和微任务即可，微任务如promise由于宏任务setTimeout先执行，注意new Promise()是立即同步执行的，只有promise.then()里的内容是微任务。nexTick 实现方式是 promise,属于微任务,但是由于 IE 浏览器没有 promise,所以使用定时器的方式实现的,这又属于宏任务了。eventloop会在不停的循环执行这些阶段，当没有任务时，它会停留在poll阶段。简单来说，宏任务是一会儿执行的，微任务是马上执行的，执行顺序显而易见。
2023-12-22 10:17:12
358
原创 TS interface接口
简单来说，接口中可以定义属性和方法，声明属性的类型以及方法的类型。接口可以约束对象、函数、类的结构和类型，是一种必须遵守的契约。
2023-12-21 20:37:42
412
原创 TS 索引签名
上述例子中propName是索引签名的名称，只是为了可读性，其他没有任何意义，可以改写成任意名称。3.与外部数据源集成：索引签名还可以帮助将外部数据源（如数据库或 API）的结果集集成到代码中。索引签名是一种定义对象类型的方式，它允许使用数字或字符串或symbol作为索引来访问对象的属性。1.动态属性名称：不需要提前定义所有可能的属性名称，而是可以根据需要动态地添加和访问属性。2.扩展性：当需要添加新的属性时，使用索引签名可以避免修改现有的代码。最主要的作用是允许我们动态地添加或访问对象的属性。
2023-12-21 19:57:57
442
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人