web前端
文章平均质量分 68
godlike-icy
努力学习,不断超越!
展开
-
React高频面试题100+题,这一篇就够了!
前端React100+道高频面试题原创 2023-10-20 17:40:20 · 259 阅读 · 0 评论 -
img标签之间为什么会产生间隙?(附解决方案)
在HTML中,img标签是行内元素,它们之间的空格或换行符会被解析为文本节点。这些文本节点会占据一定的空间,导致img标签之间产生缝隙的现象。原创 2023-09-14 17:46:05 · 809 阅读 · 0 评论 -
一分钟教你学会浏览器调试工具debugger
调试代码:在开发者工具的 “Sources” 或 “调试” 面板中,找到你的源代码文件(通常在 “localhost” 或 “webpack” 目录下),然后找到你添加了 debugger 的代码行。查看变量和调试信息:在开发者工具的 “Sources” 或 “调试” 面板中,你可以查看和检查代码中的变量值、调用栈和其他调试信息。然后,可以使用调试工具栏中的按钮(如 “继续”、“单步执行”、“跳过”)来逐行执行代码,并观察变量的值和调试信息。触发断点:在浏览器中执行触发该断点的操作。原创 2023-09-07 14:00:26 · 2790 阅读 · 0 评论 -
【React】精选5题
区别:函数组件比类组件更简洁,没有繁琐的生命周期和状态管理,适用于简单的UI组件。类组件可以拥有自己的状态和生命周期方法,更适合复杂的交互逻辑和数据管理。原创 2023-08-28 19:14:16 · 344 阅读 · 0 评论 -
【React】精选5题
Props:组件的数据流向一般是单向的,父组件通过 Props 将数据传递给子组件。子组件可以通过 this.props 来访问这些数据。父组件也可以通过 Props 向子组件传递函数,使得子组件可以向父组件发送消息。Context:React 的 Context API 可以用于在组件树中共享数据,从而避免 Props drilling(即将 Props 层层传递给深层组件)。原创 2023-08-15 15:54:31 · 1584 阅读 · 0 评论 -
兼容各大浏览器css隐藏滚动条
【代码】各大浏览器css隐藏滚动条。原创 2023-08-14 17:11:56 · 250 阅读 · 0 评论 -
【React】精选5题
React.lazy() 和 React.Suspense 的提出为现代 React 应用的性能优化和工程化提供了便捷之路。React.lazy 可以让我们像渲染常规组件一样处理动态引入的组件,结合 Suspense 可以更优雅地展现组件懒加载的过渡动画以及处理加载异常的场景。原创 2023-08-14 15:58:32 · 478 阅读 · 0 评论 -
【React】精选10题
在 React 中,当组件的状态发生变化时,React 会重新渲染组件。为了提高渲染效率,React 会使用一种叫做 diff 算法(也称为协调算法)来计算出哪些部分需要更新,哪些部分不需要更新。简单来说,diff 算法就是比较两棵树的差异,然后将差异应用到真实的 DOM 树上,从而实现只更新必要的部分,避免全量更新。React 中的 diff 算法具体实现如下:对比两棵树的根节点,如果类型不同,则直接替换整个节点及其子节点,不再进行进一步比较;如果类型相同,则进入下一步。原创 2023-08-11 12:25:31 · 1274 阅读 · 0 评论 -
【React】精选5题
受控组件是指由 React 组件管理其内部状态的表单元素。这意味着表单元素的值由组件的 state 控制,并通过回调函数来更新状态。当用户与受控组件交互时,组件会更新其状态,并在需要时将新的值传递给表单元素。通过受控组件,你可以实时获取和更新表单元素的值,并在组件的 state 中进行处理。这使得对表单数据进行验证、处理和提交变得更加灵活和可控。另一方面,非受控组件则是由 DOM 自己管理其值的表单元素。在非受控组件中,你需要使用 ref 来获取表单元素的值,并手动处理用户输入的数据。原创 2023-07-21 13:47:03 · 286 阅读 · 0 评论 -
react目录结构
实际开发中也可以简单按照个人风格调整,比如const单独拿出来,不放在文件夹中,因为实际上并没有那么多常量去使用。utils也可以放在最外层而不用放在文件夹中。i18n:i18n国际化,各种语言的翻译。contants:常量文件夹,存放常量。components:存放全局组件。utils:存放一些常用函数的封装。assets:放置原始资源文件。比较全面的react目录结构。router:路由文件夹。pages:页面文件夹。原创 2023-07-21 10:39:10 · 423 阅读 · 0 评论 -
【React】react-router v6 基础 (含代码)
几分种学会react-router v6原创 2023-04-14 10:36:09 · 532 阅读 · 5 评论 -
React教程(五):Hooks
hooks本质:一套能够使函数组件更强大更灵活的`钩子`。原创 2023-04-06 16:26:01 · 417 阅读 · 0 评论 -
TS入门基础总结
TS类型基础总结原创 2023-04-06 15:37:02 · 617 阅读 · 0 评论 -
tsconfig.json文件快捷详解
tsconfig文件详解原创 2023-04-06 15:16:02 · 372 阅读 · 1 评论 -
React教程(四):React组件进阶
组件children属性,props校验,以及React生命周期函数原创 2023-03-31 16:42:04 · 309 阅读 · 1 评论 -
React教程(三):React组件通信
组件通信方式可以归纳为以下几种情况:1. 父子关系(比较常用)2. 兄弟关系- 自定义时间模式产生技术方法 eventBus / 通过共同的父组件通信3. 其他关系 - mbox / redux / 基于hook的方案### 1.父传子原创 2023-03-29 14:42:55 · 478 阅读 · 0 评论 -
flex布局一个很有意思的事情----align-items你不知道的效果
在flex容器的子元素中没有设置高度,其高度是按照该子元素的子元素(父元素的孙子元素)内容撑开。同时我在其同级的子元素下渲染了一个同样没有设置高度的不同ui(假定它没有任何内容),`那么它的高度将会自动拉伸到和其他flex布局下的子元素相同,且以最高的子元素(即父元素高度)为基准`。原因放在后面了,大家耐心看完哈~原创 2023-03-29 11:15:23 · 684 阅读 · 0 评论 -
React教程(一):React基础
一个专注于构建用户界面的javascript库,和vue和angular并称前端三大框架,不夸张的说,react引领了很多新思想,世界范围内最流行的的js前端框架。概念:JSX是javascript XML(HTML)的缩写,表示在JS代码中书写HTML结构。作用:在React中创建HTML结构(页面UI结构)优势:1)采用类似HTML的语法,降低学习成本,即会用HTML就会JSX2)充分利用JS自身的可编程能力创建HTML结构。原创 2023-03-23 14:46:12 · 790 阅读 · 1 评论 -
React教程(二):React组件基础
React 允许你将标记、CSS 和 JavaScript 组合成自定义“组件”,即应用程序中可复用的 UI 元素。原创 2023-03-27 18:50:21 · 639 阅读 · 1 评论 -
数组求和方法总结,学点干货
数组求和方法总结原创 2023-02-22 18:37:06 · 1897 阅读 · 0 评论 -
VS Code终端中文乱码 或 VS code 中文插件不生效问题
vscode小技巧原创 2022-12-13 14:49:28 · 591 阅读 · 0 评论 -
防抖与节流(立即执行与非立即执行)详解
防抖:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。节流:每隔一段时间,只执行一次函数。原创 2022-10-27 13:27:20 · 320 阅读 · 0 评论 -
js实现数组转树
确定根节点之后,利用递归来构造children。原创 2022-10-25 19:06:43 · 210 阅读 · 0 评论 -
理解js发布订阅模式
**订阅**: 用户将事件存入订阅中心,事件名是唯一的,具体的事件是一个函数。接受参数(事件名,fn)存入格式 key :[fn,fn,fn] ,其中key是事件名,一定要确保事件名唯一。**发布**:将数据推送给订阅中心下所有key为指定事件名的数组中的所有方法。接受参数,(事件名,数据),事件名用来匹配订阅中心订阅的事件,data数据交给事件里的函数来执行。**取消订阅**: 接受参数(事件名,fn)。将事件数组中该方法清空就行,需要匹配一下用户传入的fn,当用户不传入fn时,则直接清空原创 2022-10-25 16:35:03 · 535 阅读 · 0 评论 -
HTML5新特性
HTML5新特性原创 2022-10-21 16:02:50 · 1372 阅读 · 2 评论 -
浅谈前端性能优化手段
**前端性能优化分为两类,一类是让`文件加载更快`,另一类是让`文件渲染更快`。**原创 2022-10-20 17:00:23 · 214 阅读 · 0 评论 -
利用canvas实现根据背景图片主色调动态展示字体颜色
主要通过canvas上下文对象中drawImage方法,去复刻绘制一份图片(注意该canvas不做展示,最好使用display:none隐藏),然后利用getImageData方法获取图片数据,对获取到的图片数据进行一系列判断操作,得出图片的主色调,然后再进行灰度值计算,根据灰度值判断图片的明暗从而设置出合理的字体颜色。原创 2022-10-20 00:11:58 · 1500 阅读 · 1 评论 -
前端深拷贝与浅拷贝(附实现方法)
创建一个新对象,如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址。总而言之,浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存。但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。创建一个新对象,如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,则从堆内存中开辟一个新的区域存放该引用类型指向的堆内存中的值,且修改新对象的值不会影响原对象。结论:没有影响,深拷贝成功。函数没了,正则变为空对象。原创 2022-10-18 20:23:59 · 5758 阅读 · 4 评论 -
css关于文本溢出
值得注意的是,只有当dispaly:-webkit-box 且-webkit-box-orient: vertical;Two-value syntax 表示两行语法,text-overflow是支持传入两个值的,如: text-overflow: clip clip;截断边缘处需要放省略号,它有固定宽度,当判断显示的内容不够显示省略号时,会把整个单词都隐藏,否则单词会被截断部分显示省略。当传入两个值的时候,第一个值表示左边超出部分的省略,第二个值表示右边超出的省略。省略边缘单词的长短可能会影响省略效果。原创 2022-10-17 18:56:52 · 5374 阅读 · 0 评论 -
吸顶效果:1.css属性sticky优缺点 2.简单js实现吸顶效果
document.documentElement.scrollTop 有些移动端不支持,导致无法获取正确的滚动高度,使用document.body.scrollTop移动端也能正常获取,兼容一下)(小细节:offsetTop计算的是当前元素距离父元素顶部的高度,多层嵌套则需要递归叠加offsetTop,所以建议是选取最外面的那层元素,则可以直接获取距离窗口的高度)当页面滚动高度超过元素距离窗口的高度,设置为fixed,且top为0(当然bottom也可以,数值随便设)1)计算元素距离窗口的高度。原创 2022-10-10 12:58:06 · 2176 阅读 · 1 评论 -
实现图片自适应居中的一些方法,以及完美解决方法———object-fit
可以看到我们需要明确的知道图片的宽高才能应用不同的样式,除非图片是1:1的正方形,否则必然会出现是宽度自适应还是高度自适应的问题。/* 高度100%,宽度自适应,原图是宽度小于高度,所以宽度不设置用来自适应。*如果是宽度大于高度,则宽度100%,高度不设置用来自适应。/* 高度100%,宽度自适应,原图是宽度小于高度,所以宽度不设置用来自适应。*如果是宽度大于高度,则宽度100%,高度不设置用来自适应。*千万不能都宽高都设置100%,否则图片会被拉伸变形!/* 宽度和高度务必都要设置成100%*/原创 2022-09-26 17:44:38 · 1290 阅读 · 2 评论 -
es5构造函数与es6构造函数
构造函数,是一种特殊的方法。主要用来在创建对象时初始化对象, 即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。通过 class 关键字可以定义类,提供了更接近传统语言的写法,引入了 Class (类)这个概念作为对象的模板。...原创 2022-08-26 18:07:00 · 682 阅读 · 0 评论 -
node_modules包路径查找规则,依赖版本生效规则
但它们的版本不一样。模块之间是互相独立的,他们都会在它自身的node_module里先找,如果都找到了,那他们所用的模块确实是不同版本的。简而言之,当前的模块的node_modules找到了自己的依赖里使用的这个包,就不会再向上查找了,所以你即使在最外层的模块里加载了最新的这个包,那么它也不会生效。即使你在项目最外层的package.json里引入了2.2.0以上的版本,那么它并不会被向上加载到。若果追踪到文件系统的根目录也没有找到对应的依赖,那么nodejs就会找不到对应模块的报错。...原创 2022-08-26 11:14:23 · 4556 阅读 · 2 评论 -
前端面试题合集6-8(BFC详解,js判断变量类型方式详解,css样式权重/样式优先级)
BFC(Block Formatting Context)块级格式化上下文,是Web页面一块独立的渲染区域,内部元素的渲染不会影响边界以外的元素。BFC布局规则:内部盒子会在垂直方向,一个接一个地放置。(其实就是block元素布局规则)如下图所示:Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的margin会发生重叠。什么是边距重叠?.....................原创 2022-08-09 19:30:11 · 343 阅读 · 0 评论 -
vscode配置用户代码片段(包括删除方法)
vscode配置用户代码片段原创 2022-07-21 15:57:55 · 12460 阅读 · 14 评论 -
浅谈css布局block,inline,flex,inline-block,inline-flex区别
flex,inline-flex原创 2022-07-18 10:06:48 · 2548 阅读 · 0 评论 -
前端学习路线
前端路线原创 2022-07-13 12:35:06 · 322 阅读 · 0 评论 -
git教程(含git基础,git操作,github,git分支)
学习git有利于大项目多人协作开发原创 2022-05-06 19:26:08 · 2490 阅读 · 1 评论 -
知识点合集:ES6模块、Promise、EVentLoop、宏任务与微任务
模块化相关1.ES6模块化规范的分类在ES6模块化规范诞生之前,javaScript社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范。但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通过的模块化标准,例如:AMD 和 CMD适合于浏览器端的Javascript模块化CommonJS 适用于服务器端的javascript模块化太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,大一统的ES6模块化规范诞生了!2.什么是ES6模块化规原创 2022-05-03 12:49:41 · 2179 阅读 · 0 评论 -
数组中的some,every,reduce方法
1.some方法和forEach区别 const arr = ['小红', '小明', '张三', '李四'] //需求 查找张三的索引 //可以用forEach循环,但性能较差。原因:找到张三后,后面的循环理应终止,但forEach循环无法被终止 arr.forEach((item, index) => { if (item === '张三') { console.原创 2022-05-03 06:32:56 · 257 阅读 · 1 评论