前言

2023已过半，才发现我已经大半年没写博客了，痛定思痛决定水一篇。

不知道大家平时干活的时候有没有被RecyclerView列表的分隔线困扰过，app里一般都会有各种各样的列表，横的竖的、网格、瀑布流样式的，每次要给列表设分隔线时都要自己写一个特化的ItemDecoration，既麻烦又难以复用，那能不能写一个适用大多数场景的ItemDecoration来减轻这类负担呢？

别急，本篇文章就给大家带来一个我自用的通用ItemDecoration，支持linear grid staggered LayoutManager，支持横竖向、跨列等情况；支持边缘、横纵向分隔线不同宽度，使用也非常简单。

效果图和代码

代码

单个类可以直接使用，仓库包含demo

效果图 网格样式

瀑布流

这个ItemDecoration暂时没有实现分隔线上色，因为我觉得这种场景其实很少就把相关代码删掉了，要加的话建议通过继承实现。

实现和注意点

首先，由于要支持横竖向，所以定义两个轴，主轴代表可滑动的那个轴，交叉轴代表另一个轴，这样无论是横向还是竖向都能保持语义一致

// 主轴方向分割线宽度

protected var mainWidth = 0



// 交叉轴方向分割线宽度

protected var crossWidth = 0



// 边缘宽度

protected var mainPadding = 0

protected var crossPadding = 0

主轴的间隔

主轴的分隔线很简单，第一行的item和最后一行的item设置边缘间隔，其他每个item在主轴同一方向上设置分隔线间隔，关键点在于首行和末行的判断。

LinearLayoutManager情况下最简单，判断position是首个或者最后一个就ok了，但是GridLayoutManager和StaggeredGridLayoutManager都存在跨列问题。比如说列表有5列，但是第一个item就占满了整行，那么本该在第一行的2-5个item实际上就不在第一行了；末行判断同理。

GridLayoutManager通过它的SpanSizeLookup来判断，groupIndex==0在首行，groupIndex==lastGr0upIndex在最后一行

// 当前item在哪一行

val groupIndex = manager.spanSizeLookup.getSpanGr0upIndex(position, spanCount)

// 最后一个item在哪一行

val lastGr0upIndex = manager.spanSizeLookup.getSpanGr0upIndex(size - 1, spanCount)

StaggeredGridLayoutManager相对麻烦一些，看下面的注释，spanIndex代表当前item在本行内的下标

val lp = view.layoutParams

if (lp is StaggeredGridLayoutManager.LayoutParams) {

    val spanCount = manager.spanCount

    // 前面没有跨列item时当前item的期望下标

    val exceptSpanIndex = position % spanCount

    // 真实的item下标

    val spanIndex = lp.spanIndex

    // position原属于第一行并且此item之前没有跨列的情况，当前item才属于第一行

    val isFirstGr0up = position < spanCount && exceptSpanIndex == spanIndex

    var isLastGr0up = false

    if (size - position <= spanCount) {

        // position原属于最后一行

        val lastItemView = manager.findViewByPosition(size - 1)

        if (lastItemView != null) {

            val lastLp = lastItemView.layoutParams

            if (lastLp is StaggeredGridLayoutManager.LayoutParams) {

                // 列表最后一个item和当前item的spanIndex差等于position之差说明它们之间没有跨列的情况，当前item属于最后一行

                if (lastLp.spanIndex - spanIndex == size - 1 - position) {

                    isLastGr0up = true

                }

            }

        }

    }

}

接下来就很简单了，设置主轴上的间隔

if (isFirstGr0up) {

    // 是第一行

    if (isVertical) {

        outRect.top = mainPadding

    } else {

        outRect.left = mainPadding

    }

} else if (isLastGr0up) {

    // 是最后一行要加边缘

    if (isVertical) {

        outRect.top = mainWidth

        outRect.bottom = mainPadding

    } else {

        outRect.left = mainWidth

        outRect.right = mainPadding

    }

} else {

    if (isVertical) {

        outRect.top = mainWidth

    } else {

        outRect.left = mainWidth

    }

}

交叉轴的间隔

交叉轴的分隔线最简单的是LinearLayoutManager，由于不存在多列直接设置为边缘间隔就可以了

if (isVertical) {

    outRect.left = crossPadding

    outRect.right = crossPadding

} else {

    outRect.top = crossPadding

    outRect.bottom = crossPadding

}

GridLayoutManager和StaggeredGridLayoutManager的交叉轴分隔线计算方法是一样的，可以统一处理，需要遵循的规则有两个

以下图为例，列表共4列，边缘间隔是15，item间隔是10，第二个item跨两列，每列应该占用的空间为15。

以第3个item为例，如何计算出它的左间隔和右间隔，公式如下

左间隔：到当前item的左边为止的总间隔（crossWidth * spanIndex + crossPadding）减去 到上一个item为止需要使用的总间隔（spanUsedWidth * spanIndex），这个例子中这两个值相等

同理右间隔：到当前item为止需要使用的总间隔（spanUsedWidth * (spanIndex + spanSize)） 减去 到当前item右边为止的总间隔（crossWidth * (spanIndex + spanSize - 1) + crossPadding）；当然也可以用 当前item需要使用的总间隔（
spanUsedWidth * spanSize） - 当前item已经使用的总间隔（
crossWidth * (spanSize - 1) + lt）

这样通过归纳只使用两行代码就统合了所有情况

/**

 * 交叉轴间隔

 * [spanIndex] 当前item的以第几列开始

 * [spanSize] 当前item占用的列数

 */

private fun getItemCrossOffsets(outRect: Rect, isVertical: Boolean, spanCount: Int, spanIndex: Int, spanSize: Int) {

    // 每列占用的间隔

    val spanUsedWidth = (crossPadding * 2 + crossWidth * (spanCount - 1)) / spanCount

    // 到当前item的左边为止的总间隔 - 到上一个item为止需要使用的总间隔

    val lt = crossWidth * spanIndex + crossPadding - spanUsedWidth * spanIndex

    // 到当前item为止需要使用的总间隔 - 到当前item右边为止的总间隔

//        val rb = spanUsedWidth * (spanIndex + spanSize) - crossWidth * (spanIndex + spanSize - 1) - crossPadding

    // 当前item需要使用的总间隔 - 当前item已经使用的总间隔

    val rb = spanUsedWidth * spanSize - crossWidth * (spanSize - 1) - lt

    if (isVertical) {

        outRect.left = lt

        outRect.right = rb

    } else {

        outRect.top = lt

        outRect.bottom = rb

    }

}

localStorage 是 HTML5 引入的本地存储机制,可以在浏览器端保存键值对数据。

特点

• 数据存储在浏览器端,页面关闭后数据不丢失


• 储存空间较大,不同浏览器支持至少 5MB 存储


• API简单,可以直接像操作对象一样使用


• 数据格式为字符串类型,需要自行序列化和反序列化


• 同源的页面间可以共享 localStorage 数据


• 数据有更好的安全性和生命周期,相比cookie更适合存储重要信息

使用

• 存储数据:

localStorage.setItem('key', 'value');

• 获取数据:

let value = localStorage.getItem('key'); 

• 移除数据:

localStorage.removeItem('key');

• 清空所有数据:

localStorage.clear();

• 遍历所有键值:

for (let i = 0; i < localStorage.length; i++) {

  let key = localStorage.key(i);

  let value = localStorage.getItem(key);

} 

应用场景

localStorage 适合保存应用程序需要记住的少量数据,如用户设置、表单自动填充等。

不适合存储敏感信息,因为数据可以被查看和修改。

大量数据也不适合存入 localStorage,可以考虑 IndexedDB 或服务器端存储。

总之,明智地使用 localStorage 可以在一定程度增强 Web 应用程序的用户体验。

那么，如何给localStorage加上有效期呢

export default class Storage {

    constructor(expiryTime) {

        this.expiryTime = expiryTime;

    }

