荣胜

每周收获

2021.11.23-2021.12.13

• 温故知新解决ie10的兼容问题。
• 调研如何解决chrome等浏览器自动填充密码的最优方案。
• 拓展oss的上传的多个不同实现方案。
• 认识mqtt的使用、对接方法。
• 巩固加深vue.extend方法的使用场景，可以用来创建多个不同的组件实例，实现多个全局消息弹窗。

2021.12.13-2021.12.20

• 加深vue.extend的用法，使用props传入数据代替构造时定义data来实现消息实例组件数据响应式

2021.12.20-2021.12.28

• 使用element-plus的ElImageViewer组件来封装票据预览组件，由于element-plus文档没有公开介绍该组件，但我们仍然可以通过引入该组件来使用，通过阅读该组件的源码，见识到了vue3版的elementUI库的一些封装组件方法，继续保持多阅读源码，提升水平。

2022.01.04-2022.01.10

• 调研vue3的eslint规则，了解了一些elementUI plus和vant的eslint规则。

2022.01.11-2022.01.17

• 大概了解chrome浏览器拓展最新版本v3的一些新特性以及改动。

2022.01.17-2022.01.21

• 在多个相同页面下同一账号收到同一条消息通知但只能播放一个音频的问题里,可以通过document.hidden来判断出页面是否处于激活状态(是否当前页面)来优先执行播放音频的代码,执行完会缓存该消息通知id, 再通过setTimeout + 随机数生成的时间间隔来执行其他非激活状态的页面的播放音频代码.

2022.01.24-2022.01.28

• 在img-viewer组件里为了实现复制票据功能,需要额外创建一个image标签并设置对应的url以及crossorigin="Anonymous". 但在调用复制功能方法后发现报错,报错如下: Access to image at 'https://shendu-qa.oss-cn-hangzhou.aliyuncs.com/draft/2022/02/11/lbFtuk_1644548866793_f4Wj0I_1640250531981_%E7%A5%A8%E9%9D%A2%E8%83%8C%E9%9D%A21640250531940.png' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. 1.从报错文字来看显示跨域,一开始怀疑阿里云oss请求头没有设置跨域等,后来排除了这个可能. 2.在静文的帮助下以及网上调研发现,初步总结得出这是由于加载img-viewer组件时,里面的image的图片路径url已被浏览器缓存下来,当再通过额外创建的image加载图片时，浏览器自身会监测发现有相同url的缓存图片，但是又与当前域名不一致认为当前是属于跨域访问，所以浏览器报了跨域的错.即使服务端设置允许跨域和image设置了图片可跨域crossorigin="Anonymous"也没用.

2022.02.28 - 2022.03.04

• 使用flex弹性布局解决各个高度不固定的小模块高度自适应左右区域的高度，使左右区域高度对齐。

2022.03.14 - 2022.03.21

• 阅读《Map 应用场景的真相居然是 ...》（https://mp.weixin.qq.com/s/Z8SKwZRbvc8QO5q7NbYQWA）有获，了解到Map的实际应用场景的优势。

概况下Map相对于Object的区别，大体如下： 1.处理庞大的数据量时，Map性能更好。 2.Map的key会记录顺序，而Object不会记录先后顺序甚至还有可能会自行排序。 3.Map为可迭代对象，Object不能。 4.Map的key值可以是任意数据类型，而Object只能是数字、字符串，symbol。 ....

总结： 1.当数据量非常庞大时、频繁写入、排序、对写入顺序有严格的要求（比如具体场景：聊天列表和聊天内容的实现）使用Map更适合，在此场景下比使用Object更具优势。

2022.03.22 - 2022.03.28

• 通过前端技术交流群了解到某个公司的技术团队基于Amis（https://madewith.cn/575）二次开发的低代码框架。