- 博客(42)
- 收藏
- 关注
RSS订阅原创 解决竞态问题
在我们开发的过程的中一些methods往往是是采用异步的写法当众多操作叠加到一起的时候顺序就无法保证，比如说搜索而言，在进行数据检索的时候之前的结果还没有出来，就进行了下一步的搜索或者新建等操作，这时就需要我们去确保线程的顺序。①在进行操作的时候添加loading效果设置为true，这时就可以防止其他操作的运行，loading可以封装为一个组件给全局使用。当进行新的请求操作时可以把之前未完成的请求取消。了解到浏览器处理线程的时候会按照同步和异步的顺序进行的。在发出请求时，使用当前时间戳标记这次请求的id。
2024-05-20 15:39:56
384
原创 label 的作用是什么？如何使用？
label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。
2024-04-13 21:58:51
349
原创 webpack里面loader的配置
每一个 loader 对应一个对象的形式，对象属性 test 为匹配的规则，一般情况为正则表达式。关于 loader 的配置，写在 module.rules 属性中，rules 是一个数组的形式，因此我们可以配置很多个 loader。
2024-04-10 20:50:03
520
原创 script标签中defer和async的区别
defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行；js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析。
2024-04-09 18:55:59
292
原创 计算机网络常见网络命令使用与协议的分析
传输控制1 Protoco 1，src端口：5511(5511)，DST端口：https(443)，Seq：0，Len：0源端口：5511(5511)互联网协议1，Src：10.7.44.8(10.7.44.8)，DST：103.252.114.101(103.252.114.101)传输控制协议1，5 rc端口：http(80)，DST端口：1818(1818)，Seq：0，Ack：0，Len：16超文本传输协议。鉴定：ox3e97(16023)F1ag：oxo 4(不破片)片段偏移：O。
2024-04-07 14:39:20
789
原创 计算机网络路由的配置
现在多数网络设备能够自动感知对端以太网卡的发送和接收口，会互相协商作出调整，协商好每条线的发送和接收用途。所以现在直连线，交叉线，全反线并不太严格要求了，设备能够自己调整。主机用的网卡和路由器用的网卡结构类似，功能类似。通信时如果使用直连线会产生“发送---发送”“接收---接收”的情况，不能正常通信。其余两台主机的IP分别是192.168.2.100 ，192.168.3.100。路由器的基本配置，单个路由器接口，多个路由器接口。路由器的基本配置，单个路由器接口，多个路由器接口。
2024-04-06 19:01:41
1115
原创 实现图片懒加载
首先我们将需要加载的图片资源地址保存在 img 标签的自定义属性中，获取每一个含有这个自定义属性的img标签，遍历每个img，并获取它的几何属性，监听页面滚动，判断这个图片是否进入了可视区域；若进入可视区域，则创建一个新的Img标签，src属性值为当前遍历到的自定义属性值，当新标签创建完成，删除旧标签，防止进入循环。
2024-04-05 19:17:42
120
原创 vue2与vue3相比哪个更好
3的话因为要return出去所以需要进行定义const，借助ref（）或者reactive（）进行响应式数据切换。但对于功能的开发更便捷因为所需的东西都放一块更好维护，适合大型项目的开发。userName: "张三",对于小型的项目来说2更快因为在写的时候直接在模块里面定义就行。2的话数据如果是响应式的话需要定义在data里面。2是选项式api，3是组合式api。vue2与vue3相比哪个更好。像3的话需要借助api比如。
2024-04-04 21:56:56
339
原创 数据仓库的建立
本实验使用Hive建立数据仓库，并使用HiveSQL对商品销售数据进行分析。通过本实验可以学习把本地数据集上传到数据仓库Hive中，并在Hive上创建数据库和外部表和使用HiveQL进行数据分析。熟悉Linux系统、MySQL、Hadoop、HBase、Hive、Sqoop、R、Eclipse等系统和软件的安装和使用；其中大部分问题都还是比较简单的，查询语句也比较直观，唯一的问题就是导入数据库的时候需要自己构建结构比较繁琐。熟悉在不同类型数据库之间进行数据相互导入导出；熟悉Hive数据仓库的使用。
2024-04-04 21:44:30
321
原创 watch于watcheffect的区别
第二个参数是数据发生变化后的回调函数，该函数接收三个参数：新值、旧值，以及一个用于注册副作用清理的回调函数。立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。由上述类型的值组成的数组。一个函数，返回一个值。
2024-04-02 19:36:34
893
原创 JavaScript的数据类型
基本数据类型包括：string，number，boolean，bigint，symbol，null，undefined。用于判断数据的类型，对象实例通过constructor对象访问他的构造函数（如果创建了一个对象改变了原型，就无法判断）引用数据类型包括：object，function，array，data，regexp。使用object对象的原型方法tostring判断数据类型。js里面的数据类型包括两种，基本数据类型和引用数据类型。也可用于判断类型是否存在于实例的原型链上返回的是布尔值。
2024-04-01 14:41:22
684
原创 前端优化gzip
gzip是GNUzip的缩写，是一种文件的压缩格式（也可以说是若干种文件压缩程序），类似的压缩格式还有compress（webpack），deflate等主要用于组件的压缩压缩的话主要分为两种，
2024-03-31 16:41:59
378
原创 display:inline-block详解
是一个CSS样式属性，它结合了inline和block两个元素类型的特性。在HTML和CSS中，你可以使用这个属性来创建一个块级元素，但是它不会像普通的块级元素（如）那样独占一行，而是会像行内元素（如）那样与其他元素并排显示。同时，元素可以设置宽度（width）和高度（height），就像块级元素一样。这使得成为一个非常有用的布局工具，特别是在需要创建复杂的布局，但又不希望元素独占一行的情况下。
2024-03-31 16:06:48
337
原创 li标签间的空白问题解决
浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个。中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。内的字符间隔设为默认letter-spacing:normal。换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。不足：有些容器是不能设置浮动，如左右切换的焦点图等。内的字符间隔，因此需要将。
2024-03-31 15:35:57
178
原创 DOCTYPE(文档类型)的作用
doctype是html5里面的一种标准通用标记语言的文档类型说明，目的就是告诉浏览器（解析器）应该用什么样（html或xhtml）的文档定义来解析文档，不同的渲染模式会影响浏览器对css代码 或者javascript脚本的解析，必须声明在html文档的第一排。Backcompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面，怪异模式中，页面用一种比较宽松的向后兼容的方式显示。CSS1Compat：标准模式，也是默认模式，浏览器使用w3c的标准解析渲染页面。浏览器以其的最高标准呈现页面。
2024-03-31 15:17:40
255
1
原创 setinterval和settimeout区别
setTimeout通常用于需要延迟执行的场合，如动画效果的延迟、按钮的防抖等；而setInterval则通常用于需要定时执行的场合，如轮播图的切换、时钟的更新、抽奖倒计时等。setinterval会不停重复执行指定的函数，直到被取消，且执行的频率是在经过设定的时间间隔里，执行一次回调函数，不段重复 ，直到被取消。settimeout只执行一次指定的函数，且是在延迟的时间后运行。执行回调函数也只执行一次。主要在于执行次数和执行频率的不同；
2024-03-30 15:21:10
473
原创 数据双向绑定原理
3. Watcher订阅者是Observer和Compile之间通信的桥梁，主要做的事情是: ①在自身实例化时往属性订阅器(dep)里面添加自己 ②自身必须有一个update()方法 ③待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。2. compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图。
2024-03-29 20:06:51
169
原创 什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？
回调函数有一个致命的弱点，就是容易写出回调地狱（Callback hell）。以上的代码虽然看上去利于阅读了，但是还是没有解决根本问题。回调函数有什么缺点？如何解决回调地狱问题？当然，回调函数还存在着别的几个缺点，比如不能使用。
2024-03-28 20:41:01
880
原创 Promise.all和Promise.race的区别的使用场景
需要注意，Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，这样当遇到发送多个请求并根据请求顺序获取和使用数据的场景，就可以使用Promise.all来解决。Promise.all中传入的是数组，返回的也是是数组，并且会将进行映射，传入的promise对象返回的值是按照顺序在数组中排列的，但是注意的是他们执行的顺序并不是按照顺序的，除非可迭代对象为空。实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是。
2024-03-27 18:02:52
347
1
原创 前端性能优化
当程序中动态分布的堆内存没有释放 或者无法释放时。这和js的垃圾回收机制有关，当内存中引用次数为0时内存才会释放，全局执行的上下文中的标记为不会引用才会被回收（比如说，定时器未清理，[闭包]当函数内部引用了外部函数的变量，并且该函数在外部函数执行后仍然存在，就会导致引用的变量无法被垃圾回收，do / while 死循环，[未释放资源]例如，使用发送请求时，如果没有正确处理和释放资源，可能会导致内存泄漏。确保在请求完成后正确关闭或释放资源，全局变量为未定义的或者胡乱定义引用了全局变量，监听事件没移除。
2024-03-26 19:03:36
692
原创 3月美团笔试应用题
光标会留在文本内，也就是说任意时候 0 <= cursor.position <= currentText.length 都成立。// 将光标向右移动 k 次。返回移动后光标左边 min(10, len) 个字符，其中 len 是光标左边的字符数目。// 将光标向左移动 k 次。返回移动后光标左边 min(10, len) 个字符，其中 len 是光标左边的字符数目。// text 添加到光标所在位置, 添加完后光标在 text 的右边。// 删除光标左边 k 个字符，返回实际删除的字符数目。
2024-03-26 18:10:43
170
原创 meta标签
keywords（页面关键词），descriptption（页面描述），refresh（页面重定向和刷新），viewport（适配移动端，控制视口的大小和比例）meta由name和content属性定义，用于描述页面文档的属性，比如作者，网页描述关键词等除了http固定的name还能有其他自定义的name。：文件将不被检索，且页面上的链接不可以被查询；：文件将被检索，且页面上的链接可以被查询；：是否允许用户缩放(yes/no）：页面上的链接不可以被查询。：页面上的链接可以被查询；
2024-03-25 16:44:32
344
转载 vue3为什么不能使用this
的使用受到了限制，主要是因为在 Vue 3 中引入了 Composition API，它提供了一种更灵活、更可组合的方式来组织和管理组件的逻辑。和 Composition API 的其他功能，你可以在 Vue 3 中编写更加清晰和可维护的代码。的使用是为了推广 Composition API，使组件逻辑更加灵活和可组合。函数在组件实例创建之前被调用，并且它是响应式系统的入口点，因此。函数中直接使用组件实例，确保响应式系统的正确性和一致性。关键字是不可用的，因为它不是组件实例的上下文。在 Vue 3 中，
2024-03-24 19:32:59
158
1
原创 阻止冒泡事件的发生
可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开。这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；alert('按钮被点击了');alert('按钮被点击了');alert('按钮被点击了');
2024-03-24 17:11:00
636
1
原创 css-页面布局
一般两栏布局指的是，两栏布局的具体实现：①利用浮动，将左边的元素宽度设置为固定值，并且设置向左浮动，将右边 的margin-left设置为200px宽度设置为auto（默认为他，撑满全部的父元素）②利用浮动，左侧元素设置固定大小，并左浮动，右侧元素设置overflow: hidden;这样右边就触发了BFC，BFC的区域不会与浮动元素发生重叠，所以两侧就不会发生重叠。③利用flex布局，将左边元素设置为固定宽度200px，将右边的元素设置为flex:1。
2024-03-23 17:12:10
788
原创 flex布局
标准盒子模型：宽度=内容的宽度（content）+ border（边框） + padding（内边距） + margin（外边距）低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin。
2024-03-22 16:08:49
617
1
原创 前后端实时数据通信
这个例子中，前端使用WebSocket与后端建立实时通信，发送需要转换的数据，并接收转换后的数据。实际应用中，你可能需要处理连接断开和重连的逻辑，以及错误处理等。以下是一个简单的例子，假设后端提供了一个接口来转换某种数据格式，前端使用JavaScript和WebSocket实现实时数据转换。前端实时展示转换后数据。后端提供数据转换接口。
2024-03-21 23:16:18
380
1
原创 css面试详解
CSS reset是一种常用的CSS样式重置方式，它的作用是将浏览器默认的样式重置为统一的样式，以避免不同浏览器之间的显示差异。常用的CSS reset包括normalize.css、reset.css等。css见解块级元素（block-level elements）：在HTML中，div、p、h1、h2、h3、h4、form、ul、li等元素被称为块级元素。它们会在页面中独占一行，默认情况下会自动换行。
2024-03-20 19:07:28
901
1
原创 html小练
块级元素有：div、p、h1-h6、ul、ol、li、table、form等。块级元素有：div、p、h1-h6、ul、ol、li、table、form等。复制代码 面试题:行内元素有哪些?面试题: title与h1的区别、b与strong 的区别、i与em 的区别?面试题: title与h1的区别、b与strong 的区别、i与em 的区别?面试题: title与h1的区别、b与strong 的区别、i与em 的区别?面试题: title与h1的区别、b与strong 的区别、i与em 的区别?
2024-03-17 20:15:33
561
1
原创 前端第三方组件库国内官网地址
Vant-ui 国内官网:Element-ui 官网:layui 官网:jQuery 官网:Apache ECharts 官网:微信开发文档官网:w3c国内官网:mdn国内官网:swiper官网:betterscroll官网
2024-03-15 20:11:44
1091
1
原创 promise入门
Promise.all() 方法接收一个promise的iterable类型（注：Array，Map，Set都属于ES6的iterable类型）,返回一个promise实例。思考题：在不使用Promise的情况下，如果实现一个计数器将输入的2个数字相加，在间隔1s后，将所得结果再进行下一次计算。Promise.resolve()方法会返回一个状态为fulfilled的promise对象。Promise.reject()方法返回一个带有拒绝原因的Promise对象。Promise的三种状态。
2024-03-11 15:47:50
335
vue3外卖系统模块简单权限界面
2024-04-02
前端程序员的职业规划应该是怎么样的
2024-03-24
TA创建的收藏夹 TA关注的收藏夹
TA关注的人