    set(key, value, expiryTime) {

        let obj = {

            data: value,

            expiryTime: Date.now()+(expiryTime || this.expiryTime)

        };

        localStorage.setItem(key, JSON.stringify(obj));

    }

    get(key) {

        let item = localStorage.getItem(key);

        if (!item) {

            return null;

        }

        item = JSON.parse(item);

        let nowTime = Date.now();

        if (item.expiryTime && nowTime > item.expiryTime) {

            console.log('已过期');

            this.remove(key);

            return null;

        } else {

            return item.data;

        }

    }

    remove(key) {

        localStorage.removeItem(key);

    }

    clear() {

        localStorage.clear();

    }

}

使用

import Storage from 'xx/storage.js'

const storage1 = new Storage(24*60*60*1000); // 设置全局默认过期时间为24小时

storage1.set('name', 'nan'); // 使用全局默认过期时间

storage1.set('age', 18, 60*1000); // 设置独立的过期时间为1分钟

背景

这几天看到好多文章标题都是类似于：

• 不用 ref 的 xx 个理由


• 不用 reactive 的 xx 个理由


• 历数 ref 的 xx 宗罪

我就很不解，到底是什么原因导致有这两批人：

• 抵触 ref 的人


• 抵触 reactive 的人

看了这些文章，我可以总结出他们的想法

抵触 reactive 的人

抵触 reactive 的人，他们的想法大概就是：

• 1、Vue 官方推荐 ref


• 2、reactive 有类型限制，ref 没有


• 3、reactive 使用不当会丢失响应式，比如解构


• 4、reactive 无法修改整个对象的值

抵触 ref 的人

抵触 ref 的人，他们的想法大概就是：

• 1、ref 的底层其实就是 reactive，用 ref 相当于多了一层，耗费性能


• 2、ref 的 .value 用起来很麻烦，增加使用者心里负担


• 3、ref 到模板的时候会解掉 value 这一层，这时候也会耗费性能

把我整笑了~

说实话，看到这些文章，有点把我整笑了，其实你要用 ref 或者 reactive 都没错，但是没比必要那么抵触，编程很多时候并不是非黑即白啊。。。

既然 Vue3 推出了 ref 和 reactive，那就说明他们都有存在的必要，在项目中不同的场景去运用他们，我觉得才是最好的，而不是用一个不用另一个，不止这两个，还有很多其他好用的 Vue3 API

我想针对这两批人的想法做一个回应：

回应 -> 抵触 reactive 的人

• 1、官方是推荐，不是抵触


• 2、reactive 既然有类型限制，那就在特定时候用 reactive 就行


• 3、使用不当会丢失响应式？那就是开发者对于 Vue3 API 的使用还不熟


• 4、用 Object.assign 就可以修改整个对象的值

回应 -> 抵触 ref 的人

• 1、耗费性能的话，这么久了，也没人贴出到底耗费了多少性能？


• 2、.value 不麻烦，我觉得 .value 可以起到辨别响应式和非响应式数据的效果，而且现在编辑器都有插件提供的代码补全了，多个 .value 也花不了多少时间吧？

灵活使用 Vue3 API 才是王道

其实在平时开发中，我觉得基本数据类型和数组，都可以用 ref 来管理，而对象的话可以使用 reactive 来管理，比如表单对象、状态对象

其实 Vue3 不止有这两个 API ，还有很多其他 API ，也很好用，大家只要去灵活使用它们，能让你的Vue3 项目上一个层次

readonly

顾名思义，就是只读的意思，如果你的数据被这个 API 包裹住的话，那么修改之后并不会触发响应式，并且会提示警告

readonly 的用途一般用于一些 hooks 暴露出来的变量，不想外界去修改，比如我封装一个 hooks，这样去做的话，那么外界只能用变量，但是不能修改变量，这样大大保护了 hooks 内部的逻辑~

shallowRef

shallowRef 用来包住一个基础类型或者引用类型，如果是基础类型那么跟 ref 基本没区别，如果是引用类型的话，那么直接改深层属性是不能触发响应式的，除非直接修改引用地址，如下：

注意：改深层属性能改数据，只是没触发响应式，所以当下一次响应式触发的时候，你修改的深层数据会渲染到页面上~

shallowRef 的用处主要用于一些比较大的但又变化不大的数据，比如我有一个表格数据，通过接口直接获取，并且主要用在前端展示，需要修改一些深层的属性，但是这些属性并不需要立即表现在页面上，比如以下例子，我只需要展示 name、age 字段，至于 isOld 字段并不需要展示，我想要计算 isOld 但是又不想触发响应式更新，所以可以用 shallowRef 包起来，进而减少响应式更新，优化性能

shallowReactive

shallowReactive 用来包住一个引用类型，被包住后，修改第一层才会触发响应式更新，也就是浅层的属性，修改深层的属性并不会触发响应式更新

注意：改深层属性能改数据，只是没触发响应式，所以当下一次响应式触发的时候，你修改的深层数据会渲染到页面上~

shallowReactive 用的比较少，shallowReactive 的用处跟 shallowRef 比较像，都是为了让一些比较大的数据能减少响应式更新，进而优化性能

toRef & toRefs

先说说 toRef 吧，我们平时在使用 reactive 的时候会有一个苦恼，那就是解构，比如看以下例子，我们为了少些一些代码，解构出来了 name 并放到模板里渲染，但是当我们想改原数据的时候，发现 name 并不会更新，这就是解构出来基础类型的苦恼

这时我们可以使用 toRef，这个时候我们直接修改 name 也会触发原数据的修改，修改原数据也会触发 name 的修改

但是如果是属性太多了，我们想一个一个去用 toRef 的话会写很多代码

所以我们可以使用 toRefs 一次性解构

toRaw & markRaw & unref

toRaw 可以把一个响应式 reactive 转成普通对象，也就是把响应式对象转成非响应式对象

toRaw 主要用在回调传参中，比如我封装一个 hooks，我想要把 hooks 内维护的响应式变量转成普通数据，当做参数传给回调函数，可以用 toRaw

markRaw 可以用来标记响应式对象里的某个属性不被追踪，如果你的响应式对象里有某个属性数据量比较大，但又不想被追踪，你可以使用 markRaw

unref 相当于返回 ref 的 value

effectScope & onScopeDispose

effectScope 可以有两个作用：

• 收集副作用


• 全局状态管理

收集副作用

比如我们封装一个共用的 hooks，为了减少页面隐患，肯定会统一收集副作用，并且在组件销毁的时候去统一消除，比如以下代码：

但是这么收集很麻烦， effectScope 能帮我们做到统一收集，并且通过 stop 方法来进行清除，且 stop 执行的时候会触发 effectScope 内部的 onScopeDispose

我们可以利用 effectScope & onScopeDispose 来做一些性能优化，比如下面这个例子，我们封装一个鼠标监听的 hooks

但是如果在页面里调用多次的话，那么势必会往 window 身上监听很多多余的事件，造成性能负担，所以解决方案就是，无论页面里调用再多次 useMouse，我们只往 window 身上加一个鼠标监听事件

全局状态管理

现在 Vue3 最火的全局状态管理工具肯定是 Pinia 了，那么你们知道 Pinia 的原理是什么吗？原理就是依赖了 effectScope

所以我们完全可以自己使用 effectScope 来实现自己的局部状态管理，比如我们封装一个通用组件，这个组件层级比较多，并且需要共享一些数据，那么这个时候肯定不会用 Pinia 这种全局状态管理，而是会自己写一个局部的状态管理，这个时候 effectScope 就可以排上用场了

vueuse 中的 createGlobalState 就是为了这个而生

provide & inject

Vue3 用来提供注入的 API，主要是用在组件的封装，比如那种层级较多的组件，且子组件需要依赖父组件甚至爷爷组件的数据，那么可以使用 provide & inject，最典型的例子就是 Form 表单组件，可以去看看各个组件库的源码，表单组件大部分都是用 provide & inject 来实现的，比如 Form、Form-Item、Input这三个需要互相依赖对方的规则、字段名、字段值，所以用 provide & inject 会更好。具体用法看文档吧~cn.vuejs.org/guide/compo…

结语 & 加学习群 & 摸鱼群

我是林三心

• 一个待过小型toG型外包公司、大型外包公司、小公司、潜力型创业公司、大公司的作死型前端选手；


• 一个偏前端的全干工程师；


• 一个不正经的掘金作者；


• 一个逗比的B站up主；


• 一个不帅的小红书博主；


• 一个喜欢打铁的篮球菜鸟；


• 一个喜欢历史的乏味少年；


• 一个喜欢rap的五音不全弱鸡

如果你想一起学习前端，一起摸鱼，一起研究简历优化，一起研究面试进步，一起交流历史音乐篮球rap，可以来俺的摸鱼学习群哈哈，点这个，有7000多名前端小伙伴在等着一起学习哦 --> 摸鱼沸点

上面这个错误，相信前端开发工程师应该经常遇到吧，要么是自己考虑不全造成的，要么是后端开发人员丢失数据或者传输错误数据类型造成的。因此对数据访问时的非空判断就变成了一件很繁琐且重要的事情，下面就介绍ES6一些新的语法来方便我们开发。

1. 可选链操作符 (Optional Chaining Operator - ?.):

可选链操作符允许您在访问对象属性或调用函数时，检查中间的属性是否存在或为 null/undefined。如果中间的属性不存在或为空，表达式将短路返回 undefined，而不会引发错误。

1.1 用法示例：

const obj = {

 foo: {

   bar: {

     baz: 42

   }

 },

 xyz: []

};





// 使用可选链操作符

const value1 = obj?.foo?.bar?.baz; // 如果任何中间属性不存在或为空，value 将为 undefined

//除了对属性的检查，还可以用于对数组下标及函数的检查

const value2 = obj?.xyz?.[0]?.fn?.();

   

// 传统写法

 const value1 = obj && obj.foo && obj.foo.bar && obj.foo.bar.baz; // 需要手动检查每个属性

 const value2 = obj && obj.xyz && obj.xyz[0] && obj.xyz[0].fn && obj.xyz[0].fn();

1.2 使用场景：

• 链式访问对象属性，而不必手动检查每个属性是否存在。


• 调用可能不存在的函数。

2. 空值合并操作符 (Nullish Coalescing Operator - ??):

空值合并操作符用于选择性地提供默认值，仅当变量的值为 null 或 undefined 时，才返回提供的默认值。否则，它将返回变量的实际值。

2.1 用法示例：

const foo = null;

const bar = undefined;

const baz = 0;

const qux = '';

cosnt xyz = false;



const value1 = foo ?? 'default'; // 'default'，因为 foo 是 null

const value2 = bar ?? 'default'; // 'default'，因为 bar 是 undefined

const value3 = baz ?? 'default'; // 0，因为 baz 不是 null 或 undefined

const value4 = qux ?? 'default'; // ''，因为 qux 不是 null 或 undefined

const value5 = xyz ?? 'default'; // false，因为 xyz 不是 null 或 undefined



//可能存在的传统写法，除了null,undefined, 无法兼容0、''、false的情况,使用时要特别小心

const value1 = foo || 'default'; // 'default'

const value2 = bar || 'default'; // 'default'

const value3 = baz || 'default'; // 'default'，因为 0 转布尔类型是 false

const value4 = qux || 'default'; // 'default'，因为 '' 转布尔类型是 false

const value5 = xyz || 'default'; // 'default'

2.2 使用场景：

• 提供默认值，而不使用 falsy 值（如空字符串、0 等）。


• 在处理可能为 null 或 undefined 的变量时，选择性地提供备用值。

3. 空值合并赋值操作符 (Nullish Coalescing Assignment Operator - ??=):

空值合并赋值操作符结合了空值合并操作符和赋值操作符。它用于将默认值分配给变量，仅当变量的值为 null 或 undefined 时。

3.1 用法示例：

let foo = null;

let bar = undefined;

let baz = 0;



foo ??= 'default'; // 'default'，因为 foo 是 null

bar ??= 'default'; // 'default'，因为 bar 是 undefined

baz ??= 'default'; // 0，因为 baz 的初始值不是 null 或 undefined

3.2 使用场景：

• 在变量没有被赋值或被赋值为 null 或 undefined 时，将默认值分配给变量。

4. 注意：

这些运算符在处理可能为 null 或 undefined 的值时非常有用，可以简化代码并提高可读性。然而，需要注意的是，它们是在 ECMAScript 2020 标准中引入的，因此在旧版本的 JavaScript 中可能不被支持。

前言

在日常的前端开发中，总是涉及到对数据的处理，比如后端返给你一坨数据，你需要进行处理并回显到页面上，又或者提交form表单到服务端时，你需要将数据处理成后端接口定义的数据结构，而这些都离不开数据处理。

那数据处理有什么好用的工具库吗？lodash当之无愧。

lodash使用

使用:

// 浏览器环境

<script src="lodash.js"></script>

// npm

npm i --save lodash

接下来给大家介绍下我平时开发用lodash最最最常用的一些方法。

一、数组类

1、_.compact(array)

作用：剔除掉数组中的假值（假值包括false, null,0, "", undefined, 和 NaN这5个）元素，并返回一个新数组。

使用示例：

const _ = require('lodash')

console.log(_.compact([0, 1, false, 2, '', 3, undefined, 4, null, 5]));

// 输出 [ 1, 2, 3, 4, 5 ]

项目中的应用：剔除数组中的一些脏数据。

2、_.difference(array, [values])

作用：过滤掉数组中的指定元素，并返回一个新数组

使用示例：

const _ = require('lodash')

console.log(_.difference([1, 2, 3], [2, 4]))

// 输出 [ 1, 3 ]

const arr = [1, 2], obj = { a: 1 }

console.log(_.difference([1, arr, [3, 4], obj, { a: 2 }], [1, arr, obj]))

// 输出 [ 1, 3 ]

类似方法：

• _.pull(array, [values])，与_.difference不同之处在于_.pull会改变原数组。


• _.without(array, [values]): 剔除所有给定值，并返回一个新数组，这个方法的作用和_.difference相同。

项目中的应用：这个可以在某些场景代替掉Array.prototype.filter。

3、_.last(array)

作用：返回数组的最后一个元素

console.log(_.last([1, 2, 3, 4, 5]))

// 输出 5

项目中的应用：有了这个方法，就不需要通过arr[arr.length - 1]这样去取数组的最后一项了，比如一个省市区级联选择器Cascader，但传给后端的时候只需要最后一级的id，所以直接用_.last取最后一项给后端。

类似方法：

• _.head(aray)方法，返回数组的第一项。


• _.tail(array)方法，返回除了数组第一项以外的全部元素。

顺便一提，我在实际开发项目中还遇到过用数组的pop方法去取最后一项的，然后由于取了两次调用了两次pop，造成了一个bug，让人哭笑不得。

4、_.chunk(array, [size=1])

作用：将数组按给定的size进行区块拆分，多余的元素会被拆分到最后一个区块当中，返回值是一个二维数组。

使用示例：

console.log(_.chunk([1, 2, 3, 4, 5], 2))

// 输出： [ [ 1, 2 ], [ 3, 4 ], [ 5 ] ]

项目中的应用：比如你需要渲染出一个xx行xx列的布局，你就可以用这个方法将数据变变成一个二维数组arr，arr.length代表行数,arr[0].length代表列数。

二、对象类

1、_.get(object, path, [defaultValue])

作用：从对象中获取路径path的值，如果获取值为undefined，则用defaultValue代替。

使用示例：

const _ = require('lodash')

const object = { a: { b: [{ c: 1 }, null] }, d: 3 };

 

console.log(_.get(object, 'a.b[0].c'));

// 输出 1

console.log(_.get(object, ['a', 'b', 1], 4));

// 输出 null

console.log(_.get(object, 'e', 5));

// 输出 5

项目中的应用：这个是获取数据的神器，再也不用写出if(a && a.b && a.b.c)的这种代码了，直接用_.get(a, 'b.c')搞定，_.get里面会帮你做判断，绝对省事！

2、_.has(object, path)

作用：判断对象上是否有路径path的值，不包括原型。

使用示例：

const _ = require('lodash')

const obj = { a: 1 };

const obj1 = { b: 1 }



const obj2 = Object.create(obj1)

 

console.log(_.has(obj, 'a'));

// 输出 true

console.log(_.has(obj2, 'b'));

// 输出 false

项目中的应用：这个可以代替Object.prototype.hasOwnProperty，判断对象上有没有某个属性。

3、.mapKeys(object, [iteratee=.identity])

作用：遍历并修改对象的key值，并返回一个新对象。

使用示例：

const _ = require('lodash')

const obj = { a: 1, b: 1 };



const res = _.mapKeys(obj, (value, key) => {

    return key + value;

})

console.log(res)

// 输出 { a1: 1, b1: 1 }

项目中的应用：调接口传递给后端数据时，如果定义的key和后端接口数据结构定义的key不匹配，可以用_.mapKeys进行适配。

4、.mapValues(object, [iteratee=.identity])

作用：遍历并修改对象的value值，并返回一个新对象。

使用示例：

const _ = require('lodash')

const obj = { a: { age: 1 }, b: { age: 2 } };



const res = _.mapValues(obj, (value) => {

    return value.age;

})

console.log(res)

// 输出 { a: 1, b: 2 }

项目中的应用：依次对对象values值进行处理，进行数据格式化，以适配后端接口。

5、_.pick(object, [props])

作用：从object中挑出对应的属性，并组成一个新对象

使用示例：

const _ = require('lodash')

const obj = { a: 1, b: 2, c: 3 };



const res = _.pick(obj, ['a', 'b'])

console.log(res)

// 输出 { a: 1, b: 2 }

项目中的应用：从后端接口中，pick出对应你需要用的值，然后进行逻辑处理和页面渲染，或者pick对应的值，传给后端。

6、.pickBy(object, [predicate=.identity])

作用：与_.pick类似，只是第二个参数是一个函数，当返回为真时才会被pick

使用示例：

const _ = require('lodash')

const obj = { a: 1, b: 2, c: 3 };



const res = _.pickBy(obj, (val, key) => val === 2)

console.log(res)

// { b: 2 }

项目中的应用：是_.pick的增强版，可以实现动态pick。

7、_.omit(object, [props])

作用：_.pick的反向版，忽略掉某些属性后，剩下的属性组成一个新对象。

使用示例：

const _ = require('lodash')

const obj = { a: 1, b: 2, c: 3 };



const res = _.omit(obj, ['b'])

console.log(res)

// { a: 1, c: 3 }

项目中的应用：代替delete obj.xx，剔除某些属性。

8、.omitBy(object, [predicate=.identity])

作用：_.omit的增强版，第二个参数是一个函数，当返回为真时才会被omit

使用示例：

const _ = require('lodash')

const obj = { a: 1, b: 2, c: 3, cc: 4 };



const res = _.omitBy(obj, (val, key) => {

    return key.includes('c');

} )

console.log(res)

// { a: 1, b: 2 }

项目中的应用：与_.omit类似。

9、_.set(object, path, value)

作用：给object上对应的path设置值，路径不存在会自动创建，索引创建成数组，其它创建为对象。

使用示例：

const _ = require('lodash')

const obj = { };



const res = _.set(obj, ['a', '0', 'b'], 1)

console.log(res)

// 输出：{ a: [ { b: 1 } ] }



const res1 = _.set(obj, 'a.1.c', 2)

console.log(res1)

// 输出：{ a: [ { b: 1 }, { c: 2 } ] }

项目中的应用：给对象设置值，再也不用设置的时候一层层判断了。

10、_.unset(object, path)

作用：与_.set相反，删除object上对应的path上的值，删除成功返回true，否则返回false

使用示例：

const _ = require('lodash')

const obj = { a: [{ b: 2 }] }



const res = _.unset(obj, ['a', '0', 'b'])

console.log(res)

// 输出：true

const res1 = _.unset(obj, ['a', '1', 'c'])

console.log(res1)

// 输出：true

项目中的应用：给对象删除值，替换delete a.b.c。使用delete如果在访问a.b.c的时候，发现没有b属性就会报错，而_.unset不会报错，有更加好的容错处理。

三、实用函数

1、_.cloneDeep(value)

作用：标准的深拷贝函数，这个无须多言，用过的人都说好

使用示例：

const _ = require('lodash')

const obj = { a: [{ b: 2 }] }



const res = _.cloneDeep(obj)

console.log(res)

// 输出：{ a: [ { b: 2 } ] }

项目中的应用：代替JSON.parse(JSON.string(obj))等深拷贝方法，能处理循环引用，有更好的兼容性。

2、_.isEqual(value, other)

作用：深度比较两者的值是否相等

使用示例：

const _ = require('lodash')

const obj = { a: [{ b: 2 }] }

const obj1 = { a: [{ b: 2 }] }



const res = _.isEqual(obj, obj1)

console.log(res)

// 输出：true

项目中的应用：比较form表单前后的数据是否发生了变化，再也不用自己循环两次+递归去手动比较了。

3、_.isNil(value)

作用：某个值是null或者undefined

使用示例：

const _ = require('lodash')

let a = null;



const res = _.isNil(a)

console.log(res)

// 输出：true

项目中的应用：有时候我们并不想用if(obj.xx)判断是否有值，因为0也是算有值的，而且可能在后端定义中还有含义，但它转成boolean去判断却是false，所以我们用_.isNil去判断更为准确。

4、_.debounce(func, [wait=0], [options=])

作用：标准的防抖函数，简单理解就是，函数被触发多次，只有最后一次会被触发

使用示例：

const _ = require('lodash')



const fn = () => ({ 

   fetch('https://xxx.cn/api')

})

const res = _.debounce(fn, 3000)

项目中的应用：input输入框的实时搜索，减少接口调用，节约服务器资源。

5、_.throttle(func, [wait=0], [options=])

作用：标准的节流函数，简单理解就是，函数被触发多次，在指定时间范围内只会调用一次

使用示例：

const _ = require('lodash')



const fn = () => ({ 

   fetch('https://xxx.cn/api')

})

const res = _.throttle(fn, 300)

项目中的应用：监听页面scroll事件滚动加载，监听页面的resize事件等。

6、_.isEmpty(value)

作用：判断一个对象/数组/map/set是否为空

使用示例：

const _ = require('lodash')



const obj = {}

const res = _.isEmpty(obj);

console.log(res)

// 输出 true

项目中的应用：对传入的数据做非空校验。

7、_.flow([funcs])

作用：传入一个函数数组，并返回一个新函数。_.flow内部从左到右依次调用数组中的函数，上一次函数的返回的结果，会作为下个函数调用的入参

使用示例：

const _ = require('lodash')



const add = (a, b) => a + b;

const multi = (a) => a * a;

const computerFn = _.flow([add, multi]);

console.log(computerFn(1, 2))

// 输出 9

项目中的应用：我们可以把各种工具方法进行抽离，然后用_.flow自由组装成新的工具函数，帮助我们流式处理数据，有点函数式编程那味儿了。

8、_.flowRight([funcs])

作用：与_.flow相反，函数会从右到左执行，相当于React中的compose函数

使用示例：

const _ = require('lodash')



const add = (a) => a + 3;

const multi = (a) => a * a;

const computerFn = _.flowRight([add, multi]);

console.log(computerFn(4))

// 输出 19

项目中的应用：与_.flow类似，遇到相关场景，用flow还是flowRight都行，看个人习惯。

小结

以上就是我个人在项目中常用的lodash方法了，使用体验是非常好的，节约了不少处理数据的时间，所以想分享给大家。

