02 2022 档案
摘要：背景 在业务开发中，经常会遇到要处理跨页面通信的问题，比如说用户打开了一个网站，网站的某些页面需要根据用户的登录的状态不同，显示不同的数据。显然这需要我们在登录成功的那一刻， 去通知到那些需要改变的页面。为了解决类似这样的问题，发布订阅模式诞生了。 思路 一个简单的发布订阅模式需要事件的绑定和触发是
阅读全文
摘要：在处理数据的时候，经常需要对数据进行过滤和遍历，以便把数据转换成符合我们要求的格式，比如下面的场景： 过滤掉名字为空的数据，如果年龄小于18，设置disabled: true，大于等于18，设置disabled: false // 原始数据 [{name: '小明', age: 15}, {name
阅读全文
摘要：背景 有时候为了页面美观，对于比较长的标题或简介内容，会希望溢出的内容用省略号代替。这么做虽然降低了用户体验，但是视觉上会比较整洁。 方案 单行文本溢出省略 <p class="txt">这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是一段简介这是
阅读全文
摘要：为了优化用户体验，我们希望对于数据返回比较慢的接口，能够显示一个加载动画，但是在数据返回比较快的时候我们又不希望显示这个动画。下面提供一种方式，来解决这个问题 方法的核心是Promise.race()，简单回顾下Promise.race使用方法，Promise.race(iterable) 方法接收
阅读全文
摘要：背景 在进行数据展示的时候，有时候后端返回我们的数据不符合我们的要求，在数据量较小的情况下，前端去处理数据的排序可能更合适，下面是几种常用的数据排序方式。 字符串数组排序 简单回顾下数组的sort方法，默认排序顺序是升序，也就是将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列，比如说
阅读全文
摘要：问题背景 有时候我们在做移动端业务的开发时，会遇到这样的问题：我们按照UI设计稿画好了页面，但是在验收功能时，发现在小屏幕手机上有些按钮不好点击，可是UI同学又不希望我们调整按钮的大小，破坏了他的设计。下面提供一种方法，既可以不改动UI，又可以调整点击的热区。 方法 <button id="btn"
阅读全文
摘要：vuepress是一款很出色的静态网站生成器，配合官方提供的blog主题，很快就能搭建一个自己的博客网站。vuepress blog使用yaml解析元信息，也就是一篇文章的title、date、author和tags等，笔者在使用时发现每次定义这些信息很麻烦，于是就找解决方案，最后发现使用vscod
阅读全文
摘要：在业务开发中，有时候会遇到求数组最大值和最小值的需求，如何使用比较简单的方式求出这个值呢？今天发现可以使用es6的reduce方法实现。 1. 回顾reduce使用方法 先来回顾下reduce的使用方法，根据MDN的介绍，reduce方法接受两个参数，第一个是回调函数，第二个是初始值，示例如下： p
阅读全文
摘要：聚享小站是一个专注于代码片段分享的网站，每段代码都切实解决一个现实的业务问题，让开发者能够通过代码片段打开思路，感受代码的神奇，享受编码的乐趣，做一个快乐的搬砖工。 公众号
阅读全文
