- 博客(63)
- 收藏
- 关注
RSS订阅原创 react两次setstate返回一次是怎么回事?
例如，如果您在处理表单输入时连续调用 setState()，React 可能会将这些调用合并为一个单独的更新，以避免不必要的渲染。当您连续调用 setState() 时，React 会将这些更新加入到同一个队列中，并在合适的时候批量处理它们。如果两次 setState() 的更新是相同的，那么 React 可能会将它们合并为一个单独的更新，以避免不必要的渲染。需要注意的是，如果您使用函数式的 setState()，React 不会将多个更新合并为一个。
2023-03-10 10:10:20
603
1
原创 js 处理字符串、对象、数组的方法大全
8，lastIndexOf（searchString，position）//与indexOf方法类似，不过它是从该字符串的末尾开始查找而不是从开头。Array.reduce(function)，reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。array.slice(-n,-m) slice支持负参数，从最后一项开始算起，-1为最后一项，-2为倒数第二项。//返回的字符串中***不包括*** end处的字符。Array.sort()，对数组元素进行排序。
2022-09-27 18:32:46
681
原创 vue2的vue.config文件
/ warnings: false, // 若打包错误，则注释这行。// ============注入cdn start============// ============注入cdn start============// ============压缩图片 start============// ============压缩图片 end============// 生产环境或本地需要cdn时，才注入cdn。// 本地环境是否需要使用cdn。// cdn的css链接。// cdn的js链接。
2022-09-07 13:50:55
556
原创 记录字节跳动前端面试，四轮技术面
笔试题：多刷字节题库，多考js编程题，两道算法题，基本时lotcode简单中等题1.如果后端传给前端一个很大的数，前端会怎么处理，该怎么处理？分析：不能直接渲染，因为会使页面加载过慢，不利于用户体验。分析长列表思路：vue-virtual-scroller，渲染视口范围内的数据，遇到的场景可以说是在一些财务系统和金融系统中，项目要求是一次性返回所有的数据做实时记录，减少接口的请求，这时候我们常用的方案就是采用虚拟列表，描述一下具体方案就可以了2.new的过程__proto__prototype。
2022-08-22 15:37:07
2230
原创 vue3性能提升在哪些方面
编译层面做了更多的编译优化处理，比如静态提升，动态内容标记，事件缓存，区块等，可以有效跳过大量diff过程；代码层面性能优化主要体现在全新的响应式API，基本proxy实现，初始化时间和内存占用均大幅改进。打包时更好的支持tree-shaking,因此整体体制更小，加载更快。我分别从代码、编译、打包三方面介绍vue3性能方面的提升。
2022-08-19 18:04:37
407
原创 vue3为什么用proxy替代object.defineProperty
思路：属性拦截的几种方式defineProperty的问题proxy的优点。
2022-08-19 17:56:11
278
原创 前端pc端样式浏览器初始化
*根据需要设置min-width max-width position*///在火狐中正确显示hr Edge和IE中显示溢出。/*reset统一样式,去除不需要的央视*///修正ios和safari无法点击问题。//删除火狐获取内边框的焦点和填充。//IE显示main标签。//标准字体粗细和大小。//解决横屏字体放大。//删除文本转换继承。//修正搜索框的外观。...
2022-08-09 16:14:13
128
原创 vue2 实现自定义卡片轮播图 swiper
1.npm i swiper@4 （注意swiper是有很多版本的，每个版本的兼容性都不一样，现在下载的话都默认是vue3的版本，所以vue2的话下载4版本就可以了）在vue2的版本下更新公司官网解决方案的轮播图效果，主要难点是在现有的element-ui无法实现ui设计的平滑卡片视图轮播效果。寻找实现方案：发现swiper插件满足现有需求，可定制化各种轮播图效果，有时间可以其原生的代码。2.在用到的组件中输入，然后就可以用了，具体代码可以看一下部分。...
2022-08-03 14:38:41
4486
原创 一道面试题牵出12个前端硬核知识点，你知道几个？（瀏覽器安全.網絡安全）
什么是同源、什么是同源策略、同源策略的表现是什么？浏览器出让了同源策略的哪些安全性？跨域解决方案有哪些？JSONP如何实现？CORS你了解哪些？针对Web页面安全有哪些常见的攻击手段(XSS、CSRF)？什么是请求报文？什么是响应报文？HTTP缺点HTTPS基础知识点HTTPS流程安全沙箱img2.1.1 同源一道面试题牵出12个前端硬核知识点，你知道几个？（瀏覽器安全.網絡安全）...
2022-07-30 22:35:55
170
原创 这些JS题面试时一定要答对！
2、1首先基本类型数据是按值传递的，所以执行b函数时，b的参数a接收的值为1，参数a相当于函数内部的变量，当本作用域有和上层作用域同名的变量时，无法访问到上层变量，所以函数内无论怎么修改a，都不影响上层，所以函数内部打印的a是2，外面打印的仍是1。...
2022-07-30 22:33:22
493
2
原创 最近前端面试遇到的算法题
vara=[1,6,3,8,5],b=[2,9,4,7,10];面试官想考的地方for循环进行下标的赋值，原生数组排序。平时肯定想到的是扩展运算符和sort()方法。table里的某个值。
2022-07-21 23:39:28
116
原创 前端简历上的问题
平时我们写代码可以分为这之类的优化1.从DOM结构和标签上来优化;3.从js上来优化4.写法上的优化，比如编写优雅的数据遍历。flex的用法，flex基本操作，aligin-aitems;浏览器兼容常见的方法基本都是对css兼容进行一系列的格式化，基本我们做的每个项目的css文件都有。1.语义化标签，使页面结构更加简洁，易于维护，利于搜索引擎的识别。请求的方式，WebSocket节省了服务器资源，有效的提高了效率。模块化和组件化的区别模块化时从业务逻辑上的，组件化时考虑代码复用的。...
2022-07-21 21:14:56
232
原创 前端9大轮子 以及最近前端面试总结
animate.css 动画效果validator.js 登录验证mescroll.js 滚动效果vant 开源组件库echarts 可视化图表vue-lazyload 懒加载day.js 时间和日期vue-qr 生产二维码
2022-07-16 23:22:38
643
原创 中级前端工程师要回的知识
1.什么是函数柯里化？是把接受多个参数的函数变换成接受一个单一参数的函数，是典型的闭包函数2.call、apply、bind区别？相同点： 作用一致、都是修改this的指向。不同点： (1)传参方式不同，call()是按照顺序传参，apply()是通过数组/伪数组传参。 (2)执行机制不同，call()和apply()是立即执行函数，bind()不会立即执行函数，而是会返回一个修改过this的新函数。call(修改后的this,形参1,形参2...)apply(修改
2022-07-04 13:31:24
187
原创 针对简历上的问题
HTM5:1.语义化标签，是页面结构更加简洁，易于维护，利于搜索引擎的识别2.绘画 canvas;3.用于媒介回放的 video 和 audio 元素;4.本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，需要手动清除，sessionStorage 的数据在浏览器关闭后自动删除;5.表单控件，calendar、date、time、email、url、search;websocket: 全双公WebSocket 是为了能够实现在 web 应用上与服务器进行双向通信的需求 而产生
2022-07-04 09:10:37
149
原创 广州华为面试总结
先是笔试题1.HTML文档中的主要作用?告知浏览器的解析器用什么文档标准解析这个文档。2.以下判断结果为false的是？ 考察 == 和 === A.'0' == 0 //trueB.null == undefined //trueC. ' ' == 0 //true3. 以下那种元素是块状元素 ？ 考察内联元素和块状元素4.考察 JSON.Stringify(obj);JSON.Parse(JSON.stying(obj))此段代码const obj = {a:1,b:2...
2022-07-03 15:25:02
94
原创 react面试题
1.什么是react?2.react是facebook开发的前端js库，主要运用组件的思想，可让我们构想可以复用的ui组件。降低代码的耦合度。3.react的功能是什么？1.react和vue一样，都是采用了虚拟DOM，而不是真是的dom，虚拟 DOM 最大的优势是 diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消耗。2.它可以用服务器端渲染。3.它遵循单向数据流或数据绑定。React的一些主要优点是：React的限制如下：组件是 React 应用 UI 的构建块。这些组件将整个
2022-07-01 00:17:08
379
原创 js 数组去重的常用方法
这个问题出现了好几次，而且很多面试官不满足你只给出一两种方法。ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。let unique= [...new Set(array)]; //es6 Set数据结构类似于数组，成员值是唯一的，有重复的值会自动去重。 //Set内部使用===来判断是否相等，类似'1'和1会两个都保存，NaN和NaN只会保存一个2、遍历，将值添加到新数组，用indexOf()判断值是否存在，已存在就不添加，达到去重效果。//ps:这个方法不能分
2022-06-29 22:34:57
87
原创 前端知识点复习第一天
1.谈谈对 vue 和 react 的理解，以及他们的区别他们的设计思路的不同。react主要是函数式的思想，react属于单项数据流，即数据变化会影响视图变化，视图变化不会影响数据变化。vue的思想是响应式的，属于双向数据流，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。即数据变化会影响视图变化，视图变化也会影响数据变化。总之，react的性能优化需要手动去做，而vue的性能优化是自动的，但是vue的响应式机制也有问题，就是当state特别多的时候，Watche
2022-06-29 22:23:17
104
原创 github能ping通但是打不开网页
我的话能 ping 通 github.com 但是打不开官网，同样的问题可以尝试第四步，并了解风险提示。更改 hosts 的 dns 映射，首先找到 hosts 文件 C:\Windows\System32\drivers\etc 。粘贴以下映射到 hosts 文件的的最下面。也可以去 http://tool.chinaz.com/dns 输入 github.com 试一下（ping）它提供的 ip。# GitHub Start13.229.188.59 github.com151.101.7
2022-06-07 14:14:17
2651
原创 骨架效果 之高级渐变，适用图片等待时
大致步骤：需要一个组件，做占位使用。这个占位组件有个专业术语：骨架屏组件。 暴露一些属性：高，宽，背景，是否有闪动画。 这是一个公用组件，需要全局注册，将来这样的组件建议再vue插件中定义。 使用组件完成左侧分类骨架效果。<template> <div class="xtx-skeleton" :style="{width,height}" :class="{shan:animated}"> <!-- 1 盒子--> <di..
2022-05-30 23:02:37
127
原创 js 取字符串中某位置某特征的值，如华为(Huawei)=＞华为
let brandName = ' ' if (item.name.indexOf('(') !== -1) { const index = item.name.lastIndexOf('\(') // 判断名字是否有()，有则去掉 brandName = item.name.substring(0, index) } else { brandName = item.name }...
2022-05-30 22:59:45
139
原创 display,visibility,opacity
display、visibility和opacity的区别共同点：都可以隐藏元素，让元素不可见区别：display: none（1）DOM 结构：浏览器不会渲染 display 属性为 none 的元素，不占据空间；（2）事件监听：无法进行 DOM 事件监听；（3）性能：动态改变此属性时会引起重排，性能较差；（4）继承：不会被子元素继承，毕竟子类也不会被渲染；（5）transition：transition 不支持 display。visibility: hidden（1）DOM 结.
2022-05-26 17:32:28
94
原创 小程序 van-cell 换行能左对齐问题
van-cell 的value 属性 默认是右对齐，这时候我们只想显示信息的时候就可以运用父元素用右对齐，子元素用行内块元素，然后左对齐/* 解决多行能出现向左对齐的情况 */.van-cell__value>text{ display: inline-block; text-align: left; word-break: break-all; //换行能显示全部字符} <van-cell title="活动标题" title-width="7e...
2022-05-20 09:32:37
1741
原创 js 数组的常用方法
数组基本操作可以归纳为 增、删、改、查，需要留意的是哪些方法会对原数组产生影响，哪些方法不会下面对数组常用的操作方法做一个归纳增下面前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响push() unshift() splice() concat()splice()传入三个参数，分别是开始位置、0（要删除的元素数量）、插入的元素，返回空数组let colors = ["red", "green", "blue"];let removed = colors.
2022-05-18 11:16:00
54
原创 set和Map的应用场景
set:1.成员不能重复2.只有键值，没有键名，有点类似数组3.可以遍历，方法又add,delete,hasMap:1.本质上是键值对的集合，类似集合；2.可以遍历，方法很多，可以干跟各种数据格式转换Set和Map主要的应用场景在于数据重组和数据存储set 是一种叫做集合的数据结构,Map是一种叫做字典的数据结构Set 和 Map 主要的应用场景在于 数据重组 和 数据储存。 Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构。集合 与 字典 的区别：
2022-05-10 23:06:09
1423
原创 学习前端打包工具webpack和vite
首先，得先了解开发环境:1、开发环境顾名思义，开发同学开发时使用的环境，每位开发同学在自己的dev分支上干活，提测前或者开发到一定程度，各位同学会合并代码，进行联调。2.生产环境即线上环境，用户使用的环境。由特定人员来维护，一般人没有权限去修改。另外，还有个灰度发布，发生在预发布环境之后，生产环境之前。生产环境一般会部署在多台机器上，以防某台机器出现故障，这样其他机器可以继续运行，不影响用户使用。灰度发布会发布到其中的几台机器上，验证新功能是否正常。如果失败，只需回滚这几台机器即..
2022-05-09 16:44:09
1295
原创 js 数组自定义规则排序
// reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(升序执行)，将其结果汇总为单个返回值。 // reduce方法可做的事情特别多，就是循环遍历能做的，reduce都可以做， // 比如数组求和、数组求积、数组中元素出现的次数、数组去重等等。 // arr.reduce(function(prev,cur,index,arr){ // ... // }, init);// prev 必需。累计器累计回调的返回值; 表示上一次调用回调...
2022-05-08 22:09:48
1207
原创 vue 点击滚动区域的需求
1.需求分析：点击左边固定列表，页面滑到某个区域代码精华，获取元素的标签一般为id的唯一值 scrollIntoView (index) { const dom = document.getElementById(`course-category-${index}`) if (dom) dom.scrollIntoView({ block: 'start', behavior: 'smooth' }) },主要应用到设计的scrollIntoView的知识..
2022-05-08 22:03:55
425
原创 Vue使用Element的折叠面板Collapse设置默认全部展开
这个适用于需要for循环<el-collapse-item>负责展开的属性是value<el-collapse :value="opened"> <el-collapse-item v-for="o in List" :key="o.aaa":name="o.aaa"> <div>XXXXXXXXXXXXXXXXXXXXXXXX</div> </el-collapse-item></el-collaps.
2022-05-08 22:02:06
6701
1
原创 pc端后台管理大量表单下的优化
项目需求分析：项目为大型公司私有的后端管理系统，专门给公司内部人员运作，会遇到大量的表单数据。这时我们可以在assets（静态资源文件夹） 中添加一个tableData文件夹，创建模块所需要文件export const 变量名 = {} 以vue框架为例子：可以传这几个参数export const orderManaTab = { orderTab: [ { prop: 'orderStatus', label: '订单状态', wid.
2022-04-20 15:06:56
524
原创 vue js 改变css样式
<div ref="pcTips" class="pcTips">建议上传1920*450的图片</div>通过给标签添加一个实例，this.$refs.pcTips.style.cssText例如：this.$refs.pcTips.style.cssText = 'margin-left:0px'
2022-04-13 09:49:00
2088
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人