[代码笔记]JS保持函数单一职责,灵活组合
程序员文章站
2022-04-24 13:17:24
比如下面的代码,从服务端请求回来的订单数据如下,需要进行以下处理1.根据 status 进行对应值得显示(0-进行中,1-已完成,2-订单异常)2.把 startTime 由时间戳显示成 yyyy-mm-dd3.如果字段值为空字符串 ,设置字段值为 ‘--’ 下面就使用单一职责的原则设置 statu ......
比如下面的代码,从服务端请求回来的订单数据如下,需要进行以下处理
1.根据 status 进行对应值得显示(0-进行中,1-已完成,2-订单异常)
2.把 starttime 由时间戳显示成 yyyy-mm-dd
3.如果字段值为空字符串 ,设置字段值为 ‘--’
let orderlist=[ { id:1, status:0, starttime:1538323200000, }, { id:2, status:2, starttime:1538523200000, }, { id:3, status:1, starttime:1538723200000, }, { id:4, status:'', starttime:'', }, ]; let userlist=[ { id:1, name:'守候', type:0 }, { id:2, name:'浪迹天涯', type:1 }, { id:3, name:'曾经', type:2 } ]
下面就使用单一职责的原则设置 status,starttime,type,-- 。这里拆分成四个函数。
let handlefn={ setstatus(list){ let _status={ 0:'进行中', 1:'已完成', 2:'订单异常' } list.foreach(item=>{ item.status=item.status.tostring()?_status[item.status]:''; }) return list }, setstarttime(list){ list.foreach(item=>{ item.starttime=item.starttime.tostring()?new date(item.starttime).tolocaledatestring().replace(/\//g,'-'):''; }) return list; }, setinfo(list){ list.foreach(item=>{ for(let key in item){ if(item[key]===''){ item[key]='--'; } } }) return list; }, settype(list){ let _type={ 0:'普通用户', 1:'vip', 2:'超级vip' } list.foreach(item=>{ item.type=item.type.tostring()?_type[item.type]:''; }) return list; } }
下面直接调用函数就好:
//处理订单数据 orderlist=handlefn.setstatus(orderlist); orderlist=handlefn.setstarttime(orderlist); orderlist=handlefn.setinfo(orderlist); console.log(orderlist); //处理用户数据 userlist=handlefn.settype(userlist); userlist=handlefn.setinfo(userlist); console.log(userlist);
得到的结果:
如果嫌弃连续赋值麻烦,可以借用 jquery 的那个思想,进行链式调用。
let ec=(function () { let handle=function (obj) { //深拷贝对象 this.obj=json.parse(json.stringify(obj)); }; handle.prototype={ /** * @description 设置保密信息 */ setinfo(){ this.obj.map(item=>{ for(let key in item){ if(item[key]===''){ item[key]='--'; } } }); return this; }, /** * @description 设置状态 */ setstatus(){ let _status={ 0:'进行中', 1:'已完成', 2:'订单异常' } this.obj.foreach(item=>{ item.status=item.status.tostring()?_status[item.status]:'' }); return this; }, /** * @description 设置时间 */ setstarttime(){ this.obj.foreach(item=>{ item.starttime=item.starttime.tostring()?new date(item.starttime).tolocaledatestring().replace(/\//g,'-'):''; }); return this; }, /** * @description 设置type */ settype(){ let _type={ 0:'普通用户', 1:'vip', 2:'超级vip' } this.obj.foreach(item=>{ item.type=item.type.tostring()?_type[item.type]:''; }) return this; }, /** * @description 返回处理结果 * @return {array|*} */ end(){ return this.obj; } } //暴露构造函数接口 return function (obj) { return new handle(obj); } })();
这样就可以链式调用了
//处理订单数据 orderlist=ec(orderlist).setstatus().setstarttime().setinfo().end(); console.log(orderlist); //处理用户数据 userlist=ec(userlist).settype().end(); console.log(userlist);
上面有个问题,就是每次调用一个方法就会执行遍历一遍,处理的方式就是在每一个函数里面,只记录要处理什么,但是不进行处理,等到执行到 end 的时候再统一处理,以及返回。
let ec=(function () { let handle=function (obj) { //深拷贝对象 this.obj=json.parse(json.stringify(obj)); //记录要处理的步骤 this.handlefnlist=[]; }; handle.prototype={ /** * @description 设置保密信息 */ handlesetinfo(item){ for(let key in item){ if(item[key]===''){ item[key]='--'; } } return this; }, setinfo(){ this.handlefnlist.push('handlesetinfo'); return this; }, /** * @description 设置状态 */ handlesetstatus(item){ let _status={ 0:'进行中', 1:'已完成', 2:'订单异常' } item.status=item.status.tostring()?_status[item.status]:'' return item; }, setstatus(){ this.handlefnlist.push('handlesetstatus'); return this; }, /** * @description 设置时间 */ handlesetstarttime(item){ item.starttime=item.starttime.tostring()?new date(item.starttime).tolocaledatestring().replace(/\//g,'-'):''; return item; }, setstarttime(){ this.handlefnlist.push('handlesetstarttime'); return this; }, /** * @description 设置type */ handlesettype(item){ let _type={ 0:'普通用户', 1:'vip', 2:'超级vip' } item.type=item.type.tostring()?_type[item.type]:''; return item; }, settype(){ this.handlefnlist.push('handlesettype'); return this; }, /** * @description 返回处理结果 * @return {array|*} */ end(){ //统一处理操作 this.obj.foreach(item=>{ this.handlefnlist.foreach(fn=>{ item=this[fn](item); }) }) return this.obj; } } //暴露构造函数接口 return function (obj) { return new handle(obj); } })();
参考地址:
下一篇: 厦门四个云计算项目纳入全国试点