背景

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

• 不用 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、文件名、代码复杂度
  
  
  
  


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


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

总结

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

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

参考文档

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


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


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

需求场景

我们在开发应用的时候经常会遇到先登录，登录成功后再跳转到目标页面。比如商品详情页面我们点击购买必须要先登录，登录完成才能去下单支付。针对这种场景，我们一般有两种做法：

第一种我们就不谈了产品经理不同意🐶。第二种我们一般是在 onActivityResult 里面获取到登录成功，然后根据 code 跳转到目标页面。这种方式缺点就是我们要在每个页面都处理相同的逻辑还有定义各种 code，如果应用里面很多这种场景也太繁琐了。那有没有统一的方式去处理这种场景就是我们今天的主题了。

封装方式

我们的应用是组件化的，APP 的页面跳转使用了 Arouter。所以我们统一处理使用 Arouter 封装。直接上代码

fun checkLoginToTarget(postcard: Postcard) {//Postcard 是 Arouter 的类

    if (User.isLogin()) {

        postcard.navigation()

    } else {

        //不能使用 postcard 切换 path 直接跳转，因为 group 可能不同，所以重新 build

        ARouter.getInstance().build(Constant.LOGIN)

            .with(postcard.extras)//获取携带的参数重新转入

            .withString(Constant.TAGACTIVIFY, postcard.path)//添加目标路由

            .navigation()

    }

}

//登录成功后在登录页面执行这个方法

fun loginSuccess() {

    val intent= intent

    val target = intent.getStringExtra(Constant.TAGACTIVIFY)//获取目标路由

    target?.apply { 

        if (isNotEmpty()){

            val build = ARouter.getInstance().build(this)

            val extras = intent.extras//获取携带的参数

            if (extras != null) {

                build.with(extras)

            }

            build.navigation()

        }

    }

    finish()

}

代码加了注释，使用 Kotlin 封装了顶层函数，登录页面在登录成功后跳转到目标页面，针对上面的场景直接调用 checkLoginToTarget 方法。

checkLoginToTarget(ARouter.getInstance().build(Constant.PAY_PAGE).withInt(Constant.GOOD_ID,id))

通过 Arouter 传入下单支付的路由地址，并且携带了商品的 ID，生成了 Postcard 参数。登录成功后能带着商品 ID
直接下单支付了。

最后

如果项目里没有使用路由库可以使用 Intent 封装实现，或者别的路由库也可以用上面的方式去做统一处理。

简述

要启动未注册的Activity主要是要逃避AMS的检测，思路是，检测前要启动的Activity换成注册的，检测通过了，再在启动前换回来。这里主要是两个点。检测前，hookAMS。检测后hookHandler。hook点有很多尽量找静态变量、单例和public

hookAMS

1、android 11举例，启动acitivty是在ATMS中（11之前是AMS，这个自己可以去适配）

2、拿到ATMS的代理。

3、然后ATMS整个动态代理在startActivity之前将Intent 偷梁换柱

4、换成已经注册的Activity之后记得原目标Acitivty存起来，在骗完AMS之后换回来

 

public static void hookAMS() {

    // 10之前

    try {

        Class<?> clazz = Class.forName("android.app.ActivityTaskManager");

        Field singletonField = clazz.getDeclaredField("IActivityTaskManagerSingleton");



        singletonField.setAccessible(true);

        Object singleton = singletonField.get(null);









        Class<?> singletonClass = Class.forName("android.util.Singleton");

        Field mInstanceField = singletonClass.getDeclaredField("mInstance");

        mInstanceField.setAccessible(true);

        Method getMethod = singletonClass.getMethod("get");

        Object mInstance = getMethod.invoke(singleton);



        Class IActivityTaskManagerClass = Class.forName("android.app.IActivityTaskManager");



        Object mInstanceProxy = Proxy.newProxyInstance(Thread.currentThread().getContextClassLoader(),

                new Class[]{IActivityTaskManagerClass}, new InvocationHandler() {

                    @Override

                    public Object invoke(Object proxy, Method method, Object[] args) throws Throwable {



                        if ("startActivity".equals(method.getName())) {

                            int index = -1;



                            // 获取 Intent 参数在 args 数组中的index值

                            for (int i = 0; i < args.length; i++) {

                                if (args[i] instanceof Intent) {

                                    index = i;

                                    break;

                                }

                            }

                            // 生成代理proxyIntent -- 孙悟空（代理）的Intent

                            Intent proxyIntent = new Intent();

                            // 这个包名是宿主的

                            proxyIntent.setClassName("com.leo.amsplugin",

                                    ProxyActivity.class.getName());



                            // 原始Intent能丢掉吗？保存原始的Intent对象

                            Intent intent = (Intent) args[index];

                            proxyIntent.putExtra(TARGET_INTENT, intent);



                            // 使用proxyIntent替换数组中的Intent

                            args[index] = proxyIntent;

                        }



                        // 原来流程

                        return method.invoke(mInstance, args);

                    }

                });



        // 用代理的对象替换系统的对象

        mInstanceField.set(singleton, mInstanceProxy);

    } catch (Exception e) {

        e.printStackTrace();

    }

}