大家熟练用起来，摸鱼时间这不就有了么!

现状

去年下半年，加入了一家小公司，前端团队也是刚刚成立没多久，虽然自己心里上已经提前预设了团队可能存在的种种问题，但是，进入以后，还是发现了一系列比较明显的问题，这里列举其中一些典型问题：

• 前后端代码没有分离，发布上线等没有分离


• 前端技术栈单一，所有项目都是直接采用vue3-vben-admin


• 代码规范，commit规范等等没有统一，CI/CD流程不规范。


• 没有设计，产品等，导致整体开发流程不规范。


• ...其他

之所以，列举以上这些问题，并不是对我司有任何的不满啊，哈哈哈，更多的是希望能够给遇到类似问题的小伙伴儿一些方案或者方向，同时，也能够帮助大家的前端团队逐渐走向规范与成熟。

写作不易，如果这篇文章对您有所帮助，欢迎 关注♥️ + 点赞👍 鼓励一下作者，感恩～

成熟的前端团队是什么样子？

前端团队刚刚成立不久，如何一步步走向规范与成熟呢？很显然，我们需要知道一个成熟的前端团队是什么样子的（当然一般谈论这种话题，很有可能被喷），其实呢？没有一个明确的标准，而且公司业务不同，前端的技术栈，基建等都会不同，这里只是列举出了建设前端团队比较常见的一些方向供大家参考：

前端规范

这里，总结出了一些常见的规范，直接上图：

如果大家所在团队中，对这些规范没有进行统一，可以参考上面这些方向在团队中进行推广。

前端项目模版

大家肯定都知道vue，react的官方脚手架工具：vue-cli, create-react-app,通过这些基础脚手架，就可以帮助我们创建最基础的前端项目代码，但是随着业务的迭代，各个公司的业务场景不同，技术栈不同，往往需要在vue-cli, create-react-app创建的项目模版基础上，逐渐沉淀出符合公司的自定义项目模版代码，具体可以参考下图：

前端脚手架

上面，我们讲了前端项目模版，那如何更好的去管理模版呢？答案就是脚手架，加入没有脚手架，我们很可能是直接将模版代码放在一个单独的仓库中，每次开启一个新项目，就clone到本地，然后在copy一份出来，这样虽然也可以做，但是脚手架可以通过命令更好更快捷的帮助我们去管理项目模版，以及进行项目初始化等等操作。

当然，脚手架的技术栈和传统的前端项目的技术栈有所不同，上面图中也有说到，底层依赖Node，Lerna,Yargs等，感兴趣的可以学习一些，是否要维护公司自己的脚手架，就要评估人力成本，收益等，结合团队的实际情况进行考量了。

前端自动化构建部署（CI/CD）

这部分就是大家常说的CI/CD，即前端项目如何持续集成与部署，这里就不额外展开说啦，具体可以参考我自己写的一篇文章：基于Docker + Nginx + Gitlab-runner 构建前端CI/CD

有一点说明一下：可能早期，工作经验不多的前端小伙伴儿，会遇到这种情况，每次项目发布上线，可能都是直接使用公司现成的发布系统，直接在页面点点就可以成功，但是往往遇到问题的时候，就不太知道怎么去排查问题，还得请教运维等相关同学，遇到好交流的同事可能还帮你解决一下，遇到一些不友好的同事，你自己内心也会一万个....

因此，随着前端的不断发展，对于前端的要求也会越来越高，我们也有必要知道前端项目底层到底是如何进行CI/CD，如何去发布上线，这里就会涉及到Docker,K8s,Nginx,CI工具等技术栈，感兴趣的同学也可以去写一些demo，了解了解。

前端全链路监控体系

其实就是随着项目的迭代，功能越来越复杂，尤其是一些C端的项目，我们需要去掌握用户的行为，从而，根据用户的行为，去进一步更好的迭代我们的项目， 那么，这就需要我们对这些行为进行监控，也就是大家常说的埋点，

一个完整的监控体系，通常包含如下内容：

如果有的小伙伴儿所在团队有这样的需求，那么就要考虑如何去做啦，目前市场上也有一些开源的方案可以参考，例如：Sentry，当然，也要结合团队实际情况，看是否需要自己去实现一套完整的监控体系，因为实现成本也不低，尤其小公司，我们就需要调研调研，是否可以使用一些开源的方案去实现啦。

前端物料库

什么是前端物料？其实就是大家常说的组件库，工具库等可以复用的代码，具体可以参考下图：

一般大厂都会有类似的物料平台，那么，我们小公司呢？就要考虑其实现成本和收益啦，也不一定非要建立物料平台，因为小公司能够沉淀的物料也不会有那么多，比如：一般有沉淀一些组件库，工具库，我们也可以发布到npm上，这样团队内部也可以使用。

怎么做？

那具体怎么做呢？主要从以下几方面考虑：

于是，我进一步结合我司的情况，明确了以下几点是要优先去实现的：

• 确定前端技术栈


• 明确前端规范


• 前后端代码分离，打造独立的前端CI/CD

确定前端技术栈

由于我司目前主要中后台项目居多，这里确认的技术栈也主要基于此方向展开的。

首先，传统的中后台项目，前端一般会包含以下这些内容：

那以上这些内容，如何实现呢？可以从三个方向展开：

• 自己团队手动封装，形成团队自己的一套最佳实践（其实就是结合公司业务场景，逐渐沉淀出一套初始化项目的项目模版）


• 借助社区开源方案：这里推荐：蚂蚁开源的UmiJS
  
  
  

  
  简单来说，该框架就是以插件的形式集成了传统中后台解决方案常见的内容，例如常见的路由管理，权限管理等等，我们只需要引入相应的插件即可。



• 使用现成的开箱即用的中台前端解决方案框架，这里推荐以下几个框架：
  
  
  
  
  • react的Ant Design Pro，
  
  
  • Vue3的Vue3 Vben Admin，
  
  
  • Vue2的vue-element-admin
  
  
  
  

那我司是如何选择的呢？历史项目使用了一部分Vue3 Vben Admin，新项目统一采用Ant Design Pro，

这里重点对比一下Vue-vben-admin和Ant design pro：

• Vue3 Vben Admin
  
  
  
  
  • 优势
    
    
    
    
    • 当前使用技术栈，且用了两到三年，积累了一定的经验，趟过了一些坑。
    
    
    • 整体功能相对比较齐全，不需要从零开发。
    
    
    
    
  
  
  • 劣势
    
    
    
    
    • 本地版本迭代更新机制不太友好，需要开发者每次手动clone最新版本的模版仓库，然后还需要将原来的业务代码进行copy，而且如果对源码代码有更新的话，会更加麻烦，例如：一个组件，我们可能在项目中进行了二次修改，然后，我们更新vben版本的时候，作者很有可能也对该组件进行了代码更新，这个时候，就需要比对新旧组件代码，容易出现问题。
      
      
      
      • 底层原因一：项目架构整体相对比较简单，没有采用monorepo架构，模版项目代码中封装的hook，组件等内容没有单独发npm包，没有版本管理。
      
      
      • 底层原因二：封装的组件，自定义render能力有限，需要我们手动修改组件源码。
      
      
      
      
    
    
    
    
  
  
  • 部分源码嵌套层级较深，新手上手成本较大，随着业务的迭代，源码和业务代码容易混淆，导致后期版本升级较难。
  
  
  • 目前我们项目首屏渲染过慢（后期可能会成为一个比较明显的问题）
  
  
  
  


• Ant Design Pro
  
  
  
  
  • 优势
    
    
    
    • 整体社区生态更加完善，基于 umi + ant-design pro component，二次封装的组件等内容都有版本管理，作为开源项目，更利于开发者去通过npm包的形式去按需引入，同时提供了一下自定义入口，可以帮助我们二次开发。
    
    
    
    
  
  
  • 劣势
    
    
    
    • 新技术栈，初期需要一些学习成本，需要淌一些坑。
    
    
    
    
  
  
  
  

