抽象与可维护性和可拓展性的代码关系

在我还是学生时候写东西的时候，可能完成了某个功能就会兴奋不已，我还记得我去写第一个切换效果的时候，那时候的代码是这样的。

$('.button:eq('+0+')').on('click',function(){});
$('.button:eq('+1+')').on('click',function(){});
$('.button:eq('+2+')').on('click',function(){});
$('.button:eq('+3+')').on('click',function(){});

哦，可能还不是这样，那时候还是用js，不是用的是jq，但是表达的意思都差不多。代码一看，好整洁。如果我们用数据库的观念去看这样一件事，这就叫做冗余。但是这样的功能已经实现了啊。这时候就想，我要是有10条，100条这样的，我还不写死啊。然后我们会这样。

for(var i=0;i<4;i++){
$('.button:eq('+i+')').on('click',function(){});
}

这样一看，我靠，少了好多啊，此时有一万条，我也只用这个，只要改下里面的<号右边的数不就行了？是的，但是我们还是懒，懒到我连数字都不想换，于是呼，我们的代码又变成了这样。

for(var i=0;i<$('.button').length;i++){
$('.button:eq('+i+')').on('click',function(){});
}

此时我们想，终于大功告成了吧，再也不要修改什么了，不管多少条了。突然，我们发现又有一处功能需要用这样的切换效果，难道，我们还要写这样的两遍嘛？比如这样

for(var i=0;i<$('.button').length;i++){
$('.button:eq('+i+')').on('click',function(){});
}for(var j=0;j<$('.tbutton').length;j++){
$('.button:eq('+j+')').on('click',function(){});
}

我们会对重复一样的东西总感到厌恶，于是我们又会这样

var selectClick=["button","tbutton"];
for(var i=0;i<selectClick.length;i++){
(function(i){
$('.' + selectClick[i]).on('click',function(){
})})(i)
}

是的，此时我们已经开始会使用闭包来简化我们的操作了，但是，此时，我们还是在一个项目里面，刚好，有个同学说，哎，同学，把你写的借我用下呗。于是乎，我们又走向了插件的那条路。

那接下来我们谈谈抽象，什么是抽象？我觉得更像是一种模型。比方说，我们每个人都用我去指代自己，每个人说我的时候，我们都知道他说的是他，不是某个特定的人，就是本身。其实抽象本身都是我们用在继承这里的，但是在普通的问题解决方式的时候，我们也可以将这种思维展现出来。

$('.button').on('click',function(){
$('.type').removeClass('selected');
$(this).addClass('selected');
})

比方说这样一个例子，我们希望点击的时候清除其他的样式，但是自己的样式要添加。我们不用关系是点了谁，然后让谁的样式去添加，比如我们点击第一个，那么第一个样式显示，点击第二个，第二个样式显示，其实换一种思路就是，点谁谁显，就像人人都可以用我去指代自己。其实this的用法很强大。继承都靠他。。。。