不知道怎么写文,怎么进行深入研究技术,时常迷茫。 本文只是用来记录开发过程中遇到的一些简单问题,用于以后再次使用。
1、echarts修改resize需要延时处理
2、dialog 不是弹窗本身具有缓存属性,是弹窗作为子组件,在父组件没有被销毁的情况下,所有数据依旧没有被清空,需要手动处理。如果弹窗在一个页面中被公用,需要清除数据。
3、Form 数据更新而页面不更新,这个是由于表单初始化的时候,这个字段是不存在导致的,所以需要在页面或者弹窗打开时设置初始状态。
4、v-show本质是通过控制元素的display属性来实现元素的显示和隐藏。
5、display:none和visibility:hidden的区别:
(1)display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素; visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;
(2)使用visibility:hidden比display:none性能上要好, display:none切换显示时visibility,页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不会引起回流。
(3)在某种特殊场景可以使用visibility,比如动态计算某个隐藏元素的宽度或高度(悬浮信息的实现)。
6、悬浮信息的实现:获取当前元素的位置,通过fixed 和visibility (动态获取元素宽度)实现。
7、es6相关内容
(1)数据类型判断
Object.prototype.toString.call(obj).slice(8, -1).toLowerCase()
(2)数组去重
es5 用filter和 array.indexOf来实现,es6 arr=>[...new Set(arr)]
(3)数组扁平化
function flatten(arr) {
while (arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr);
}
return arr;
}
(4)对象拷贝 Object.assign(目标对象,原对象),对于没有嵌套多层的情况下可以进行深拷贝,多层只能拷贝第一层,不算是完全拷贝。 深拷贝:使用递归实现,第二种使用第三方组件lodash 库_.cloneDeep(obj) 展开运算符...也是浅拷贝,只能拷贝第一层
5、并发请求控制 实现一个批量请求函数 multiRequest(urls, maxNum),要求如下: ? 要求最大并发数 maxNum ? 每当有一个请求返回,就留下一个空位,可以增加新的请求 ? 所有请求完成后,结果按照 urls 里面的顺序依次打出 juejin.cn/post/691631…
6、常见数组操作方法
(1)Array.map() 方法是一个用来创建新数组、修改其内容并保持原始数组不变的通用方法。当出现需要修改现有数组的内容并将结果存储为新变量的时候就可以用。
(2)filter()方法根据特定条件获取数组中的元素,像 .map() 方法一样,它将返回一个新数组,并保持原始数组不变。当需要从数组中删除不符合特定条件的元素时,可以使用 .filter() 。
(3).find() 将只返回与提供的条件匹配的第一个元素,不是数组。当需要获取数组通过定义条件的第一个元素时。
(4)for...of 是es6推出的迭代器,号称最简洁,可以是用 break,continue和 return 终止循环。跟 .forEach() 不同的是,不提供数组索引。跟 for 语句相比代码少得多,更简洁。
(5) for...in 这个方法跟上面的for...of 语法上看起来相似,for...of 是对值的遍历,for...in 是对 key/index 的遍历。for...in 应用于数组则 key 对应的就是数组的索引值,应用于对象则 key 对应键值。在实际开发中不提倡使用 for...in,如果需要遍历对象属性,推荐使用Object.keys 。
(6)every()方法将检查数组中的每个元素是否都通过提供的条件,如果数组中的所有元素都通过条件,则将返回 true ,如果没有,将返回 false。
(7).some() 方法和 .every() 方法类似,但验证的结果是相反的,如果数组中的所有元素只要有一个通过条件,则将返回 true ,如果所有的元素都不通过条件,将返回 false。
7、表格内容垂直居中:
table:border-collapse:separate;table-layout:fixed;
tr:display:table-row;
td:vertical-align:middle;text-align:center; empty-cells:show;
8、给文本设置省略属性,会导致下划线不显示,需要给当前元素设置padding-bottom。
9、父组件v-if会导致子组件watch 监听失效,需要深度和immediate属性才可以生效。或者将v-if替换v-show。
10、前端formData传参,有时候需要传递数组对象,如果直接给变量append一个数组对象后台无法接受。
const arr = [
{name: 'zxc', age: 10},
{name: 'ly', age: 20}
]
const fd = new FormData()
fd.append('address', arr)
正确的传参方式如下
arr.forEach((value, index) => {
fd.append(`address[${index}].name`, value.name)
fd.append(`address[${index}].age`, value.age)
})
如果是字符串或者数字数组
const arr = [1, 2, 3, 4, 5]
arr.forEach((value, index) => {
fd.append(`address[${index}]`, value)
})
11、去掉字符串中的空字符,正则如下:
const reg = /[^\S\n\r\t]/g
/\s/ 表示回车符