[探索]在开发中尽量提高代码的复用性_守候i的专栏文章_微信文章

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

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

正文