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