纯函数思想规避BUG
-
阅读本文的前提
-
懂得JS预编译的原理
-
懂得JS原始值和引用值在内存中的存储区别
-
-
JS开发中的痛点
- JS中常常会创建全局变量 , 全局变量可以在程序的任何位置被访问 , 而程序中任何部分都可能修改全局变量 , 这种修改全局变量的行为可能会导致其他部分代码的行为出现异常 , 这是一种导致BUG的常见原因
-
纯函数的定义和特点
-
纯函数不依赖且不修改其作用域之外的变量 , 没有任何可观察的副作用
-
纯函数非常容易进行单元测试 , 对于相同的输入 , 永远会得到相同的输出
-
纯函数具有健壮性 , N个纯函数可以并行执行 , 且改变他们的执行次序不会对系统造成影响
-
-
纯函数规避痛点
- 由于纯函数不依赖且不修改其作用域之外的变量 , 我们只利用纯函数的返回值 , 所以采用纯函数写法是一种避免引入BUG的思想利器
-
认识一下纯函数吧
-
依赖或修改了作用域之外的变量的函数 <–> 不是纯函数 ( 充要条件 )
// 非纯函数 var x = 18; function compare(age) { return age > x; } console.log( compare(20) );// 纯函数 var x = 18; function compare(age, num) { return age > num; } console.log( compare(20, x) ); -
具有一定功能但没有返回值的函数 --> 不是纯函数 ( 必要条件 )
// 非纯函数 : 因为修改了作用域之外的变量且函数没有返回值 var arr = []; function add(_arr) { _arr.push( { name: 'liu' } ); } add(arr); console.log(arr);// 纯函数 : 因为不影响作用域之外的变量且利用的是函数的返回值 var arr = []; function add() { var newArr = []; newArr.push( { name: 'liu' } ); return newArr; } console.log(arr, add());
-
-
纯函数的实际应用
-
纯函数可应用于过滤数组
- 实现按过滤条件过滤数组的功能时 , 采用深克隆的方式拷贝数组的数据副本 , 并对数据副本进行操作 , 既能保证实现功能 , 也不会对原数组产生影响 , 和下文有异曲同工之妙
-
组件化开发配合状态管理应用纯函数
-
在VUE、REACT大型项目的组件化开发中 , 我们可以使用Vuex、Redux统筹管理组件状态( 下文称状态池 )
-
但是项目中的任何一个组件直接修改状态池中的数据 , 都可能造成其他组件的运行异常
-
而当Demo组件运行异常 , 我们很难定位到是哪一个组件对状态池的直接修改造成了Demo组件的运行异常
-
所以在实现组件功能的时候我们就可以采用纯函数的思想 , 让组件采用深克隆的方式拷贝状态池中的数据副本 , 并对数据副本进行操作 , 这样就能避免组件对状态池中的数据产生直接影响
-
纯函数在组件化开发中的应用不但可以保证各组件正常运行 , 也方便我们在调试代码时定位BUG的位置
-
当然 , 纯函数的思想只能发挥一部分作用 , 实际开发中所有函数都是纯函数的愿望不可强求~
-
-
