- 博客(241)
- 资源 (11)
- 收藏
- 关注
原创 “遥遥领先”的观察者模式
当你使用观察者模式时,你可以创建一个对象(称为主题或发布者),并允许其他对象(称为观察者或订阅者)订阅该主题。当主题状态发生变化时,所有订阅该主题的观察者都会收到通知。// 主题(Subject)或发布者对象(某宝平台)// 存储订阅的用户名单// 当有新的用户点击了添加订阅,添加到我们的订阅用户名单// 当已经买到手机的用户,点击取消订阅时,从订阅的用户名单中移除// 通过用户自己的手机号码给所有的用户发信息,通知所有订阅了的用户});// 当有新的手机到货时,通知所有用户。
2024-07-31 22:17:16
472
原创 5分钟,让你的JavaScript代码性能提升10倍
众所周知,网站的成功与失败在很大程度上取决于其性能表现。然而,性能并非仅指网站加载速度,它还涵盖了响应性、流畅度和效率等方面。影响网站性能快慢的因素多种多样,包括但不限于页面渲染速度、网络传输速度、服务器响应时间等。然而,在这些因素中最为重要且关键的是。让我们继续探讨一些经常影响 JavaScript 执行速度的常见问题!
2024-07-31 22:17:02
411
原创 前端工程化---前端环境变量管理
在旧的项目中,或许并没有采用现代化的环境变量管理方式,而是通过手动创建多个环境配置文件(如 config/dev.env.js、config/prod.env.js)来设置环境变量。是 webpack 中的一个插件,它的作用是定义全局的常量,这些常量在编译过程中会被替换为实际的值。在项目中,如果我们使用的是 vite ,要想在项目中使用变量的开头就需要是 VITE_,而不是 VITE_ 开头的变量就不能被获取到。是一个 Node.js 包,它的作用是为跨平台的运行命令设置环境变量。
2024-07-30 21:53:12
1145
原创 5分钟从0到1,学会webSocket的使用
WebSocket是在单个TCP连接上提供全双工通信的协议。它允许双方同时进行数据传输,而不需要等待对方的响应,简单说就是他是服务器和客户端相互主动传输信息的约定协议。
2024-07-30 21:53:02
1113
原创 为什么面试官都爱问websocket?
WebSocket 是一种在单个 TCP 连接上进行全双工通信的应用层协议,它弥补 HTTP 协议在持久通信能力上的不足,允许服务器主动向客户端推送数据,并且简化了客户端和服务器之间的数据交换。在 WebSocket 通讯中,浏览器和服务器只需完成一次握手,便可创建持久性连接。WebSocket最大特点是服务器可以主动向客户端推送信息,同时客户端也能够主动向服务器发送信息,实现了真正的双向平等对话,属于服务器推送技术的一种。webSocket就是服务器和客户端相互主动传输信息的约定协议。
2024-07-24 22:41:23
1118
原创 一篇文章帮你彻底搞懂扩展运算符
扩展运算符是一种操作符,它可以将我们可迭代对象扩展为单独的元素。常用于在函数调用、数组构造、构造字面量对象等情况下,将数组、类数组对象或字符串展开为单独的元素,或将对象展开为键值对。在语法层面展开数据。
2024-07-23 22:49:58
1018
原创 为什么我放弃了使用了4年的SASS转而选择使用回原生CSS
Sass 作为一个强大的CSS预处理器,在过去十年里广受大家好评。它能够帮助我们高效地组织可扩展和稳定的 CSS 代码。然而,随着CSS的快速发展。曾经只有 Sass 才有的特性现在已经集成到 CSS 中了,包括Sass最引以为豪的变量语法和嵌套语法。
2024-07-23 22:49:49
799
原创 HTML的查缺补漏(21 个容易被忽略的实用技巧)
HTML是构建网页的基础,掌握实用的技巧可以极大的提高开发效率。在日常开发中,一些容易被忽略的技巧却能带来意想不到的效果。接下来我将分享 21 个鲜为人知的编程技巧,帮助你提高编码水平,丰富对HTML的认知。代码效果放在了文章的最后面!!!使用标签可以为网页上的所有相对 URL 设置一个共同的基准 URL,这样做可以极大地简化和统一资源的管理,尤其是当你的网页资源分布在不同的目录或路径时。标签必须放在部分中,并且一个文档中只能有一个元素。
2024-07-22 23:06:19
839
原创 一篇文章帮你彻底搞懂剩余运算符!!
剩余参数也是一种操作符,它用于表示数组中的不定数量的参数。常用于将逗号隔开的值序列组合成一个数组或对象。它在语法层面将多个值组合成一个集合。
2024-07-18 22:23:47
326
原创 面试官:你知道怎么解决vue2响应式丢失吗?
但是通过遍历劫持对象的所有属性来实现响应式数据的方式,并不完美,存在很多缺点。例如当我们通过数组下标去修改数据时或者修改数组的长度、给对象不存在的属性赋值、或者使用delete删除对象的属性,这几种方式都不会被vue监听到,从而导致响应式丢失,视图不更新的问题。直接修改数组索引不会触发视图更新,但使用数组的变异方法(如 splice()、push()、pop()、shift()、unshift()、splice()、sort()、reverse() 等)可以保持响应式。
2024-07-18 22:23:20
1369
原创 五分钟搞懂 : 和 :: 的区别
它用于创建一些不在文档树中的元素,可以通过CSS生成并加以样式化。这些伪元素是选中元素内容的一部分,或者以选中元素为参照来定位,比如在元素内容之前(伪元素用于样式化文档的某些部分,这些部分并不是实际的DOM元素,但可以被视为文档树的一部分。伪元素以两个冒号 :: 开头,后跟伪元素名称。它们是元素在这些状态下的抽象表示,并不对应文档树中的实际元素。,它关注于描述一个元素的特定状态。的区别,并分享一些使用它们的技巧。/* 自定义输入框的占位符样式 */)插入内容,或者定制占位符的样式(
2024-07-16 22:41:19
1009
原创 如何检查对象中键是否存在?
在开发过程中,我们经常会遇到需要检查对象中是否存在某个键的情况。这可能是为了从对象中获取值,或者是为了判断某个功能是否可用。如何正确有效地执行此操作是很重要的。
2024-07-16 22:40:47
1242
原创 如何使用css实现手风琴效果
我们希望实现的效果是当鼠标移上时,出现一个类似手风琴展开的效果,折叠时,类似手风琴收缩的效果,类似于“accordion-body”的高度平滑的从0过度到100。最近在公司做需求遇到一个很有趣很常见的需求也是实现一个类似手风琴的css效果,当鼠标移动上时,展开,扩展高度,当鼠标移开手,收缩,高度为0。虽然这样有效,但其实这不是一个特别好的方法:因为很多时候内容的具体高度是不固定的。定义了一个固定值,当实际内容的高度比容器的高度高时就会产生溢出。:这样,我们的网格项目就能从 0 过渡到它的 “内容” 高度。
2024-07-15 23:16:45
638
原创 5 个你不知道的隐藏 CSS 属性
层叠样式表 (CSS) 是网页设计的骨架,它可以帮助我们轻松的设置网页的样式和格式。虽然大多数的 CSS 属性,例如颜色、字体大小和边距都被大家熟知,但还有许多鲜为人知的属性可以帮助我们设计添加功能。在这篇文章中,我们将介绍 5 个我们可能从未听说过的 CSS 属性,但它们可以更好的帮助我们开发网页项目。
2024-07-15 23:16:32
1073
原创 React组件的解耦小技巧
在这篇文章中,我们探讨了如何使用hook composition的方法,让React组件的逻辑更容易理解,并将其变成了一种更像是专注于展示的组件。这种hook composition的技巧就像一把有力的工具,可以帮助我们提高React组件的结构和可维护性。这个方法的核心思想是将业务逻辑和展示层清晰地分隔开,这样我们的组件就更容易阅读和测试。这种方式有助于提高代码的可重用性,并且可以更轻松地扩展React应用,使程序员可以专注于创建更加清晰和性能更佳的组件。
2024-07-14 20:13:55
995
原创 说一下GET请求和POST请求的区别
因为一个看似简单的问题就能考察出面试者对网络协议和通信的掌握程度以及对前后端开发基础知识是否了解、安全性意识是否足够强,以及综合分析与总结能力等。所以答的好可以让面试官对你刮目相看,答不好很可能马上就被面试官心里pass掉了。所以接下来我们就来好好回答一下这个问题!!
2024-07-14 19:38:24
2525
原创 在React项目中利用 Symbol 防止 XSS 攻击的小技巧
XSS(Cross-Site Scripting,跨站脚本攻击)是一种常见的网络安全漏洞,攻击者通过在网页中注入恶意脚本代码,使其在用户的浏览器中执行。这种攻击利用了网页应用程序对用户输入的不充分验证和转义,使得攻击者能够在受害者的浏览器上执行恶意脚本。存储型XSS:攻击者将恶意脚本代码存储在目标网站的数据库中,当用户访问包含该恶意代码的页面时,代码会从数据库中提取并在用户浏览器中执行。
2024-07-01 23:51:05
524
原创 flex讲解
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。Flex是的缩写,意为"弹性布局",Flex是CSS3新增的一种布局方式,它可以让容器的子元素在任何设备上都能够以相同的方式排列、对齐和分配空间,从而实现响应式布局。用来为盒状模型提供最大的灵活性。指定容器 display: flex 即可。简单的分为容器属性和元素属性。
2024-06-30 11:05:43
1028
原创 JavaScript面试宝典
节流:事件触发后,规定时间内,事件处理函数不能再次被调用。也就是说在规定的时间内,函数只能被调用一次,且是最先被触发调用的那次。防抖:多次触发事件,事件处理函数只能执行一次,并且是在触发操作结束时执行。也就是说,当一个事件被触发准备执行事件函数前,会等待一定的时间(这时间是码农自己去定义的,比如 1 秒),如果没有再次被触发,那么就执行,如果被触发了,那就本次作废,重新从新触发的时间开始计算,并再次等待 1 秒,直到能最终执行!使用场景节流:滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交……
2024-06-30 11:05:17
883
原创 Vue 面试专题
1.一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。2.如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。定义:以JavaScript 对象 (VNode 节点) 作为基础的树,用对象的属性来描述节点,最终可以通过一系列操作使这棵树映射到真实环境上优点:可以减少直接操作真实dom的次数,提高了性能抽象了原本的渲染过程,实现了跨平台的能力。
2024-06-29 18:32:32
907
原创 React的生命周期讲解
所谓的React生命周期,就是指组件从被创建出来,到被使用,最后被销毁的这么一个过程。而在这个过程中,React提供了我们会自动执行的不同的钩子函数,我们称之为生命周期函数。**组件的生命周期大致分为三个阶段:组件挂载阶段,组件更新阶段,组件销毁卸载阶段 **
2024-06-29 18:32:17
749
原创 React Router 的详细讲解以及基本使用教程
因此,为了在不刷新整个网页的情况下在不同的视图之间进行切换,我们需要一种路由机制,以便在不同的视图之间切换而不用刷新整个网页.而 React-Router就是目前最好的React路由解决方案。React Router 是一个基于 React之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。API 来处理URL的变化,并根据URL的路径匹配渲染相应的组件。学习使用React Router之前先了解React Router提供的实现导航和路由功能的三个主要组件。
2024-06-29 00:40:39
429
原创 DOCTYPE的详细讲解
我们在创建一个HTML文件时都会有一个标签,虽然他很不起眼,但是他在我们的HTML文件只能却是很重要的。今天我们就来好好分析一下它的作用!!!
2024-06-29 00:17:35
584
原创 v8引擎的详细讲解
要讲V8引擎,首先我们要先讲一下浏览器,为什么呢,因为我们最常用的浏览器Google 的内核就是由V8引擎和WebCore组成的。首先我们要先了解浏览器的内核和浏览器的工作原理。
2024-06-27 21:09:56
1144
原创 React的Props、生命周期
Props” 是 React 中用于传递数据给组件的一种机制,通常作为组件的参数进行传递。的,意味着一旦将数据传递给组件的 props,组件就不能直接修改这些 props 的值。所以。
2024-06-27 21:09:28
1340
原创 什么是对象的原型?
默认情况下, 原生的constructor属性是不可枚举的,如果希望解决这个问题, 就可以使用我们前面介绍的Object.defineProperty()函数了。我们在上一个构造函数的方式创建对象时,有一个弊端:会创建出重复的函数,比如running、eating这些函数。不是的,因为它是一个函数,才有了这个特殊的属性。你可能会问题,是不是因为函数是一个对象,所以它有prototype的属性呢?既然字面量创建的对象会有原型,那么创建的函数也会有原型吗?答案是有的,只要是对象都会有这样的一个内置属性;
2024-06-26 15:16:23
875
原创 VNode是什么?
VNode的全称是Virtual Node,也就是虚拟节点.它是指一个抽象的节点对象,用于描述真实DOM中的元素。在前端框架中,通过操作VNode来实现虚拟DOM,从而提高性能。
2024-06-26 15:16:14
1016
原创 VUE的axios的详细介绍和用法
这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.原因是我们的项目部署在domain1.com服务器上时, 是不能直接访问domain2.com服务器上的资料的,会产生跨域问题。标签的src帮助我们去服务器请求到数据, 将数据当做一个javascript的函数来执行, 并且执行的过程中传入我们需要的json。jQuery的代码要1w+行,而Vue的代码才1w+行.引用用这个框架反而使得我们的项目更加臃肿。响应的失败拦截中,可以根据status判断报错的错误码,跳转到不同的错误提示页面。
2024-06-25 15:12:01
1058
原创 前端算法题----合并两个有序数组
因为题目要求是把所有的值合并到 nums1 里,并不是返回一个新数组,所以说在这里 nums1 是一个长度可以存储nums2的容器。但是这个容器,它不是空的,而是前面个格子是有内容,但是后面是空的而且空的长度刚好可以放下nums2。如果我们从前往后填补,就会覆盖掉我们原来的值。而从后往前填补,我们填的都是没有内容的格子,这样会省掉很多麻烦。由于 nums1 的数值位数和 nums2 并不一定是一样长的。如果提前遍历完的数组是 nums1 ,剩下的是 nums2。
2024-06-25 15:11:52
744
原创 前端算法题----三数求和问题
双指针法,它可以做到空间换时间;另一方面,它也可以帮我们降低问题的复杂度双指针法用在涉及求和、比大小类的数组题目里时,大前提往往是,该数组必须有序。否则双指针根本无法帮助我们缩小定位的范围,压根没有意义当我们看到有序数组这个关键条件时,就应该尝试使用对撞指针解决问题。伙伴们,如果你觉得我写的文章对你有帮助就给zayyo点一个赞👍或者关注➕都是对我最大的支持。当然你也可以加我微信:IsZhangjianhao,邀你进我的前端学习交流群,一起学习前端,成为更优秀的工程师~
2024-06-23 14:43:39
552
原创 前端算法题----合并两个有序数组
因为题目要求是把所有的值合并到 nums1 里,并不是返回一个新数组,所以说在这里 nums1 是一个长度可以存储nums2的容器。但是这个容器,它不是空的,而是前面个格子是有内容,但是后面是空的而且空的长度刚好可以放下nums2。如果我们从前往后填补,就会覆盖掉我们原来的值。而从后往前填补,我们填的都是没有内容的格子,这样会省掉很多麻烦。由于 nums1 的数值位数和 nums2 并不一定是一样长的。如果提前遍历完的数组是 nums1 ,剩下的是 nums2。
2024-06-23 14:42:52
941
原创 如何对JS 中的数据类型进行检测
当JavaScript在内部判断一个值的类型时,会使用一个表示类型的标记位。在表示对象的标记位中,null的值为全零,而表示对象的标记位必须至少有一个位为1。typeof 在对值类型 number、string、boolean 、null 、 undefined、 以及引用类型的 function 的反应是精准的;是为了改变toString函数内部的this指向并,将要检测的值作为方法的上下文(即this),我们可以确保返回的字符串是准确的对象类型,同时也防止。方法会返回一个表示该对象的字符串。
2024-06-23 03:52:25
428
原创 面试最爱问的浏览器的缓存机制问题
浏览器的缓存是指浏览器在处理网络资源时,将这些资源存储在本地磁盘或内存中,并在后续的请求中重复使用这些缓存的资源。它旨在提高网页加载速度、减少网络流量和服务器负载。强缓存是指浏览器在请求资源时,直接从本地缓存中获取资源,并且不会发送请求到服务器。协商缓存是指浏览器在请求资源时,浏览器和服务器之间协商确定是否使用缓存副本的形式。如果资源的强缓存失效(即过期),浏览器将向服务器发送请求,并在请求中携带上次缓存的相关信息。服务器收到请求后,会根据携带的信息来判断资源是否有更新。
2024-06-23 03:52:15
1193
原创 React的State和setState
首先先给大家用代码介绍什么是浅合并person: {age: 25person: {});render() {return (上述示例中,我们的状态对象 person 包含了 name 和 age 属性。当点击按钮时,我们调用 setState() 更新状态中 person 对象的 name 属性。由于状态更新是基于浅合并的方式,React 会用新的 person 对象替换当前状态中的 person 对象,导致 age 属性丢失。
2024-06-21 23:15:25
832
原创 React中的JSX应该怎么用
JSX = Javascript + XML,JSX是一个 JavaScript 的语法扩展。JSX可以很好地描述 UI 应该呈现出它应有交互的本质形式并且其完全可以和JavaScript融合在一起使用。而且具有 JavaScript 的全部功能。JSX 可以生成 React “元素”。
2024-06-21 00:15:12
599
1
原创 React的状态提升和组合
通常,多个组件需要反映相同的变化数据,这时我们建议将共享状态提升到最近的共同父组件中去示例:我们写一个关于热水沸腾的组件,当我们在输入框输入的温度大于100度时,文字会显示热水沸腾。这样有两个输入框分别是摄氏度和华氏度。我们要把他们两个的温度同步。
2024-06-21 00:14:31
763
原创 React的表单组件
通常我们的React组件都会有自己的state数据,但是这和我们的JavaScript的表单元素的数据是不相同的。那我们要如何让JavaScript中的数据和我们React里的state数据保持一致呢?这就需要我们的React的受控组件了.那什么是受控组件呢?
2024-06-21 00:13:55
311
手机自动跳广告,给大家安利这款开屏跳过APP广告很强大它是基于应用跳过规则订阅的方式实现跳开屏你可以理解为跳过开屏界的TVb
2024-08-31
商超、百货、便利店、收银系统
2024-08-11
网店快速合同报价生成工具
2024-08-11
图加水印工具-V1.0.rar
2024-08-11
一款PDF转换和编辑工具
2024-05-15
一键关闭 Win11烦人广告 ,删除 Win11 各处广告的 GUI 工具
2024-05-15
鼠标自动化软件-可以录制鼠标操作事假自动执行
2024-05-15
上班摸鱼-全局老板键工具
2024-05-15
超级好用可视化爬虫软件
2024-05-15
一键定时自动化任务软件
2024-05-15
一键自动化文件更名管理器
2023-09-10
c语言+从键盘输入10个无序的整数,存放在数组中,找出数组中最大值与最小值的所在的位置,并输出数组元素所在的位置与数组元素的值
2023-07-13
编写微信界面(UI界面设计-移动平台开发技术-gddrxy
2023-03-30
Activity&Intent的使用-移动平台开发技术-gddrxy
2023-03-30
MallocLab实验-计算机系统基础-gddrxy
2023-03-30
ShellLab实验-计算机系统基础-gddrxy
2023-03-30
ProxyLab实验-计算机系统基础-gddrxy
2023-03-30
CacheLab实验-计算机系统基础-gddrxy
2023-03-30
AttackLab实验-计算机系统基础-gddrxy
2023-03-30
BinaryBomb实验-计算机系统基础-gddrxy
2023-03-30
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