[探索]在开发中尽量提高代码的复用性

ctrl+c 和 ctrl+v 给我们带来了很多的便利，但是也使我们变得懒惰，不愿思考。

1.前言

相信很多人和我一样，在开发项目的时候，因为项目赶，或者一时没想到等原因。频繁使用 ctrl+c 和 ctrl+v ，导致代码很多都是重复的。这几天，也看了自己以前写的代码，简单的探索了一下，挑选几个实例，分享下如何在特定场景下，保证代码质量前提下，提高代码复用性。

提高代码的复用性，应该是不同场景，不同解决方案的。同时也要保证代码质量。不建议强制提高代码复用性，如果提高代码复用性会大大的降低代码的可读性，维护性，可能会得不偿失。

2.HTML+CSS

在做项目的时候，相信页面上总会有很多相似的按钮，比如下图，项目上几个相似的按钮。面对这样的需求，之前是直接写三个按钮

<button type="button" class=‘u-btn-yes-samll‘>确定</button>
<button type="button" class=‘u-btn-yes‘>确定</button>
<button type="button" class=‘u-btn-yes-big‘>确定</button>

css

button{
    border:none;
    font-family:‘微软雅黑‘;
}
.u-btn-yes{
    width:80px;
    height:36px;
    font-size:14px;
    color:#fff;
    border-radius:10px;
    background:#09f;
}
.u-btn-yes-samll{
    width:60px;
    height:30px;
    font-size:12px;
    color:#fff;
    border-radius:10px;
    background:#09f;
}
.u-btn-yes-big{
    width:100px;
    height:40px;
    font-size:16px;
    color:#fff;
    border-radius:10px;
    background:#09f;
}

这样相当于每增加一种按钮，就增加了几行的 css 代码，实际上改变的只有 width ，height ，font-size 这三个属性。

实际上可以根据大小进行代码复用。

.u-btn-yes{
    width:80px;
    height:36px;
    font-size:14px;
    color:#fff;
    border-radius:10px;
    background:#09f;
}
.u-btn-yes.u-btn-samll{
    width:60px;
    height:30px;
    font-size:12px;
}
.u-btn-yes.u-btn-big{
    width:100px;
    height:40px;
    font-size:16px;
}

页面调用

<button type="button" class=‘u-btn-yes u-btn-samll‘>确定</button>
<button type="button" class=‘u-btn-yes‘>确定</button>
<button type="button" class=‘u-btn-yes u-btn-big‘>确定</button>

页面上可能还有很多按钮类似的，但是不同颜色的（如下图），也可以灵活处理，这样还可以自由组合。这个也是社区上很多 UI 库所使用的方式。

.u-btn{
    width:80px;
    height:36px;
    font-size:14px;
    color:#fff;
    border-radius:10px;
    background:#09f;
}
.u-btn-samll{
    width:60px;
    height:30px;
    font-size:12px;
}
.u-btn-big{
    width:100px;
    height:40px;
    font-size:16px;
}
.u-btn-red{
    background:#f33;
}
.u-btn-yellow{
    background:#f90;
}

html

<button type="button" class=‘u-btn u-btn-samll‘>确定</button>
<button type="button" class=‘u-btn u-btn-red‘>确定</button>
<button type="button" class=‘u-btn u-btn-big u-btn-yellow‘>确定</button>

对于这些按钮，不建议设置 margin ，positon 等样式，因为不同的按钮在不同的地方，上面这几个属性基本不会一样。

3.JavaScript

关于提高代码复用性的好处，在上面 HTML+CSS的实例里面并没有很明显的优势，但在 JS 里面提高代码的复用性优势就比较明显了，下面简单列举几个例子。

3-1.封装常用函数

在上家公司的项目里面有这样代码，目的也很明显，就是用户填写表单的时候，还没有填写完整就提交，前端这里就需要给一个简单的提示。

//当信息没填写完整的时候弹出提示
layer.alert(‘请检查信息是否填写完整‘,{
    title:‘提示‘,
    icon:2
})

基于 layer 这个开源库，代码看得特别的简单。但是随着项目的开发，用户填写表单的地方有多个，那么上面的代码就会被复制到多个地方，这样难免会有有点多余。

另外，这样做最大的一个问题就是：如果上面的代码在项目上有20个地方在用，有一天需求变了，title 这个属性值要从‘提示’变成‘警告’。那就麻烦了，要找20个地方，即使编辑器有全局替换的功能，这样的改动出问题的概率也比较大。面对这样的情况。之前处理的方法是对这个弹窗进行简单粗暴的封装，方便复用。

function openTips(){
    //当信息没填写完整的时候弹出提示
    layer.alert(‘请检查信息是否填写完整‘,{
        title:‘提示‘,
        icon:2
    });
}

在需要的地方，需要的时候进行调用就好，这样可以写少很多代码！修改起来，也只需要修改 openTips 这一个地方就完事了。

openTips();

3-2.使用策略模式代替 switch

下面再看一个实例。借用下之前群友的发的代码。

模拟数据

let listWarnConf = [
    {
        warnType: 1,
        warnCondition: 220,
    },
    {
        warnType: 2,
        warnCondition: 36,
    },
    {
        warnType: 3,
        warnCondition: 45,
    },
    {
        warnType: 4,
        warnCondition: 110,
    },
    {
        warnType: 5,
        warnCondition: 380,
    }
]

业务逻辑代码

listWarnConf.forEach(item => {
    switch(item.warnType) {
        case 1:
            item.warnTypeText = ‘超压‘;
            item.warnConditionText = `电压高于${item.warnCondition}V`
            break;
        case 2:
            item.warnTypeText = ‘欠压‘;
            item.warnConditionText = `电压低于${item.warnCondition}V`
            break
        case 3:
            item.warnTypeText = ‘超载‘;
            item.warnConditionText = `电流高于${item.warnCondition}A`
            break
        case 4:
            item.warnTypeText = ‘电压不平衡‘;
            item.warnConditionText = `电压不平衡高于${item.warnCondition}%`
            break
        case 5:
            item.warnTypeText = ‘电流不平衡‘;
            item.warnConditionText = `电流不平衡${item.warnCondition}%`
            break
    }
})

这样看着结果是没问题的，但是看着那么多 case 执行的都是赋值操作。而且最大的问题和上面一样，如果多个地方使用，需求变了，那么还是要修改这么多的地方，下面优化下，让代码的复用性提高下。

//设置配置数据
let warnConfig={
    1:{
        warnTypeText:‘超压‘,
        warnConditionText:‘电压高于replaceTextV‘
    },
    2:{
        warnTypeText:‘欠压‘,
        warnConditionText:‘电压低于replaceTextV‘
    },
    3:{
        warnTypeText:‘超载‘,
        warnConditionText:‘电流高于replaceTextV‘
    },
    4:{
        warnTypeText:‘电压不平衡‘,
        warnConditionText:‘电压不平衡高于replaceText%‘
    },
    5:{
        warnTypeText:‘电流不平衡‘,
        warnConditionText:‘电流不平衡高于replaceText%‘
    }
}
//业务逻辑--根据配置数据设置warnTypeText和warnConditionText
listWarnConf.forEach(item => {
    item.warnTypeText=warnConfig[item.warnType].warnTypeText;
    item.warnConditionText=warnConfig[item.warnType].warnConditionText.replace(‘replaceText‘,item.warnCondition);
})

这样改代码量没减少，可读性比 switch 差，但能读懂。但是这样做就是重复的代码少了，配置数据和业务逻辑分离了，如果以后要修改配置数据或者业务逻辑，就修改其中一项即可，互相不影响。把配置数据抽出来公用，那么在需要修改的时候，直接修改就好。

关于提高代码的复用性，或者说减少重复的代码，个人觉可以往以下目标努力--当需求发生改变，需要修改代码的时候，同样的代码不要修改两次。

3-3.保持函数单一职责，灵活组合

保持函数的单一职责，保证一个函数只执行一个动作，每个动作互不影响，可以自由组合，就可以提高代码的复用性。

比如下面的代码，从服务端请求回来的订单数据如下，需要进行以下处理
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 _status={
    0:‘进行中‘,
    1:‘已完成‘,
    2:‘订单异常‘
}
orderList.forEach(item=>{
    //设置状态
    item.status=item.status.toString()?_status[item.status]:‘‘;
    //设置时间
    item.startTime=item.startTime.toString()?new Date(item.startTime).toLocaleDateString().replace(/\//g,‘-‘):‘‘;
    //设置--
    for(let key in item){
        if(item[key]===‘‘){
            item[key]=‘--‘;
        }
    }
})

运行结果也正常，但是这样写代码重复性会很多，比如下面，另一组重服务端请求回来的用户数据，用户数据没有 status，startTime，两个字段，而且需要根据 type 对应显示用户的身份（0-普通用户，1-vip，2-超级vip）。

let userList=[
    {
        id:1,
        name:‘守候‘,
        type:0
    },
    {
        id:2,
        name:‘浪迹天涯‘,
        type:1
    },
    {
        id:3,
        name:‘曾经‘,
        type:2
    }
]

出现这样的需求，之前写的代码无法重用，只能复制过来，再修改下。

let _type={
    0:‘普通用户‘,
    1:‘vip‘,
    2:‘超级vip‘
}
userList.forEach(item=>{
    //设置type
    item.type=item.type.toString()?_type[item.type]:‘‘;
    //设置--
    for(let key in item){
        if(item[key]===‘‘){
            item[key]=‘--‘;
        }
    }
})

结果正常，想必大家已经发现问题了，代码有点多余。下面就使用单一职责的原则改造下操作函数，设置 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);

事情到这里了，相信大家发现一个很严重的问题就是循环的次数增加了。没优化之前，只需要循环一次，就可以把设置状态，设置时间，设置--这些步骤都完成，但是现在 setStatus().setStartTime().setInfo() 这里的代码，每执行一个函数，都遍历了一次数组，这个就得优化下。处理的方式就是在每一个函数里面，只记录要处理什么，但是不进行处理，等到执行到 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);
    }
})();

这样改，之前的调用方式不需要改变，然后结果也是正确的

可能大家会觉得很简单一个需求，却搞得这么复杂。如果这样想是正确的，因为这个的确搞复杂了，可读性也差了，但想到项目遇到的处理数据不止这一些，还有比如金额的格式显示，其它数据的各种状态码解析显示，银行卡号每隔4位分割，电话号码的显示等等。所以就先封装一下，以后用的时候，直接使用。不知道算不算是先苦后甜？如果需求比较简单，可能真的没必要这么样封装。

4.小结

假期看代码，提高代码复用性的总结，差不多就是这些了，当然还有一些实例，但是在之前已经写过了，和该文章提及的实例也是大同小异，就不再重复提及。提高代码的复用性是一个很大的话题，如果大家有什么好的建议，实例，欢迎分享。

-------------------------华丽的分割线--------------------

想了解更多，和我交流，内推职位，请添加我微信。或者关注我的微信公众号：守候书阁

原文地址：https://www.cnblogs.com/qianduanwriter/p/11832127.html

时间： 2024-11-07 00:08:28

[探索]在开发中尽量提高代码的复用性的相关文章

完整java开发中JDBC连接数据库代码和步骤

完整java开发中JDBC连接数据库代码和步骤 JDBC连接数据库 •创建一个以JDBC连接数据库的程序,包含7个步骤: 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过java.lang.Class类的静态方法forName(String  className)实现. 例如: try{ //加载MySql的驱动类 Class.forName("com.mysql.jdbc.Driver") ; }catch(Class

WebApp 开发中常用的代码片段

其实这里面的多数都是 iOS 上面的代码.其他平台的就没有去验证了. HTML, 从HTML文档的开始到结束排列: <meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> 让内容的宽度自适应为设备的宽度, 在做Mobile Web时必须加的一条 <meta name=”format-detection” content=”telephone=no”]]> 禁用手机号码链接(for iPhone)

Android开发中尽量避免使用jpg图片

由于jpg容易失真,所以在Android开发中尽量避免使用.jpg图片,而应该使用.png图片,它采用了从LZ77派生的无损数据压缩算法. 其实关于这点,Google已经暗示我们了: 发现了没有,在res下这些icon用的都是png格式.就是说Google推荐使用的是png格式的图片. 写到这,想起个小事,童鞋问:在命名一个Activity对应的布局文件的时候,怎么样算规范一些. 其实我们在新建一个Activity的时候,也可以在看到一些端倪: 如果你建立一个MainActivity那么默认的它

Java学习资料-Java开发中JDBC连接数据库代码和步骤

完整java开发中JDBC连接数据库代码和步骤:http://www.cnblogs.com/hongten/archive/2011/03/29/1998311.html

Unity3d 基本设计开发 原则（提高代码可读性）

参考:http://blog.csdn.net/qq_34134078/article/details/51780356 1.单一原则 即:明确类的定义.通俗来讲,让他们只做一件事,而不是多件事. 提高类的可读性,更加好维护,降低耦合度.当然,方法,变量亦是如此. 2.里氏替换原则 a.子类可以实现父类的抽象方法,但不能覆盖父 类的非抽象方法. b.子类可以增加自己特有的方法. 不遵循的后果:写代码的问题几率大大增大. 3.依赖倒置原则 高层模块不应依赖底层模块,二者应该都依赖抽象.细节依赖抽象

Java开发中JDBC连接数据库代码的七个步骤

JDBC(Java Data Base Connectivity)是一种用于执行SQL语句的Java API可以为多种关系数据库提供统一访问它由一组用Java语言编写的类和接口组成. JDBC对Java程序员而言是API对实现与数据库连接的服务提供商而言是接口模型.作为APIJDBC为程序开发提供了标准的接口. JDBC连接数据库 创建一个以JDBC连接数据库的程序包含七个步骤 加载JDBC驱动程序 在连接数据库之前首先要加载想要连接的数据库的驱动到JVMJava虚拟机这通过java.lang.

【转】Java开发中JDBC连接数据库代码和步骤总结

(转自:http://www.cnblogs.com/hongten/archive/2011/03/29/1998311.html) JDBC连接数据库 创建一个以JDBC连接数据库的程序,包含7个步骤: 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机),这通过java.lang.Class类的静态方法forName(String className)实现. 例如: try{ //加载MySql的驱动类 Class.forName("co

Java开发中JDBC连接数据库代码和步骤

JDBC连接数据库:创建一个以JDBC连接数据库的程序,包含7个步骤: 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机),这通过java.lang.Class类的静态方法forName(String  className)实现. 例如: try{ //加载MySql的驱动类 Class.forName("com.mysql.jdbc.Driver"); }catch(ClassNotFoundException e){ Syste

javascript中提高代码的封装性

我出的面试题中,有一条是问如何避免页面引用JS,出现函数.变量重复.冲突的. 从大的方面讲,应该引入javascript的模块化开发,符合AMD规范之类: 从小的方面说,大概就是限定变量和函数的作用域了,这也涉及到一点大家如雷贯耳的闭包概念. 众所周知,javascript没有类,只有函数.其实它的函数也跟类差不多了,函数里面可以定义函数.而对于.net来说,直到近期出现的C#7,才支持这一点. 所以,我们可以将函数和变量,都定义在一个函数里面,这样即与外部隔绝矣: <html> <he