hookHandler

hookAMS完成，欺骗了AMS，接下来要把Intent中的原目标扶起回正位，
启动Activity要用handler，我们从这里hook吧

1、Activtiy thread 中的handler用来启动activity class H extends Handler

2、handlerMessage中的EXECUTE_TRANSACTION(159)来启动activity

3、
final ClientTransaction transaction = (ClientTransaction) msg.obj;--包含Intent

mTransactionExecutor.execute(transaction);--执行启动

launchActivityItem中有Intent，而ta继承于ClientTransactionItem，而ClientTransaction中包含List<ClientTransactionItem>

4、所以我只要拿到msg就可以拿到Intent。
msg.obj --> ClientTransaction --> List mActivityCallbacks(LaunchActivityItem)
--> private Intent mIntent 替换

5、handlerMessage(MSG)之前有个callback也可以拿到msg。则会callback是一个接口，如果重写这个接口可就可重新handlerMessage这个方法，然后操作msg。

6、ActivityThread当中，Handler的构建没有传参数。

...//去ActivityThread.java里看

@UnsupportedAppUsage

final H mH = new H();

    ...

class H extends Handler //也没写构造方法

    

...//去Handler.java里看

 

@Deprecated

public Handler() {

    this(null, false);

}   

7、实际上callback是看，那么我自己替换系统的call就可以啦

8、那我通过反射拿Handler中的mCallback，

 public void hoodHandler() {

    try {

        Class<?> clazz = Class.forName("android.app.ActivityThread");

        Field activityThreadField = clazz.getDeclaredField("sCurrentActivityThread");

        activityThreadField.setAccessible(true);

        Object activityThread = activityThreadField.get(null);



        Field mHField = clazz.getDeclaredField("mH");

        mHField.setAccessible(true);

        final Handler mH = (Handler) mHField.get(activityThread);



        Field mCallbackField = Handler.class.getDeclaredField("mCallback");

        mCallbackField.setAccessible(true);



        mCallbackField.set(mH, new Handler.Callback() {



            @Override

            public boolean handleMessage(Message msg) {

                switch (msg.what) {

                    case 159:

                        // msg.obj = ClientTransaction

                        try {

                            // 获取 List<ClientTransactionItem> mActivityCallbacks 对象

                            Field mActivityCallbacksField = msg.obj.getClass()

                                    .getDeclaredField("mActivityCallbacks");

                            mActivityCallbacksField.setAccessible(true);

                            List mActivityCallbacks = (List) mActivityCallbacksField.get(msg.obj);



                            for (int i = 0; i < mActivityCallbacks.size(); i++) {

                                // 打印 mActivityCallbacks 的所有item:

                                //android.app.servertransaction.WindowVisibilityItem

                                //android.app.servertransaction.LaunchActivityItem



                                // 如果是 LaunchActivityItem，则获取该类中的 mIntent 值，即 proxyIntent

                                if (mActivityCallbacks.get(i).getClass().getName()

                                        .equals("android.app.servertransaction.LaunchActivityItem")) {

                                    Object launchActivityItem = mActivityCallbacks.get(i);

                                    Field mIntentField = launchActivityItem.getClass()

                                            .getDeclaredField("mIntent");

                                    mIntentField.setAccessible(true);

                                    Intent proxyIntent = (Intent) mIntentField.get(launchActivityItem);



                                    // 获取启动插件的 Intent，并替换回来

                                    Intent intent = proxyIntent.getParcelableExtra(TARGET_INTENT);

                                    if (intent != null) {

                                        mIntentField.set(launchActivityItem, intent);

                                    }

                                }

                            }

                        } catch (Exception e) {

                            e.printStackTrace();

                        }

                        break;

                }

                return false;

            }

        });

    } catch (Exception e) {

        e.printStackTrace();

    }



}

总结

一个分为两步

1、hookAMS主要就是逃避ams检测,让ams检测的是一个已经注册了的activity。

2、hookHandler在生成activity之前再把activity换回来。

所以一定要熟悉动态代理，反射和Activity的启动流程。

主要通过hook，核心在于hook点

插桩
1、尽量找 静态变量 单利
2、public

动态代理

AMS检测之前我改下

效果演示

横版

竖版

思路分析

基本结构

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>

  );

}

屏幕刷新机制

基本概念

• 刷新率：屏幕每秒刷新的次数，单位是 Hz，例如 60Hz，刷新率取决于硬件的固定参数。


• 帧率：GPU 在一秒内绘制操作的帧数，单位是 fps。Android 采用的是 60fps，即每秒 GPU 最多绘制 60 帧画面，帧率是动态变化的，例如当画面静止时，GPU 是没有绘制操作的，帧率就为0，屏幕刷新的还是 buffer 中的数据，即 GPU 最后操作的帧数据。

显示器不是一次性将画面显示到屏幕上，而是从左到右边，从上到下逐行扫描，顺序显示整屏的一个个像素点，不过这一过程快到人眼无法察觉到变化。以 60 Hz 刷新率的屏幕为例，这一过程的耗时： 1000 / 60 ≈ 16.6ms。

屏幕刷新的机制大概就是： CPU 执行应用层的测量，布局和绘制等操作，完成后将数据提交给 GPU，GPU 进一步处理数据，并将数据缓存起来，屏幕由一个个像素点组成，以固定的频率（16.6ms）从缓冲区中取出数据来填充像素点。

画面撕裂

如果一个屏幕内的数据来自两个不同的帧，画面会出现撕裂感。屏幕刷新率是固定的，比如每 16.6ms 从 buffer 取数据显示完一帧，理想情况下帧率和刷新率保持一致，即每绘制完成一帧，显示器显示一帧。但是 CPU 和 GPU 写数据是不可控的，所以会出现 buffer 里有些数据根本没显示出来就被重写了，即 buffer 里的数据可能是来自不同的帧，当屏幕刷新时，此时它并不知道 buffer 的状态，因此从 buffer 抓取的帧并不是完整的一帧画面，即出现画面撕裂。

那怎么解决这个问题呢？Android 系统采用的是 双缓冲 + VSync

双缓冲：让绘制和显示器拥有各自的 buffer，GPU 将完成的一帧图像数据写入到 BackBuffer，而显示器使用的是 FrameBuffer，当屏幕刷新时，FrameBuffer 并不会发生变化，当 BackBuffer 准备就绪后，它们才进行交换。那什么时候进行交换呢？那就得靠 VSync。

VSync：当设备屏幕刷新完毕后到下一帧刷新前，因为没有屏幕刷新，所以这段时间就是缓存交换的最佳时间。此时硬件屏幕会发出一个脉冲信号，告知 GPU 和 CPU 可以交换了，这个就是 Vsync 信号。

掉帧

有时，当布局比较复杂，或者设备性能较差的时候，CPU 并不能保证在 16.6ms 内就完成绘制，这里系统又做了一个处理，当正在往 BackBuffer 填充数据时，系统会将 BackBuffer 锁定。如果到了 GPU 交换两个 Buffer 的时间点，你的应用还在往 BackBuffer 中填充数据，会发现 BackBuffer 被锁定了，它会放弃这次交换。
这样做的后果就是手机屏幕仍然显示原先的图像，这就是所谓的掉帧。

优化方向

如果想要屏幕流畅运行，就必须保证 UI 全部的测量，布局和绘制的时间在 16.6ms 内，因为人眼与大脑之间的协作无法感知超过 60fps 的画面更新,也就是 1000 / 60Hz = 16.6ms，也就是说超过 16.6ms 用户就会感知到卡顿。

层级优化

层级越少，View 绘制得就越快，常用有两个方案。

• 合理使用 RelativeLayout 和 LinearLayout：层级一样优先使用 LinearLayout，因为 RelativeLayout 需要考虑视图之间的相对位置关系，需要更多的计算和更高的系统开销，但是使用 LinearLayout 有时会使嵌套层级变多，这时就应该使用 RelativeLayout。


• 使用 merge 标签：它会直接将其中的子元素添加到 merge 标签 Parent 中，这样就不会引入额外的层级。它只能用在布局文件的根元素，不能在 ViewStub 中使用 merge 标签，当需要 inflate 的布局本身是由 merge 作为根节点的话，需要将其置于 ViewGr0up 中，设置 attachToRoot 为 true。

一个布局可以重复利用，当使用 include 引入布局时，可以考虑 merge 作为根节点，merge 根节点内的布局取决于include 这个布局的父布局。编写 XML 时，可以先用父布局作为根节点，然后完成后再用 merge 替换，方便我们预览效果。

merge_layout.xml

<?xml version="1.0" encoding="utf-8"?>

<merge xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Hello" />



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="World" />



</merge>

父布局如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">



    <include layout="@layout/merge_layout" />



</LinearLayout>

如果需要通过 inflate 引入 merge_layout 布局文件时，可以这样引入：

class MyLinearLayout(context: Context, attrs: AttributeSet) : LinearLayout(context, attrs) {



    init {

        LayoutInflater.from(context).inflate(R.layout.merge_layout, this, true)

    }

}

第一个参数为 merge 布局文件 id，第二个参数为要将子视图添加到的 ViewGr0up，第三个参数为是否将加载好的视图添加到 ViewGr0up 中。

需要注意的是，merge 标签的布局，是不能设置 padding 的，比如像这样：

<?xml version="1.0" encoding="utf-8"?>

<merge xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    android:padding="30dp">



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="Hello" />



    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:text="World" />



</merge>