在写前端代码的过程中,经常会发现有很多功能的代码是重复的,比如说在网易的首页中,有好几个的选项卡,这些选项卡的功能其实是一样的,就是当鼠标点击或者划过去的时候,下面的内容显示会相应的显示对应的内容,区别在于选项卡的个数以及选项卡的文字内容。所以在写这部分代码的过程中,我们尽可能可以重用代码,不会导致过多的冗余代码。
重用代码:
1、尽量保证 HTML 代码结构一致,可以通过父级选取子元素;
2、把核心主程序实现,用函数包起来;
3、把每组里不同的值找出来,通过传参实现;
下面举一个简单的例子说明,比如说我们在统计商品价格的时候,我们只要知道商品的价格和商品的数量就可以直接计算出这个商品的总价格,那么针对不同的商品,计算方法其实都是一样的,这个时候我们就可以重用代码,而不必要写过多的代码去实现这个功能。如图所示: