如何将重复不断的的代码进行简化

在我们做项目的的过程中我们通常会遇到需要写一些重复不断的代码，而且这些重复不断的代码对于我们后期的加工也并不怎么友好。

例如：

通常想要实现上图的效果，代码都需要写非常多相同的标签，而且这些标签的样式也基本是一样的。代码如下图所示：

接下来给大家写一种不需要在HTML写一个button标签的方法，

首先在HTML部分我需要写出一个我需要实现的效果标签，之所以要写这么一个标签是为了以这个标签作为样板通过JavaScript对这个标签进行复制，代码如下图所示，

CSS样式部分：

接下来也到了我们最重要的JavaScript部分，在JavaScript中首先我们需要一个post请求，通过控制器获取到数据库的数据，使用switch方法通过判断state的状态得出哪个标签是什么颜色的，最后再通过append方法将拼接好的button标签添加到HTML中去，最终标签的个数是与你数据库的个数相连的。具体代码如下图所示：

这是我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！