重构 - 保持函数的单一职责

1.前言

上篇文章写了添加扩展性方面的重构，讲到了开放封闭原则。学习的步伐不能就此停止，今天的文章，将会提及开发的另一个原则：单一职责原则。通俗点说就是一个函数只做一件事，下面将会通过几个实例，探究单一职责原则。

2.单一职责表现形式

单一职责的定义可以理解为：一个对象或者方法，只做一件事。

遵守单一职责的实例太多了，下面简单列举一下。

原生的API方面

trimRight()和trimLeft()：trimRight 只负责去除右边的空白，其它地方一概不管。 trimLeft 只负责去除右边的空白，其它地方也一概不关。

concat()： concat 只负责连接两个或更多的数组，并返回结果。不会涉及删除数组的操作。

toFixed(): toFixed 只把 Number 类型的值四舍五入为指定小数位数的数字。不会执行其它操作。

JQuery 的 API

$.each() 只负责遍历，要处理什么，自己再动手操作。

css() 只负责设置 DOM 的 style ，不会设置 innerHTML 。

animate() 只负责执行 CSS 属性集的自定义动画，不会涉及其它操作。

说是这样说，但是大家看着可能会有点懵，看不出来遵守单一原则有什么好处，下面看一个实例。

3.实例-数组处理

如下例子：

现有一批的录入学生信息，但是数据有重复，需要把数据根据 id 进行去重。然后把为空的信息，改成'--'。

let students=[     {         id:5,         name:'守候',         sex:'男',         age:'',     },     {         id:2,         name:'浪迹天涯',         sex:'男',         age:''     },     {         id:5,         name:'守候',         sex:'',         age:''     },     {         id:3,         name:'鸿雁',         sex:'',         age:'20'     } ];  function handle(arr) {     //数组去重     let _arr=[],_arrIds=[];     for(let i=0;i<arr.length;i++){         if(_arrIds.indexOf(arr[i].id)===-1){             _arrIds.push(arr[i].id);             _arr.push(arr[i]);         }     }     //遍历替换     _arr.map(item=>{         for(let key in item){             if(item[key]===''){                 item[key]='--';             }         }     });     return _arr; } console.log(handle(students))

运行结果没有问题，但是大家想一下，

1.如果改了需求，比如，学生信息不会再有重复的记录，要求把去重的函数去掉，无论，就是整个函数都要改了，还影响到下面的操作。

2.如果项目另一个地方也是同样的操作，但是不需要去重。这样只能再写一个基本一样的函数，因为上面的函数无法复用。如下

function handle1(arr) {     //数组深拷贝     let _arr=JSON.parse(JSON.stringify(arr));     //遍历替换     _arr.map(item=>{         for(let key in item){             if(item[key]===''){                 item[key]='--';             }         }     });     return _arr; }

3.如果项目有一个地方还需要根据 ID 排序。这样还是得写一个函数，因为在不能在上面的函数上面排序。

function handle2(arr) {     //数组去重     let _arr=[],_arrIds=[];     for(let i=0;i<arr.length;i++){         if(_arrIds.indexOf(arr[i].id)===-1){             _arrIds.push(arr[i].id);             _arr.push(arr[i]);         }     }     //遍历替换     _arr.map(item=>{         for(let key in item){             if(item[key]===''){                 item[key]='--';             }         }     });     //根据ID排序     _arr.sort((item1,item2)=>item1.id-item2.id);     return _arr; }

这样的问题就是在于，面对需求的变化，不能灵活的处理。函数也基本没办法复用。

下面使用单一原则构造一下

let handle={     //数组去重     removeRepeat(arr){         let _arr=[],_arrIds=[];         for(let i=0;i<arr.length;i++){             if(_arrIds.indexOf(arr[i].id)===-1){                 _arrIds.push(arr[i].id);                 _arr.push(arr[i]);             }         }         return _arr;     },     //遍历替换     setInfo(arr){         arr.map(item=>{             for(let key in item){                 if(item[key]===''){                     item[key]='--';                 }             }         });         return arr;     },     //根据id排序     sortForId(arr){         return arr.sort((item1,item2)=>item1.id-item2.id);     } }; //去重 students=handle.removeRepeat(students); //设置信息 students=handle.setInfo(students); console.log(students);

结果一样，而且这样的方式，可以使得方法可以组合使用，更加的灵活，也方便复用。

如果还需要根据ID排序，就在上面代码执行结果的基础上，再加一行代码即可。

//根据ID排序 students=handle.sortForId(students); console.log(students);

如果原始数据不需要去重，设置完信息之后，直接排序

let students=[     {         id:5,         name:'守候',         sex:'男',         age:'',     },     {         id:2,         name:'浪迹天涯',         sex:'男',         age:''     },     {         id:5,         name:'守候',         sex:'',         age:''     },     {         id:3,         name:'鸿雁',         sex:'',         age:'20'     } ]; //设置信息 students=handle.setInfo(students); //根据ID排序 students=handle.sortForId(students);

这样操作起来，即使以后需求有改动，在可控的范围内，可以灵活的组合使用，函数也可以复用。

如果觉得要让 students 连续赋值麻烦，可以借鉴 JQuery 的链式调用方式。

let ec=(function () {     let handle=function (obj) {         this.obj=JSON.parse(JSON.stringify(obj));     };     handle.prototype={         /**          * @description 去重          */         unique(){             //根据id数组去重             let _arr=[],_arrIds=[];             for(let i=0;i<this.obj.length;i++){                 if(_arrIds.indexOf(this.obj[i].id)===-1){                     _arrIds.push(this.obj[i].id);                     _arr.push(this.obj[i]);                 }             }             this.obj=_arr;             return this;         },         /**          * @description 设置保密信息          */         setInfo(){             this.obj.map(item=>{                 for(let key in item){                     if(item[key]===''){                         item[key]='--';                     }                 }             });             return this;         },         sortForId(){             this.obj.sort((item1,item2)=>item1.id-item2.id);             return this;         },         /**          * @description 返回处理结果          * @return {Array|*}          */         end(){             return this.obj;         }     }     //暴露构造函数接口     return function (obj) {         return new handle(obj);     } })(); let students=[     {         id:5,         name:'守候',         sex:'男',         age:'',     },     {         id:2,         name:'浪迹天涯',         sex:'男',         age:''     },     {         id:5,         name:'守候',         sex:'',         age:''     },     {         id:3,         name:'鸿雁',         sex:'',         age:'20'     } ]; //根据id去重和设置'--' students=ec(students).unique().setInfo().end(); console.log(students)