综合考虑了几点，团队计划采用 React + Umijs + And-design-pro 来作为目前复杂项目的核心技术栈，同时，一些简单项目，我们也可以直接使用creat-react-app脚手架去初始化项目，同时，一些官网，也采用了WordPress去快速建站（国外使用的较多）这样可以节省前端的开发成本。

前端中台解决方案 之 umijs + ant-design-pro 调研踩坑全记录
如果小伙伴对上面这些技术栈，尤其是React + Umijs + And-design-pro这一套有经验，也欢迎评论区分享，看有没有哪些问题或者坑可以避免。

明确前端规范

确认技术栈以后，接下来，就是要明确前端规范，保证团队开发统一，再次贴出之前总结的图：

这里，再把其中一些关键点说明一下：

• 编码规范：除了确认规范标准之后，在项目中还需要借助工具化：Eslint + Prettier + Stylelint 要确保项目中引入这些工具，并且进行有效检测。


• Git规范：常见两点就是：Commit Message 规范以及Branch命名规范，这些也都可以借助工具：husky + lingstaged来进行约束。


• UI规范：对于一部分中后台项目，可能没有专门设计参与，这个时候就需要前端对于整个页面的设计交互有一个更好的认识和把握，推荐大家可以参考：Ant Design设计规范，里面列出了常见页面场景的交互规范，可以帮助我们更好的提升项目的用户体验。

前后端代码分离，打造独立的前端CI/CD

CI/CD这部分，通常也需要前端整体有一个认识和把握，这样可以帮助我们了解前端项目在整个集成部署过程中，内部的实现流程，也可以帮助我们更快的去定位问题，解决问题。

这里就不额外展开了，有类似需求的同学可以参考我之前总结的：# 基于Docker + Nginx + Gitlab-runner 构建前端CI/CD

文档建设

文档建设，其实也是必不可少的一个环节，包括我们上提到的这些前端规范，项目等内容，都可以逐步去沉淀到我们团队的文档中，随着内容的积累，沉淀的文档也会成为团队必不可缺的财富。

如果想推动团队进行文档建设的小伙伴儿，可以从以下几方面展开：

• 新人报到（VPN配置、项目启动）


• 规范类
  
  
  
  • 流程规范：git分支、commit规范
  
  
  • 编码规范：eslint、文件名、代码复杂度
  
  
  
  


• 项目类
  
  
  
  • 需求文档
  
  
  • 研发方案
  
  
  • 项目总结
  
  
  
  


• 技术类
  
  
  
  • 常见的技术分享
  
  
  • 项目中的典型的技术点总结
  
  
  
  

总结

以上内容虽然相对基础，也很简单，但其实都是前端团队必不可少的，相信做完以上这些，我们的前端团队会变得更加规范和专业，当然，距离一个成熟的前端团队，大厂前端团队来说，我司的前端团队才刚刚起步，同时不同的团队，不同的业务，也会有不同的基建工作，这篇文档也会伴随着我司前端团队的成长去逐步的更新，相信会越来越好，前端不易，尤其这两年，前端已死，裁员，降薪等等负面消息在不断冲击着每一个程序猿，相信大家都可以熬过去的，祝大家越来越好。

写作不易，欢迎小伙伴儿们点赞收藏+关注，感恩。

参考文档

• 非大厂的我们，要如何去搞前端基建？


• 我是如何带领团队从零到一建立前端规范的


• # 如何推动前端团队的基础设施建设

效果演示

横版

竖版

思路分析

基本结构

HTML基本结构

<div id="container"></div>

这里只需要一个容器，其他的结构通过js动态生成

CSS

#container {

  /* 添加这行样式=>文字纵向从右往左显示 */

  /* 目前先不设置,后面可以取消注释 */

  /* writing-mode: vertical-rl; */

}

#container span {

  /* 这里opacity先设置为1，让其不透明，可以看到每一步的效果 */

  /* 写完js之后到回来改为0 */

  opacity: 1;

  transition: opacity 0.5s;

}

文本数据

const data = ['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']

使用数组存放文本数据，一个元素代表一段文字

创建p标签

使用for/of循环遍历数组创建对应个数的p标签，添加到html页面中

const data = ['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']

// 获取dom元素

const container = document.querySelector('#container')

// for/of循环遍历数组

for (const item of data) {

  // 打印每一个item => 数组的每一个元素

  console.log(item)

  // 创建p标签

  const p = document.createElement('p')

  // 将p标签插入到container

  container.append(p)

}

item代表数组的每一个元素，也就是每一段文字，所以会创建4个p标签

与数组元素数量对应的p标签就生成好了

接下来就是将每一个元素里面的文本添加到span标签中

创建span标签

为每一个字创建一个span标签，然后让span标签的内容等于对应的字，再将每一个生成的span插入到p标签

本节代码

// 遍历item的每一个字

for (let i = 0; i < item.length; i++) {

  // 创建span

  let span = document.createElement('span')

  // span的内容等于item的每一个字

  span.innerHTML = item[i]

  // 将span插入到p标签中

  p.append(span)

}

合并后代码

const data = ['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']

// 获取dom元素

const container = document.querySelector('#container')

// for/of循环遍历数组

for (const item of data) {

  // 打印每一个item => 数组的每一个元素

  console.log(item)

  // 创建p标签

  const p = document.createElement('p')

  // 遍历item的每一个字

  for (let i = 0; i < item.length; i++) {

    // 创建span

    let span = document.createElement('span')

    // span的内容等于item的每一个字

    span.innerHTML = item[i]

    // 将span插入到p标签中

    p.append(span)

  }

  // 将p标签插入到container

  container.append(p)

}

此时已经完成了渲染数组，并将数组的每一个元素的文字渲染到单独的span中

接下来就要让每一个文字做到从看不见到看的见的效果

添加透明度过渡效果

将css样式中的opacity由1改为0

因为每个字的出现时间不一样，所以不能直接在循环的时候直接添加过渡效果，添加以下代码，让span标签在添加到p标签前也添加到新数组中

const arr = []

// 将span也添加到新数组中

arr.push(span)

最后遍历arr数组，为每一个元素添加一个过渡延迟效果

// 延时1毫秒等待上方循环渲染完成

setTimeout(() => {

  // 遍历arr数组的每一个元素

  arr.forEach((item, index) => {

    // 给每一个元素添加过渡延迟属性

    item.style.transitionDelay = `${index * 0.2}s`

    // 将透明度设置为不透明

    item.style.opacity = 1

  })

}, 1)

最后的最后将css样式中的opacity改为0，让所有的字透明

#container span {

  opacity: 0;

  transition: opacity 0.5s;

}

完整js代码

const data = ['清明时节闹坤坤，', '路上行人梳中分；', '借问荔枝何处有，', '苏珊遥指蔡徐村。']

const arr = []

// 获取dom元素

const container = document.querySelector('#container')

// for/of循环遍历数组

for (const item of data) {

  // 打印每一个item => 数组的每一个元素

  console.log(item)

  // 创建p标签

  const p = document.createElement('p')

  // 遍历item的每一个字

  for (let i = 0; i < item.length; i++) {

    // 创建span

    let span = document.createElement('span')

    // span的内容等于item的每一个字

    span.innerHTML = item[i]

    // 将span插入到p标签中

    p.append(span)

    // 将span也添加到新数组中

    arr.push(span)

  }

  // 将p标签插入到container

  container.append(p)

}

// 延时1毫秒等待上方循环渲染完成

setTimeout(() => {

  // 遍历arr数组的每一个元素

  arr.forEach((item, index) => {

    // 给每一个元素添加过渡延迟属性

    // 让每一个字都比前一个字延时0.2秒的时间

    item.style.transitionDelay = `${index * 0.2}s`

    // 将透明度设置为不透明

    item.style.opacity = 1

  })

}, 1)

至此，已经完成了逐字显示的效果，最后介绍一个css属性

