[代码笔记]JS保持函数单一职责，灵活组合

比如下面的代码，从服务端请求回来的订单数据如下，需要进行以下处理
1.根据 status 进行对应值得显示（0-进行中，1-已完成，2-订单异常）
2.把 startTime 由时间戳显示成 yyyy-mm-dd
3.如果字段值为空字符串 ，设置字段值为 ‘--’

let orderList=[
    {
        id:1,status:02153852320000014'''守候'
    },name:'浪迹天涯''曾经'
    }
]

下面就使用单一职责的原则设置 status，startTime，type，-- 。这里拆分成四个函数。

let handleFn={
    setStatus(list){
        let _status={
            0:'进行中'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,'-'):'' list;
    },setInfo(list){
        list.forEach(item=>{
            for(let key in item){
                if(item[key]===''){
                    item[key]='--';
                }
            }
        })
        {
            0:'普通用户'2:'超级vip'{
            item.type=item.type.toString()?_type[item.type]:'' 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= (obj) {
        深拷贝对象
        this.obj=JSON.parse(JSON.stringify(obj));
    };
    handle.prototype={
        /**
         * @description 设置保密信息
         */
        setInfo(){
            this.obj.map(item=>{
                 item){
                    ){
                        item[key]='--';
                    }
                }
            });
            return this;
        },*
         * @description 设置状态
         
           setStatus(){
               let _status={
                   0:'进行中'
               }
               this.obj.forEach(item=>{
                item.status=item.status.toString()?_status[item.status]:''
            });
            ;
           },1)">*
         * @description 设置时间
         
           setStartTime(){
               {
                item.startTime=item.startTime.toString()?;
            });
            *
         * @description 设置type
         
           setType(){
            let _type={
                0:'普通用户'
            }
            {
                item.type=item.type.toString()?_type[item.type]:'';
            })
            *
         * @description 返回处理结果
         * @return {Array|*}
         
        end(){
            .obj;
        }
    }
    暴露构造函数接口
    new handle(obj);
    }
})();

这样就可以链式调用了

ec(orderList).setStatus().setStartTime().setInfo().end();
console.log(orderList);
ec(userList).setType().end();
console.log(userList);

上面有个问题，就是每次调用一个方法就会执行遍历一遍，处理的方式就是在每一个函数里面，只记录要处理什么，但是不进行处理，等到执行到 end 的时候再统一处理，以及返回。

let ec=(JSON.parse(JSON.stringify(obj));
        记录要处理的步骤
        this.handleFnList=[];
    };
    handle.prototype=
        handleSetInfo(item){
            ;
                }
            }
            this.handleFnList.push('handleSetInfo');
            
           handleSetStatus(item){
               let _status=
               }
            item.status=item.status.toString()?_status[item.status]:''
             item;
           },setStatus(){
            this.handleFnList.push('handleSetStatus'
           handleSetStartTime(item){
            item.startTime=item.startTime.toString()?;
            this.handleFnList.push('handleSetStartTime'
           handleSetType(item){
            let _type=
            }
            item.type=item.type.toString()?_type[item.type]:'' item;
        },setType(){
            this.handleFnList.push('handleSetType'统一处理操作
            this.handleFnList.forEach(fn=>{
                    item=[fn](item);
                })
            })
             handle(obj);
    }
})();

参考地址：[探索]在开发中尽量提高代码的复用性