- 博客(391)
- 资源 (6)
- 收藏
- 关注
原创 从 axios 源码学习设计模式
axios 的精髓在于他已经迭代了40个版本,npm 的 version 规则是首个版本号变化表示 api 不向下兼容,现在 axios 的主版本号已经从 0.x 迭代到了 1.x, 按理说应该和 vue 一样,是有 重大变更的。 而 axios 增加了这么多功能。却始终保持没有 api 明显变化。主要原因是 axios 内部使用了多种设计模式和架构模式。比如 适配器,桥接,代理,抽象工厂,微内核设计。
2023-07-27 01:24:28 877
原创 【前端精进之路】JS篇:第10期 深入原型与原型链
这里是小飞侠Pan🥳,立志成为一名优秀的前端程序媛!!!本篇文章收录于我的专栏:前端精进之路同时收录于我的github前端笔记仓库中,持续更新中,欢迎star~👉https://github.com/mengqiuleo/myNote这里并不是介绍原型链的基础知识,而是记录一些自己在看文章过程中以前没有注意到的点。constructor其实值存在于构造函数的原型身上,实例对象没有constructor。那为什么我们可以打印出实例对象的constructor属性是它的构造函数呢?通过一个例子来说明:当获..
2022-07-11 08:00:41 699 28
原创 JS数组解构赋值变量存在依赖关系
题目随便起的,在刷力扣 41.缺失的第一个正数 这个题的时候,出现了解构赋值的问题,对于按理说都是行的通的,和位置没有关系,本质上都是进行交换可是当我在题目中使用时是可以通过测试用例的,使用会超时。
2023-07-10 01:22:21 488
原创 vitest测试 element-plus二次封装组件时css文件报错
报错内容: Unknown file extension “.css” for D:\demo\omniButton\node_modules.pnpm\registry.npmmirror.com+element-plus@2.2.9_vue@3.2.37\node_modules\element-plus\theme-chalk\el-button.css。重启生效,vitest 会 hmr,如果未生效,请重启。
2023-06-22 23:58:48 1714
原创 包管理工具详解npm、yarn、cnpm、npx、pnpm
硬链接(hard link):硬链接(英语:hard link)是电脑文件系统中的多个文件平等地共享同一个文件存储单元;删除一个文件名字后,还可以用其它名字继续访问该文件;符号链接(软链接soft link、Symbolic link):符号链接(软链接、Symbolic link)是一类特殊的文件;其包含有一条以绝对路径或者相对路径的形式指向其它文件或者目录的引用;
2022-10-22 13:37:41 1803 1
原创 JavaScript模块化规范
每个文件就是一个模块,有自己的作用域。每个模块内部,module变量代表当前模块,是一个对象,它的exports属性(即module.exports)是对外的接口。module.exports属性表示当前模块对外输出的接口,其他文件加载该模块,实际上就是读取module.exports变量。为了方便,Node为每个模块提供一个exports变量,指向module.exports。require命令用于加载模块文件。
2022-10-19 17:49:34 1430
原创 前端代码规范实践指南(ESLint,Prettier,Husky...)
如果想自己定义提交规范也是可以的,首先要下载自定义规范约束的包替换第三方规范。变更extends: ['cz'], //采用 cz 自定义的提交规范 -> .cz-config.js};在项目根目录创建,可以再这个文件里自定义规范(下面这是我自定义的配置)新增value : '✨新增' , name : '新增: 新的内容' } , {value : '🐛修复' , name : '修复: 修复一个Bug' } , {
2022-10-17 21:19:12 2268
原创 Fetch入门
Body.blob()读取 Response 对象并且将它设置为已读(因为 Responses 对象被设置为了 stream 的方式,所以它们只能被读取一次),并返回一个被解析为 Blob 格式(二进制格式,包含二进制数据信息)的 Promise 对象。Body.text()读取 Response 对象并且将它设置为已读(因为 Responses 对象被设置为了 stream 的方式,所以它们只能被读取一次),并返回一个被解析为 USVString 格式(文本格式)的 Promise 对象。
2022-10-17 12:33:12 7556
原创 初探WebSocket
websocket是HTML5的一个新协议, 是一种在单个 TCP 连接上进行全双工通信的协议,它允许服务端向客户端传递信息,实现浏览器和客户端双工通信WebSocket 通常被应用在实时性要求较高的场景,例如赛事数据、股票证券、网页聊天和在线绘图等。举例:因为 HTTP 协议有一个缺陷:通信只能由客户端发起。举例来说,我们想了解今天的天气,只能是客户端向服务器发出请求,服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
2022-10-16 22:27:31 1340
原创 TCP 的 Keepalive 和 HTTP 的 Keep-Alive 是一个东西吗?
HTTP 的 Keep-Alive 也叫 HTTP 长连接,该功能是由「应用程序」实现的,可以使得用同一个 TCP 连接来发送和接收多个 HTTP 请求/应答,减少了 HTTP 短连接带来的多次 TCP 连接建立和释放的开销。TCP 的 Keepalive 也叫 TCP 保活机制,该功能是由「内核」实现的,当客户端和服务端长达一定时间没有进行数据交互时,内核为了确保该连接是否还有效,就会发送探测报文,来检测对方是否还在线,然后来决定是否要关闭该连接。别搞混了!
2022-10-16 21:10:04 2086
原创 【JavaScript设计模式】命令模式
假设有一个快餐店,而我是该餐厅的点餐服务员,那么我一天的工作应该是这样的:当某位客人点餐或者打来订餐电话后,我会把他的需求都写在清单上,然后交给厨房,客人不用关心是哪些厨师帮他炒菜。我们餐厅还可以满足客人需要的定时服务,比如客人可能当前正在回家的路上,要求1个小时后才开始炒他的菜,只要订单还在,厨师就不会忘记。客人也可以很方便地打电话来撤销订单。另外如果有太多的客人点餐,厨房可以按照订单的顺序排队炒菜。这些记录着订餐信息的清单,便是命令模式中的命令对象。
2022-10-15 22:10:33 824
原创 【JavaScript设计模式】观察者模式
这篇文章并不是笔者原创,而是在学习设计模式中对比较好的文章的提炼与总结,作为笔记便于自己复习。观察者模式有一个“别名”,叫(之所以别名加了引号,是因为两者之间存在着细微的差异),这个别名非常形象地诠释了观察者模式里两个核心的角色要素——“发布者”与“订阅者”。周一刚上班,前端开发李雷就被产品经理韩梅梅拉进了一个钉钉群——“员工管理系统需求第99次变更群”。这个群里不仅有李雷,还有后端开发 A,测试同学 B。三位技术同学看到这简单直白的群名便立刻做好了接受变更的准备、打算撸起袖子开始干了。此时韩梅梅却说:“别
2022-10-15 21:37:14 2101
原创 【JavaScript设计模式】适配器模式
装饰者模式和代理模式也不会改变原有对象的接口,但装饰者模式的作用是为了给对象增加功能。适配器模式不需要改变已有的接口,就能够使它们协同作用。适配器模式的目的是为了解决对象之间的接口不兼容的问题,通过适配器模式可以不更改源代码的情况下,让两个原本不兼容的对象在调用时正常工作。适配器模式的作用很像一个转接口. 本来iphone的充电器是不能直接插在电脑机箱上的, 而通过一个usb转接口就可以了.外观模式的作用倒是和适配器比较相似,有人把外观模式看成一组对象的适配器,但外观模式最显著的特点是定义了一个新的接口。
2022-10-15 21:26:50 843
原创 【JavaScript设计模式】装饰器模式
装饰者模式可以动态地给某个对象添加一些额外的职责,而不会影响从这个类中派生的其他对象。这种给对象动态地增加职责的方式称为。装饰者模式能够在不改变对象自身的基础上,在程序运行期间给对象动态地添加职责。跟继承相比,装饰者是一种更轻便灵活的做法,这是一种“即用即付”的方式,比如天冷了就多穿一件外套,需要飞行时就在头上插一支竹蜻蜓,遇到一堆食尸鬼时就点开 AOE(范围攻击)技能。该例中,我们写了一个Decorator装饰器类,它重写了实例对象的create方法,给其方法新增了一个,因此最后为其输出结果进行了装饰。
2022-10-15 21:25:50 1885
原创 vue2响应式原理
而对于v-model,在我们编译模板时,会针对v-model进行解析:如果发现当前节点有v-model(eg: v-model=‘str’),那就会监听input事件,当str的值发生变化时,会将用户输入的值赋值到str属性上,此时相当于属性值发生变化,observer就会检测到值的变化,那就会通知到dep,然后dep通知到watcher.每一个属性有一个dep属性,里面存放了这个属性的watcher,可能一个属性的dep中存放了很多个watcher,因为这个属性在很多地方都用到了。
2022-10-15 20:15:27 1175 1
原创 彻底搞懂v-model
而对于v-model,在我们编译模板时,会针对v-model进行解析:如果发现当前节点有v-model(eg: v-model=‘str’),那就会监听input事件,当str的值发生变化时,会将用户输入的值赋值到str属性上,此时相当于属性值发生变化,observer就会检测到值的变化,那就会通知到dep,然后dep通知到watcher.我们需要遵循单项数据流的原则,对于从父组件中传过来的prop属性不做修改,而是使用一个自定义属性承接prop的属性,并对我们的自定义属性进行修改。在这里不会详细解释。
2022-10-15 19:56:37 1523 1
原创 【vue3】手写简单vue3响应式原理
vue3响应式的核心是使用proxy👉核心是使用核心是使用上面都出现了函数:effect()函数默认上来会执行一次,然后当属性值发生变化时,effect函数又会执行。
2022-10-13 21:08:13 1602 3
原创 【Vue源码初探】四.渲染更新原理
到现在,我们已经实现了dep和watcher的收集,以及值改变时的更新操作。梳理:首先,我们会渲染当前组件,那么就会创建一个watcher,此时就会给Dep增加一个静态属性target,即。
2022-10-11 12:15:19 1132
原创 【Vue源码初探】三.初次渲染视图
现在,我们已经实现了render函数,将数据渲染到页面上的操作已经进行了一半了(我们实现了将数据转成ast,再转成render函数),接下来就是将render函数进行调用,挂载到页面上。下面我们就开始实现这个**mountComponent(vm, el)**函数。
2022-10-11 12:13:35 1048
原创 【Vue源码初探】二.模板编译
在上一节中,我们已经实现了初始化数据,并且对数据进行劫持,现在需要将数据渲染到页面上,即实现模板编译。首先,我们在测试的index.html中增加一些模板。background:yellow"
2022-10-11 12:12:31 977
原创 【Vue源码初探】一.Vue响应式原理
当我们对进行属性是对象时进行劫持并且遍历各个属性值时,走到defineReactive函数(这个函数是对对象的每一项进行监测的函数),进行set设置时,如果出现设置的值是一个新的对象,又会走observe函数,然后又会进到类的实例中,在类的实例中,又会对对象进行劫持,然后就会产生死循环。我们当时是将data从$options中取出,然后赋给了一个属性_data上,那么也就是说,我们的访问data是通过。)时,我们可以监测到。上面说到,我们对数据进行初始化,并且,实现了通过vm.data来访问。
2022-10-11 12:11:02 1182
原创 Git常见命令
简单来说就是:过去git merge允许将两个没有共同基础(服务器的和本地的就是没有共同基础,也就是没有共同祖先)的分支进行合并,这导致了一个后果:新创建的项目可能被一个毫不怀疑的维护者合并了很多没有必要的历史,到一个已经存在的项目中,目前这个命令已经被纠正,但是我们依然可以通过-- allow-unrelated-histories选项来逃逸这个限制,来合并两个独立的项目;Git 的默认分支名字是 master,在多次提交操作之后,你其实已经有一个指向最后那个提交对象的 master 分支;
2022-10-09 18:24:48 1366
原创 【解决ESlint的bug】return old(m, filename); Error [ERR_REQUIRE_ESM]: require() of ES Module
将根目录下的 `commitlint.config.js`文件后缀名改为 cjs,即 commitlint.config.cjs 文件。
2022-09-25 18:18:20 2089
原创 前端性能优化实践
当 Webpack 有多个 JavaScript 文件需要输出和压缩时,原本会使用 UglifyJS 去一个个挨着压缩再输出, 但是 ParallelUglifyPlugin 则会开启多个子进程,把对多个文件的压缩工作分配给多个子进程去完成,每个子进程其实还是通过 UglifyJS 去压缩代码,但是变成了并行执行。具体做法是把资源地址 URL 的修改与文件内容关联起来,也就是说,只有文件内容变化,才会导致相应 URL 的变更,从而实现文件级别的精确缓存控制。这样做的好处是每次更改我本地代码的文件的时候,
2022-09-24 11:50:56 485
原创 【前端】常见的图片格式及使用场景
格式优点缺点适用场景gif文件小,支持动画、透明,无兼容性问题只支持256种颜色色彩简单的logo、icon、动图jpg色彩丰富,文件小有损压缩,反复保存图片质量下降明显色彩丰富的图片/渐变图像png无损压缩,支持透明,简单图片尺寸小不支持动画,色彩丰富的图片尺寸大logo/icon/透明图webp文件小,支持有损和无损压缩,支持动画、透明浏览器兼容性不好支持webp格式的app和webview前端图片格式如何选择。
2022-09-24 10:20:30 1558 1
原创 前端性能优化指标 + 检测工具
尽快完成页面内容渲染尽快开始渲染(优化 FCP)尽快完成主要内容渲染(优化 LCP)尽快完成所有内容渲染(优化 Speed Index)减少长任务尽早执行长任务(优化 TTI)把长任务拆成小任务(优化 TBT)保证页面布局稳定(优化 CLS)
2022-09-24 08:38:44 798
原创 Chrome浏览器断点调试技巧
某些情况下,我们必须知道当前代码的执行顺序,以及每一步变量的执行状态来确定代码是否正确按照我们意愿执行。此时使用断点调试是非常明智的选择。
2022-09-23 20:19:47 16602 2
原创 跨域及解决
跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全措施。同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。–来源 MDN。
2022-09-23 16:02:02 1559
原创 【webpack】三种hash值
Hash:和整个项目的构建相关,只要项目文件有修改,整个项目构建的 hash 值就会更改Chunkhash:和 Webpack 打包的 chunk 有关,不同的 entry 会生出不同的 chunkhash:根据文件内容来定义 hash,文件内容不变,则 contenthash 不变。
2022-09-22 20:43:15 1902
原创 webpack 编译流程
找出入口文件后,从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理,再根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk。在以上过程中,Webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。可以读取到当前的模块资源,编译生成资源,变化的文件,以及依赖跟踪等状态信息。
2022-09-22 17:57:39 1043
原创 了解一下Babel
顺利生成代码,此时生成的代码并没有被编译,因为 Babel 将原来集成一体的各种编译功能分离出去,独立成插件,要编译文件需要安装对应的插件或者预设,我们经常看见的什么 @babel/preset-stage-0、@babel/preset-stage-1,@babel/preset-env 等就是干这些活的。虽然可以采用默认配置,但如果不需要照顾所有的浏览器,还是建议你配置目标浏览器和环境,这样可以保证编译后的代码体积足够小,因为在有的版本浏览器中,新语法本身就能执行,不需要编译。
2022-09-22 09:38:21 388 1
原创 AST抽象语法树
webpack和Lint等很多的工具和库的核心都是通过抽象语法树这个概念来实现对代码的检查、分析等操作的代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等如 JSLint、JSHint 对代码错误或风格的检查,发现一些潜在的错误IDE 的错误提示、格式化、高亮、自动补全等等代码混淆压缩UglifyJS2 等优化变更代码,改变代码结构使达到想要的结构代码打包工具 webpack、rollup 等等。
2022-09-21 23:20:28 2291
原创 Docker+github actions部署前端项目
在进行本篇实践前,建议先了解一下:使用linux+Nginx部署,使用docker部署,使用github actions部署.【vue项目部署】Linux+Nginx实现项目部署及跨域【github actions】部署前端项目【Docker】docker+Nginx部署前端项目在 vue 项目中增加 Dockerfile 文件 和 nginx.conf 配置文件部署时,首先将 dist + Dockerfile + nginx.conf 打成镜像 (docker build 相关明令)
2022-09-21 10:30:48 1528
原创 【Docker】docker+Nginx部署前端项目
命令的意思是将 Nginx 目录下的 default.conf 复制到 etc/nginx/conf.d/default.conf,用本地的 default.conf 配置来替换 Nginx 镜像里的默认配置。下面的配置直接照抄就好,特别注意,监听的端口号并不需要动,这里的80端口指的是容器的端口,最后我们会将容器的端口映射到我们宿主服务器的端口,比如映射到8888端口。这里镜像中的目录我们不要动,但需要保证我们项目的打包目录是。后面的test是我们构建的镜像的名称,我们可以在云服务器中的安全组进行设置。
2022-09-21 10:24:24 6195 1
提供一套基于Spring Boot-Shiro-Vue的权限管理思路.前后端都加以控制,做到按钮/接口级别的权限 (当前新版本已
2024-06-25
UU 加速插件 docker 版本(docker)
2024-06-25
学生成绩管理系统 大一的C语言大作业(c语言)
2024-06-25
已对接了 RT-Thread Sensor 框架的 DS18B20 驱动程序
2024-06-25
51单片机/MSP430单片机源代码(c++)
2024-06-25
A complete and graceful API for Wechat. 微信个人号接口、微信机器人及命令行微信,三十行即
2024-06-25
基于nodejs 的博客园爬虫项目(javascript)
2024-06-25
bcloud 的安装包-rpm(shell)
2024-06-25
粒子群算法优化支持向量机(python)
2024-06-25
用matlab,matplotlib和pandas画箱形图
2024-06-25
ROS通信代码实现及Gazebo仿真(Python+cmake)
2024-06-25
使用Docker 配置 LNMP 环境,使用compose一键部署
2024-06-25
研究生数学建模比赛-航班登机口分配(Python)
2024-06-25
计算机专业课(408)思维导图和笔记:计算机组成原理(第五版 王爱英),数据结构(王道),计算机网络(第七版 谢希仁),操作系统
2024-06-25
基于Proteus仿真的51单片机电子密码锁
2024-06-14
基于socket API之上的跨平台MQTT客户端
2024-06-14
分布式系统开发环境搭建极速教程(java)
2024-06-14
基于 Spring Boot 编写出的统一返回数据结构处理和统一异常处理的插件
2024-06-14
OpenCV图像处理的信用卡,卡号数字识别
2024-06-14
3个小项目分别是利用 Python 实现报表自动化、某连锁超市、某银行数据分析,展示了问题分解、数据清洗、数据分析与可视化的过程
2024-06-12
Python和R语言应用案例,提供1年的图书馆借阅数据,并进行大数据分析
2024-06-12
计算机网络课程设计Lab3,小组实验 兼容CGI的多线程 Web Server
2024-06-12
推荐系统基本知识,相关算法以及实现 (python)
2024-06-12
A free, in-browser JSON to CSV converter
2024-06-11
树状图控件,用来展示一个树状图形,数据结构类似TreeView 在企业信息系统里经常会用到,比如公司组织架构,产品BOM"
2024-06-11
Short link 短链接服务器(Go语言开发)
2024-06-11
基于react的后台管理项目模板(react)
2024-06-11
一款免费、开源,使用PHP语言开发的项目管理系统
2024-06-10
vtags 旨在开发一款在vim/emacs等通用编辑器下, 对verilog/VHDL的设计代码进行类似verdi的信号追踪、
2024-06-10
《Redis 深度历险》学习笔记与实践(Java)
2024-06-10
wumei-iot是一套开源的软硬件系统,可用于二次开发和学习,快速搭建自己的物联网/智能家居系统 硬件工程师可以把自己的设备集
2024-06-10
基于YOLO的食物卡路里检测系统(源码&部署教程&数据集)
2024-06-09
2020春哈工大操作系统实验环境一键配置
2024-06-09
基于consul的分布式锁工具,包含:互斥锁、信号量等工具
2024-06-09
神经网络的实现,包括bp神经网络和rbf神经网络
2024-06-09
嵌入式系统通用驱动程序接口及其实现-Spi设备驱动程序
2024-06-08
哈工大软件学院编译原理实验(Python实现)
2024-06-08
基于改进YOLOv7&OpenCV的行人过马路速度与交通灯实时监测系统(源码&教程)
2024-06-08
基于consul的分布式锁工具,包含:互斥锁、信号量等工具
2024-06-07
基于改进YOLO的玉米病害识别系统(部署教程&源码)
2024-06-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人