writing-mode

使用这个属性可以改变文字方向，实现纵向从左往右或从右往左显示

以下摘自mdn文档

writing-mode 属性定义了文本水平或垂直排布以及在块级元素中文本的行进方向。为整个文档设置该属性时，应在根元素上设置它（对于 HTML 文档，应该在 html 元素上设置）

horizontal-tb

对于左对齐（ltr）文本，内容从左到右水平流动。对于右对齐（rtl）文本，内容从右到左水平流动。下一水平行位于上一行下方。

vertical-rl

对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行右侧。

vertical-lr

对于左对齐（ltr）文本，内容从上到下垂直流动，下一垂直行位于上一行右侧。对于右对齐（rtl）文本，内容从下到上垂直流动，下一垂直行位于上一行左侧。

一. 目标效果

二. 实现思路

使用Animate API或者CSS动画的方式都可以，我选择的是Animate API。

实现无缝滚动的一般思路

Translate位移+无限循环动画。但是这样会有一个小问题，就是在动画结束又开始的一瞬间会闪烁一下，不是很完美。

解决方法

复制一份数据, 原来的1份数据变成2份数据。然后动画的关键帧设置位移的终点为50%，这样每次动画的结束帧就在数据的中间位置, 注意如果数据之间有间距的话，还要加上间距的一半。这样即可实现无限滚动，并且足够丝滑。3

三. 实现

核心代码

以下代码示例都使用React框架。

  // 使用Web animate Api 添加动画

  useEffect(() => {

    if (!container.current) return;

    // 获取gap值

    const gap = getComputedStyle(container.current).gap.split('px')[0] ?? 0;



    // 滚动容器(container)的50%宽度 + 滚动容器的50%gap值

    // 如果不加滚动容器的50%gap值, 在动画结束又开始的瞬间会跳一下

    const translateX = container.current.clientWidth / 2 + Number(gap) / 2;

    if (isNaN(translateX)) {

      throw new Error('translateX is NaN!');

    }



    // 定义关键帧, 执行动画

    let keyframes: Keyframe[] = [];

    if (type === 'rtl') {

      keyframes = [

        {

          transform: 'translateX(0)',

        },

        {

          transform: `translateX(-${translateX}px)`,

        },

      ];

    } else if (type === 'ltr') {

      keyframes = [

        {

          transform: `translateX(-${translateX}px)`,

        },

        {

          transform: 'translateX(0)',

        },

      ];

    }



    animation.current = container.current.animate(keyframes, {

      duration,

      easing: 'linear',

      iterations: Infinity,

    });

  }, []);



 return (

    // 使用context传递store和dispatch

    <SwiperContext.Provider value={{ store, dispatch }}>

      <div className={classNames(['w-full overflow-x-hidden', wrapperClassName])}>

        {/* 使用inline-flex代替flex，让ul的宽度被子元素撑开 */}

        <ul

          className={classNames(['inline-flex flex-nowrap gap-5', className])}

          style={style}

          ref={container}

        >

          {/* 类似于HOC的效果, 为Item组件添加_key */}

          {children.map((child) =>

            cloneElement(child as ReactElement, {

              _key: (child as ReactElement).key ?? '',

            })

          )}



          {/* 实现无缝滚动, 复制一组子元素进行占位 */}

          {children.map((child) =>

            cloneElement(child as ReactElement, {

              _key: (child as ReactElement).key ?? '',

            })

          )}

        </ul>

      </div>

    </SwiperContext.Provider>

  );

其中type只是为了区分在x轴上的滚动方向而已，根据方向应用不同的动画。动画的实例使用useRef()去保存。
方便后续调用此动画实例进行动画的暂停和播放。

完整代码

SwiperBox.tsx

import { useHover } from 'ahooks';

import classNames from 'classnames';

import { isNaN, isUndefined } from 'lodash-es';

import {

  cloneElement,

  CSSProperties,

  ReactElement,

  ReactNode,

  useContext,

  useEffect,

  useRef,

} from 'react';



import { SwiperContext } from './swiper-context';

import useSwiperReducer, { SwiperActions } from './use-swiper-reducer';



interface SwiperBoxProp {

  /**

   * 轮播方向

   *

   * @type {('ltr' | 'rtl')}

   * @memberOf SwiperBoxProp

   */

  type: 'ltr' | 'rtl';



  /**

   * 子节点

   *

   * @type {ReactNode[]}

   * @memberOf SwiperBoxProp

   */

  children: ReactNode[];



  /**

   * 类名

   *

   * @type {string}

   * @memberOf SwiperBoxProp

   */

  className?: string;



  /**

   * 外层节点类名

   *

   * @type {string}

   * @memberOf SwiperBoxProp

   */

  wrapperClassName?: string;



  /**

   * 节点样式

   *

   * @type {CSSProperties}

   * @memberOf SwiperBoxProp

   */

  style?: CSSProperties;



  /**

   * 动画持续时间

   *

   * @type {EffectTiming['duration']}

   * @memberOf SwiperBoxProp

   */

  duration?: EffectTiming['duration'];



  /**

   * 鼠标悬停时触发

   * @type {boolean} isHovering 是否悬停

   * @type {string} key 节点key

   *

   * @memberOf SwiperBoxProp

   */

  hoverOnChange?: (isHovering: boolean, key: string) => void;

}



/**

 * 无限循环、无缝轮播组件

 * 使用这个组件必须通过gap的方式(eg: gap-4)来设置滚动项之间的距离, 不能使用margin的方式, 不然无缝滚动会有问题

 */

function SwiperBox(prop: SwiperBoxProp) {

  const {

    type,

    className,

    wrapperClassName,

    style,

    children,

    duration = 3000,

    hoverOnChange,

  } = prop;

  const [store, dispatch] = useSwiperReducer();

  const { activeKey } = store;

  // 滚动容器

  const container = useRef<HTMLUListElement>(null);

  // 动画实例

  const animation = useRef<Animation | null>(null);



  // activeKey改变时通知外部组件

  useEffect(() => {

    hoverOnChange &&

      !!Object.keys(activeKey).length &&

      hoverOnChange(activeKey.isHovering, activeKey.key);

  }, [activeKey]);



  // 获取所有的key值并存储

  useEffect(() => {

    dispatch(

      SwiperActions.updateKeys(children.map((child) => (child as ReactElement).key ?? ''))

    );

  }, []);



  // 使用Web animate Api 添加动画

  useEffect(() => {

    if (!container.current) return;

    // 获取gap值

    const gap = getComputedStyle(container.current).gap.split('px')[0] ?? 0;



    // 滚动容器(container)的50%宽度 + 滚动容器的50%gap值

    // 如果不加滚动容器的50%gap值, 在动画结束又开始的瞬间会跳一下

    const translateX = container.current.clientWidth / 2 + Number(gap) / 2;

    if (isNaN(translateX)) {

      throw new Error('translateX is NaN!');

    }



    // 定义关键帧, 执行动画

    let keyframes: Keyframe[] = [];

    if (type === 'rtl') {

      keyframes = [

        {

          transform: 'translateX(0)',

        },

        {

          transform: `translateX(-${translateX}px)`,

        },

      ];

    } else if (type === 'ltr') {

      keyframes = [

        {

          transform: `translateX(-${translateX}px)`,

        },

        {

          transform: 'translateX(0)',

        },

      ];

    }



    animation.current = container.current.animate(keyframes, {

      duration,

      easing: 'linear',

      iterations: Infinity,

    });

  }, []);



  // 鼠标移入动画暂停/播放

  useEffect(() => {

    if (!animation.current) return;

    if (isUndefined(activeKey.isHovering)) return;



    if (activeKey.isHovering) {

      animation.current.pause();

    } else {

      animation.current.play();

    }

  }, [activeKey]);



  return (

    // 使用context传递store和dispatch

    <SwiperContext.Provider value={{ store, dispatch }}>

      <div className={classNames(['w-full overflow-x-hidden', wrapperClassName])}>

        {/* 使用inline-flex代替flex，让ul的宽度被子元素撑开 */}

        <ul

          className={classNames(['inline-flex flex-nowrap gap-5', className])}

          style={style}

          ref={container}

        >

          {/* 类似于HOC的效果, 为Item组件添加_key */}

          {children.map((child) =>

            cloneElement(child as ReactElement, {

              _key: (child as ReactElement).key ?? '',

            })

          )}



          {/* 实现无缝滚动, 复制一组子元素进行占位 */}

          {children.map((child) =>

            cloneElement(child as ReactElement, {

              _key: (child as ReactElement).key ?? '',

            })

          )}

        </ul>

      </div>

    </SwiperContext.Provider>

  );

}



