欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

[代码笔记]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);

得到的结果:

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

如果嫌弃连续赋值麻烦,可以借用 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);
    }
})();

参考地址: