- 博客(55)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 TCP和UDP的区别
TCP适用于需要高可靠性的数据传输场景，如文件传输和网页浏览，而UDP适用于实时性要求较高的应用，如视频会议和在线游戏。TCP协议的适用场景：如文件传输（如FTP、HTTP）、发送或接收邮件（如POP3、IMAP、SMTP）、远程登录（如TELNET、SSH）等。TCP（Transmission Control Protocol），传输控制协议，是一种可靠、面向字节流的通信协议，面向字节流就是把上面应用层交下来的数据看成无结构的字节流来按顺序发送。UDP是无连接的协议，不需要建立连接，可以直接发送数据。
2024-03-28 11:38:32
387
原创 计算机OSI7层协议模型
OSI模型是由国际标准化组织（ISO）制定的一种网络通信的标准体系，旨在确保不同厂商的网络设备能够互联互通。该模型将网络通信划分为七个独立的层次，每一层负责特定的功能。这种分层设计使得网络协议的开发、维护和升级更加容易。
2024-03-27 16:45:56
420
原创 使用Python将多个pdf指定页整合到一个pdf文件中
在工作的一些场景中，有时需要我们将多个pdf文件中的内容提取出来，比如有10个pdf文件，我们要统一打印pdf文件的第一页或者最后一页…
2024-03-13 15:54:31
355
原创 常用的正则表达式
在项目开始实践中，我们经常遇到一些校验手机号、座机号、小数位、特殊字符之类的正则表达式，这里根据开发经验罗列了一下常见的正则表达式。原文详见。
2024-03-12 10:23:46
327
原创 forEach遍历访问set造成的无限循环问题
先给出一段代码，我们创建了一个集合set，它里面有一个元素数字1和2，接着我们调用forEach方法来遍历该集合。在遍历函数中，首先调用delete方法删除数字1，再执行了某些业务操作后紧接着调用add方法将数字1加回，最后打印'forEach'。如果我们在浏览器中执行这段代码，就会发现它会无限执行下去。
2023-07-25 16:19:33
400
2
原创 快速定位到ant-design form表单校验未通过的item
在项目开发中，我们经常遇见长长的表单，长到表单写花眼的那种，一屏放不下，滚动条还得往下滚动几下。当我们提交表单的时候，有的表单项校验未通过，且这个表单项未可视区域，这就会给用户造成一定的困扰，认为提交按钮点击没有反应或者认为系统做的不够人性化。于是就引申出下面的需求，点击提交按钮，未校验通过的表单项如果不在可视区域就滚动到可视区域。
2023-05-16 10:40:12
468
原创 vue核心原理之--理解Tree-Shaking
这个概念在前端领域是因为rollup.js而起，后来webpack等也加入支持的行列中。简单来说就是移除掉项目中永远不会被执行的代码（dead code），实际情况中，代码虽然依赖了某个模块，但其实只使用其中的某些功能。通过，将没有使用的模块代码移除掉，这样来达到删除无用代码的目的。
2023-05-15 15:28:14
731
原创 你不知道的JavaScript的事件循环
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。这也与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题JavaScript是一门单线程执行语言。这句话直接定义了JavaScript。
2023-05-15 15:21:26
419
原创 Vue3获取Dom元素与子组件
选项，导致可能存在null和undefined类型，所以为了解决这个问题才有了上述方案，不过还有另一种方案是。增加了一个是否为空的判断，这主要是为了解决TS报错的问题。，不仅可以得到更完善的类型提示，在编程过程中还可以让编辑器提供更完善的代码补全功能。提供的一个工具类型，可以获取构造函数类型的实例类型，因此将组件的类型声明为。现在在Vue3时代，需要稍微改变一点点方法 ，但是还依然使用ref来获取。在Vue2时我们想获取DOM元素或者组件节点时一般使用。的类型推导还不够智能，缺乏更有效的代码补全支持。
2023-03-22 11:00:19
1341
原创 npm包版本号详解
npm包在发布时，需要按照中的约定去更新设置，例如我们常见的1.0.01.0.10.0.1等这样的版本号，那么这些数字分别代表什么意思呢？下面我们将详细介绍。
2023-03-09 12:01:03
5196
原创 多页面应用MPA与多页面应用SPA的优缺
对比项SPAMPA项目结构一个主页面+若干路由组件多个完整的页面用户体验首次加载速度慢，后续页面切换响应速度快多个页面切换慢资源文件公用资源只需加载一次每个页面都需要加载自己的公用资源适用场景后台管理系统等不需要SEO的应用适用于对SEO要求高的应用，例如商城等页面效果切面页面可以轻松实现动画效果不利于实现刷新方式切换组件可以局部更新数据内容需要整页刷新数据处理单页面可以使用VUEX等共享数据浏览器本地缓存，URL参数等方式开发维护成本。
2023-02-24 14:59:06
461
原创 vue核心原理之--理解框架的编译时与运行时
现在我们已经大概了解了什么是运行时编译时编译+运行时、纯编译时等框架的区别，其实在我们使用的现代框架中Vue就是一个编译+运行时的框架。由于它没有编译的过程，因此我们没办法分析用户提供的内容，但是如果加入编译步骤，可能就大不一样了，我们可以分析用户提供的内容，看看哪些内容未来可能会改变，哪些内容永远不会改变，这样我们就可以在编译的时候提取这些信息，然后将其传递给Render函数，Render函数得到这些信息之后，就可以做进一步的优化了。然而，假如我们设计的框架是纯编译时的，那么它也可以分析用户提供的内容。
2023-02-13 17:55:07
834
原创 vue核心原理之--现代框架为什么使用虚拟DOM
在权衡了性能消耗、代码的可维护性，Vue（包括React等）主流框架，使用了虚拟DOM这个概念。当然这也仅仅是其中的一部分使用的理由，因为还有响应式等等。。。
2023-02-03 11:48:01
493
原创 JavaScript的原型链
JavaScript的继承主要是通过原型链实现的，所以理解原型链是掌握JavaScript继承的关键一环。原型链的继承的基本思想是通过原型链继承多个引用类型的属性和方法。
2022-12-26 09:55:41
491
原创 JavaScript的var、let、const变量声明
在中，我们一般通过、、三种方式显示的声明变量，其中和是在ES6中新增的命令，现在我们来分别介绍一下这三种声明变量的区别和要点。使用声明变量是之前的标准方式，那时候还没有和。使用定义变量，如果没有设置初始值，则变量会保存。在浏览器环境中，如果在全局作用域下使用声明变量，那么该变量默认会挂载在全局的对象上，如果上存在该属性或者方法，则此处声明的变量会覆盖原始的属性或者方法。考虑以下代码：函数作用域变量在函数作用域内使用关键字声明的变量，会成为该函数的局部变量；如果在函数作用域内未使用关键字进行变量赋值，那么
2022-12-07 17:05:59
434
原创 理解JavaScript的执行上下文
执行上下文：指当前执行环境中的变量、函数声明，参数（arguments），作用域链，this等信息。简而言之，执行上下文是评估和执行JavaScript代码的环境的抽象概念。每当Javascript代码在运行的时候，它都是在执行上下文中运行。
2022-11-23 15:54:02
138
原创 Web前端安全系列之：XSS攻防及Vue防御（万字长文）
Web 攻击技术的发展也可以分为几个阶段。在Web 1.0时代，人们更多的是关注服务器端动态脚本的安全问题，比如将一个可执行脚本（俗称webshell）上传到服务器上，从而获得权限。后续有出现了SQL注入，SQL注入的出现是Web安全史上的一个里程碑，SQL注入漏洞至今仍然是Web安全领域中的一个重要组成部分。再后续另一个里程碑的安全问题问世–XSS（跨站脚本攻击）。伴随着Web 2.0的兴起，XSS、CSRF等攻击已经变得更为强大。Web攻击的思路也从服务器端转向了客户端，转向了浏览器和用户。
2022-10-20 15:38:42
7955
原创 js对金额数据添加最大金额单位【千、万、十万...】
之类的，这些数据直接放到前端，给用户直接看的话，很不好读，不友好，常见的方法是对金额进行增加千分位分割。现在要解决的问题是给数字增加一个单位，即最大金额单位；关于增加千分位的方法，之前的文章已经实现过一次，
2022-09-20 16:12:13
1798
原创 Vue项目使用ant-design-vue文件上传到腾讯云
Bucket我们在项目中封装了http请求的公共方法，同时为看安全起见，将腾讯云的关键信息存储在远程服务器，需要上传文件时，先调用请求获取关键参数。//获取上传文件tokenconstgetCosAuth=function(params){......
2022-07-28 11:41:20
809
1
原创 从零开始搭建自己的cli脚手架
创建新的项目文件夹初始化项目生成的文件如下创建执行文件修改文件，增加以下代码：测试 index.js 文件给文件增加关于这句话的意思：在 cmd 中执行命令[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oKcUWl2f-1654848419552)(./imgs/link.png)]执行成功后，然后测试命令是否生效结果输出说明成功！！一个脚手架的搭建，需要很多额外的工具库，比如命令行指令的，命令问答的等等，本次重点介绍一些常用的 node 工具库：安装工具
2022-07-06 10:39:43
374
原创 vue3 无限下拉滚动插件vue3-infinite-scroll-better 使用详解
支持Vue3的滚动加载插件，所有用法和vue-infinite-scroll一致。并解决了一些bug。
2022-06-16 09:19:50
4030
原创 开发cli脚手架基础知识之 ---commander工具
简单使用一下commander的指令终端指令单个指令使用多指令复合使用其中和是一个意思，前者为简写，后者为全写。如果要传入多个参数，可以使用空格区分，如下所示：option默认值选项可以设置一个默认值。输入， 使用默认值输入自定义值取反值可以定义一个以开头的 型长选项。在命令行中使用该选项时，会将对应选项的值置为。当只定义了带的选项，未定义对应不带的选项时，该选项的默认值会被置为。选项的参数使用方括号声明表示参数是可选参数（如–optional [value]）。该选项在不带参数
2022-06-08 17:13:47
543
原创 vue核心原理之--图解 Vue3.0 编译器核心原理（Vue3.0源码解析）
图解vue3.0编译器核心原理概览Vue.js作为目前最流行的前端框架之一，一些概念和原理还是需要我们前端开发人员了解与深入理解的。Vue.js涉及的知识点很多，一些重要概念，例如：如何使用proxy实现响应式effect，虚拟DOM的Diff算法及演变过程，渲染器原理的实现、编译器、解析器的工资原理及末班编辑的优化过程等等；现在重点采用图解步骤分析一下编译器的简单工作原理；编译器概念编译器其实就是一段JavaScript代码程序，它将一种语言（A）编译成另外一种语言(B)，其中前者A通常被叫做
2022-05-31 11:34:03
2105
原创 JavaScript设计模式与开发实践-代理模式
代理模式代理模式的关键是，当客户不方便直接访问一个对象或者不满足需求时，提供一个替身对象来控制对这个对象的访问，客户实际上时访问的是替身。替身对象对请求作出一些处理之后，再把请求转给本体对象；代理模式的基本用法var Flower = function(){};var xiaoming = { sendFlower : function (target) { target.receiveFlower(flower); }};var B = { r
2022-05-17 14:34:11
90
原创 fullCalendar日程表在Vue项目中的应用
fullCalendar日程表在Vue项目中的应用fullCalendar相关API使用fullCalendar插件在项目中实现日程排版，支持天、月日程转换，自定义事件页面布局通过按钮切换天与月视图的转换，天视图回显具体的时分排版项目，月视图回显缩略信息<div class="order-day-calendar h-100 clearfix"> <div id='calendar' class="h-100" @contextmenu.prevent.stop="st
2022-05-06 11:56:55
4925
11
原创 JavaScript设计模式与开发实践-策略模式
策略模式策略模式计算奖金策略模式的定义：是指定义一系列的算法，把它们一个个封装起来。策略模式的目的是将算法的使用和算法的实现分离开来；一个基于策略模式的程序至少由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类Context,Context接受客户的请求，随后把请求委托给摸一个策略类。要做的这点，说明Context中要维持对某个策略对象的引用；const performanceS = function(){};performanceS.prot
2022-04-30 09:40:15
119
原创 JavaScript设计模式与开发实践-单例模式
单例模式简单的单例模式实现const Singletion = function (name) { this.name = name; this.instance = null;};Singletion.prototype.getName = function() { console.log(`name:${this.name}`);};Singletion.getInstance = function(name) { if(!this.instance) { this.instan
2022-04-30 09:38:26
1187
原创 微信 PC 端h5页面打开的内置浏览器开发者工具界面
困境项目开发的h5页面需要在微信端支持转发、分享功能，以及企业微信授权等相关权限功能，h5页面功能开发可以直接在Chrome浏览器的移动端模式开发，但是涉及微信权限时的一些功能，则需要在微信和企业微信中进行调试；微信开发者工具一些功能可以使用微信开发者工具，比如jsdk微信授权等如图所示：企业微信PC端调试企业微信调试时，需要在管理端打开dev调试功能开关然后打开企业微信，使用快捷键Ctrl+Alt+Shift+D,即可打开dev模式然后打开企业微信中的相关h5页面，右键点击即可打开C
2022-04-21 16:50:57
6624
原创 Pinia学习笔记之--核心概念Plugins and TypeScript
Plugins多亏了一个低级API, Pinia stores可以完全扩展。下面是一些你可以做的事情清单:为stores增加新属性在定义stores时添加新选项为stores增加新方法包装现有的方法改变甚至取消actions实现像Local Storage一样的副作用仅应用于特定的stores使用pinia.use()将插件添加到pinia实例中。最简单的例子是通过返回一个对象向所有stores添加一个静态属性:import { createPinia } from 'pinia'
2022-04-15 11:17:23
1399
原创 Pinia学习笔记之--核心概念Actions
ActionsActions相当于组件中的方法。他们可以被定义在defineStore()的actions属性下，它们非常适合定义业务逻辑。export const useStore = defineStore('main', { state: () => ({ counter: 0, }), actions: { increment() { this.counter++ }, randomizeCounter() { this.
2022-04-13 18:34:22
1150
原创 Pinia学习笔记之--核心概念Getters
Gettersgetter与Store状态的计算值完全相同。它们可以用defineStore()中的getters属性来定义。它们接收state作为第一个参数，以鼓励使用箭头函数:export const useStore = defineStore('main', { state: () => ({ counter: 0 }), getters: { doubleCount: (state) => state.counter * 2
2022-04-08 17:23:19
2578
原创 Pinia学习笔记之--核心概念State
核心概念定义Store在深入核心概念之前，我们需要知道store是使用defineStore()定义的，它需要一个唯一的名称，作为第一个参数传递import { defineStore } from 'pinia'// useStore 可以是任意的定义，比如useUser、useCart// 第一个参数必须是一个在应用程序中唯一的名称export const useStore = defineStore('main', { // 其它配置项})这个名称(也称为id)是必需的，P
2022-03-23 17:56:35
3163
原创 Pinia学习笔记之1--概览
Why PiniaPinia (pronounced /piːnjʌ/, like “peenya” in English) is the closest word to piña (pineapple in Spanish) that is a valid package name. A pineapple is in reality a group of individual flowers that join together to create a multiple fruit. Similar
2022-03-23 17:54:16
1327
原创 解决node项目SyntaxError: Cannot use import statement outside a module
SyntaxError: Cannot use import statement outside a module在package.json文件中增加"type": "module"如果没有此项配置，则默认值为CommonJs则相关文件引用需要均改为import，因为此时的require已经不在支持，否则会报ReferenceError: require is not defined in ES module scope, you can use import insteadimport ora
2022-03-02 14:41:12
1862
原创 Vue3.0 + tsx + ant-design-Vue中使用插槽slot+自定义v-model
vue3.0 + tsx + ant-design-vue中使用插槽slot+自定义v-model
2021-11-23 10:44:28
4674
4
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人