如何使用prototype来美化自己的代码？

刚学JS的时候我们定义函数的基本方式就是函数声明

function test()
{

}
//于是当函数多了就变成了
function test1(){}
function test2(){}

到了后面会有意地使用用函数表达式

var test=function(){

}

以上函数声明和函数表达式实际上写法差不多，只是我们使用函数声明的目的是函数声明提升，也就是我们通过声明定义的函数被提前执行，这样我们就能使用以下的情况,即使函数声明写在调用后面，也不会报错，而如果以函数表达式的方式写则会报错undefined is not a function

a();
function a(){}

再往后，开始使用JSON对象来管理函数,同时也减少了全局变量污染的可能性

test={
a:function(){},
b:function(){}
}
test.a()

但是JSON对象作为全局变量的时候，以我们面向对象的方式思考，它仅仅只能管控一个对象，如果强制性管理多个对象就会造成混乱。假设我们现在有两个组件A和B，现在要控制A往左，B向右，

而JSON全局对象有一个函数来接收要处理的组件ID和移动方向。

<!--伪代码-->
      <div id="left">

        </div>
        <div id="right">

        </div>
        <script type="text/javascript">
            var test={
                getObj:function(el,direction){
                    setInterval(function(){
                        $(el).append(direction);

                    },2000);
                }


            };
            test.getObj('#left','left');
            test.getObj('#right','right');
        //虽然left和right两个组件能分别输出left和right，但是如果我们以面向对象的方式，分别记录A和B的两个数据呢？比如执行次数，我们在test上增加一个count
        test={
count:0,
getObj:function(el,direction){
                    setInterval(function(){
                        $(el).append(direction);

                    },2000);
                }

}

        </script>
        //此时我们还能将执行次数放进这个计数器吗？答案是否定的，因为test是一个公用的对象，我们只能通过全局变量的方式分别存储。比如countA,countB

那么，为了更好的复用性和维护性，prototype是很好的一种方式，每个函数都有prototype属性，该属性返回对象类型原型的引用

还是以上面的test为例子

//将test作为一个类对象
test=function(){
this.count=0;


}
test.prototype={
init:function(){}
}
//注：我个人觉得prototype这个属性就像是面向对象中的继承，因为我们可以通过这个属性动态添加函数，而不像面向对象的语言，比如JAVA，创建了该类对象只能调用它自身的成员函数，如果要拓展的话，需要以继承的方式实现。太久没写JAVA了连定义都忘了，不知道这段话有没有讲错。

//当然我们也可以通过prototype来实现继承。
sub_test=function(){}

sub_test.prototype=test.prototype;
sub_test.init();
//此处sub_test继承了test中【prototype拓展的】函数及变量

还是以组件A和B来举例，此时我们就可以通过test这个类来创建两个对象

var A=new test();
var B=new test();
A.count=1;
B.count=2;
console.log(A.count+'/'+B.count);//这样就能通过A和B这两个对象来处理两个组件，包括之前提到了getObj这个方法

而现在我个人的疑问就是如何通过prototype来封装自己的代码，是每个组件写一个函数，然后该组件的所有DOM操作都写在里面，还是只写一个函数，只抽象出DOM操作函数，具体实现再处理。有如上疑问是因为看过一个人的代码，我所说的区别类似如下：

//我看别人的代码：
<div id='main'>
<button id='btn1'>btn1</button>
<button id='btn2'>btn2</button>

</div>
<script>
var main=function(el){
this.obj=$(el);


}
main.prototype={

init:function(){
//这里写完了对ID为'main'的所有内部DOM操作，比如btn1和btn2的点击事件，但是如此的话，创建的实例只能用于main组件


}
}

</script>

//自己的想法

var main=function(el)
{
this.obj=$(el);

}

main.prototype={
click:function(t,f){
//t是事件源，f是处理函数
$(this.obj).find(t).on('click', fun);
}

}
var a=new main('#main');
a.click('btn1',function(){
//具体事件处理

});

main这个类就可以复用，要拓展a的函数：a.xx=function(){}