interface SwiperBoxItemProp {

  children: ReactNode;

  // 唯一标识, React不会将key转发到组件中, 因此自定义一个唯一的_key

  _key?: string;

}



function SwiperBoxItem(prop: SwiperBoxItemProp) {

  const { children, _key } = prop;



  const container = useRef<HTMLLIElement>(null);

  const context = useContext(SwiperContext);



  // 鼠标hover

  const onEnter = () => {

    context && _key && context.dispatch(SwiperActions.onEnter(true, _key));

  };



  // 鼠标退出hover

  const onLeave = () => {

    context && _key && context.dispatch(SwiperActions.onLeave(false, _key));

  };



  useHover(container, {

    onEnter,

    onLeave,

  });



  return (

    <li

      ref={container}

      className="transition-transform duration-500 ease-out hover:scale-105"

    >

      {children}

    </li>

  );

}



const SwiperWithAnimation = {

  Box: SwiperBox,

  Item: SwiperBoxItem,

};



export default SwiperWithAnimation;

swiper-context.ts

import { createContext, Dispatch } from 'react';



import { SwiperAction, SwiperState } from './use-swiper-reducer';



export type SwiperContextType = {

  store: SwiperState;

  dispatch: Dispatch<SwiperAction>;

};

export const SwiperContext = createContext<SwiperContextType | null>(null);

useSwiperReducer.ts

import { useReducer } from 'react';



export interface SwiperState {

  activeKey: { isHovering: boolean; key: string };

  totalKeys: string[];

}



export type SwiperAction<T = any> = {

  type: string;

  payload: T;

};



export const SwiperActions = {

  onEnter: (isHovering: boolean, key: string) => ({

    type: 'onEnter',

    payload: { isHovering, key },

  }),

  onLeave: (isHovering: boolean, key: string) => ({

    type: 'onLeave',

    payload: { isHovering, key },

  }),

  updateKeys: (keys: string[]) => ({

    type: 'update_keys',

    payload: keys,

  }),

};



export default function useSwiperReducer() {

  const initialState: SwiperState = {

    activeKey: {} as SwiperState['activeKey'],

    totalKeys: [] as SwiperState['totalKeys'],

  };



  const reducer = (store: SwiperState, { type, payload }: SwiperAction): SwiperState => {

    switch (type) {

      case 'onEnter':

        return {

          ...store,

          activeKey: payload,

        };

      case 'onLeave':

        return {

          ...store,

          activeKey: payload,

        };

      case 'update_keys':

        return {

          ...store,

          totalKeys: payload,

        };

      default:

        return store;

    }

  };



  const [store, dispatch] = useReducer(reducer, initialState);



  return [store, dispatch] as const;

}

四、如何使用

import SwiperWithAnimation from '@/components/swiper-box/SwiperBox';

import { uniqueId } from 'lodash-es';





const DATA = new Array(2).fill(0).map(() => uniqueId('data'));

/**

 *  测试页面

 */

export default function TestPage() {

  // 鼠标hover事件

  const hoverOnChange = (isHovering: boolean, key: string) => {

    console.log('isHovering: ', isHovering);

    console.log('key: ', key);

  };



  return (

    <div>

      <SwiperWithAnimation.Box

        type="ltr"

        wrapperClassName="py-9 m-auto !w-[600px] border border-red-200"

        className="gap-8"

        hoverOnChange={hoverOnChange}

      >

        {DATA.map((data) => (

          <SwiperWithAnimation.Item key={data}>

            <div className="f-c h-[300px] w-[300px] rounded-lg bg-theme-primary">

              <div className="text-2xl">{data}</div>

            </div>

          </SwiperWithAnimation.Item>

        ))}

      </SwiperWithAnimation.Box>

    </div>

  );

}

最近项目上要实现一个小 'x' 的关闭样式, 今天记录一下处理过程

先看效果

HTML DOM 元素说明

要渲染内容必须有 dom 节点, 这里我们使用 span 作为容器, 然后所有的处理都基于它进行处理

<span class="close-x">span>

第一步, 设置 close-x 的样式

@closeXSize: 20px; // 大小/尺寸

@closeXLine: 2px; // 线条宽度

.close-x {

    position: relative;

    display: inline-block;

    width: @closeXSize;

    height: @closeXSize;

    cursor: pointer;

}

• 通过使用 closeXSize closeXLine, 方便对尺寸进行调整
  
  渲染出来大概是这样的
  

第二步, 通过伪元素 before after 画两条线

.close-x {

    // ...



    &::before, &::after {

        position: absolute;

        left: 50%;

        width: @closeXLine;

        height: 100%;

        margin-left: (@closeXLine / -2);

        content: '';

        background: #000;

    }

}

• margin-left 的设置是为了处理'线'的自身宽度
  
  渲染出来大概是这样的
  

第三步, 分别设置旋转角度

.close-x {

    // ...



    &::before {

        transform: rotate(-45deg);

    }



    &::after {

        transform: rotate(45deg);

    }

}

渲染出来大概是这样的, 基本上就完成了

继续优化, 锦上添花

• 先来定义一个动画, 动画的意思是这样的:
  
  
  
  • 当为 0% 时旋转角为 0 度,
  
  
  • 当为 100% 时旋转角为 360 度
  
  
  
  

@keyframes rotating {

    0% {

        transform: rotate(0deg);

    }



    100% {

        transform: rotate(360deg);

    }

}

持续旋转

.rotate-infinite {

    animation: rotating .3s infinite linear;

}



// 使用方式 增加类 rotate-infinite

// 

加载时旋转一次

.rotate-one {

    animation: rotating .3s linear;

}



// 使用方式 增加类 rotate-one

// 

hover 时旋转一次

.rotate-hover:hover {

    .rotate-one();

}



// 使用方式 增加类 rotate-hover

// 

选中时旋转

.rotate-active:active {

    .rotate-infinite();

}



// 使用方式 增加类 rotate-active

// 

纯JS实现

function addCloseX(content) {

    const closeXSize = 20;

    const closeXLine = 2;



    const closeXWrap = document.createElement('div');

    closeXWrap.style.cssText = `

        position: relative;

        display: inline-block;

        width: ${closeXSize}px;

        height: ${closeXSize}px;

        cursor: pointer;

    `;



    const baseStyle = `

        display: block;

        height: 100%;

        width: ${closeXLine}px;

        margin: auto;

        background: #000;

    `;

    const xLineOne = document.createElement('i');

    xLineOne.style.cssText = baseStyle + `

        transform: rotate(45deg);

    `;

    const xLineTwo = document.createElement('i');

    xLineTwo.style.cssText = baseStyle + `

        margin-top: -100%;

        transform: rotate(-45deg);

    `;

    closeXWrap.appendChild(xLineOne);

    closeXWrap.appendChild(xLineTwo);



    content.appendChild(closeXWrap);

}



addCloseX(document.getElementById('close'))

需要提供一下注入的位置, 以上示例需要我们提供这样的 dmo 节点:

<div id="close">div>

• 这种方式没有使用样式表, 所有的样式都使用了行内样式的方式实现的


• 因为只用到了行内样式, 所以没办法使用伪元素, 故引入了两个 i 标签代替

结束

相关文档

CSS 实现圆(环)形进度条