JS中面对对象的程序设计

在JS中，我们常说的面向对象，大多数情况下 指的就是原型链模式的编程，面向对象的编程方式 可扩展性 特别强，结构的可扩展性:只要是在类上实现个某个功能，则所有的实例都会具备这个功能。如果我们写好一个方法了 我们可以再不改变原来代码的情况下，给其增加新的功能。只需要保证在之前的代码中预留的接口与现在写的一致就ok。其实接口这个东西我觉得在JS 中就是一种标识，如下面的代码

function on(ele, type, fn) {
    if (/^self/.test(type)) {
        if (!ele[type]) {
            ele[type] = [];
        }
        var a = ele[type];
        for (var i = 0; i < a.length; i++) {
            if (a[i] == fn)return;
        }
        a.push(fn);
        return;
    }
    if (!ele["aEvent" + type]) {
        ele["aEvent" + type] = [];
        if (ele.addEventListener) {
            ele.addEventListener(type, run, false);
        } else {
            ele.attachEvent("on" + type, function () {
                run.call(ele);
            })
        }
    }
    var a = ele["aEvent" + type];
    for (var i = 0; i < a.length; i++) {
        if (a[i] == fn)return;
    }
    a.push(fn);
    return;

}

只要我们 保证我们的自定义事件的开头为self就会进行自定义事件的绑定，我觉得 在这里就可以称这个为接口
在面对对象编程的过程中我们一定要保证职责的单一性，一个方法完成一个功能。
面对对象，是个很抽象的概念。按我的大白话说就是，一个对象好意一个事物（比如人）我们写好了一个人，任何这个人本来有什么（嘴，脸，手，脚什么的 ），我们都给添加进去，那么我们创建第二个人的时候，也有相同的属性。而且每一个人呢，又有不同的特色 ，我们再给每一个人添加不同的特色，而且跟另外一个不干扰，而且是可以不断扩展的，只要保证我们是在这个人身上写的，那么这个人就拥有，别人就没有，也就是说这个人预留的学习接口，跟后天学习得到的东西的接口保证一直。这种编程的方式就是面向对象的编程（感觉还是说的很乱–！）。
下面我们在来看一段 用面对对象思想所写的拖拽

function EventEmitter() {}
EventEmitter.prototype.on = function (type, fn) {
    if (!this["emitter" + type]) {
        this["emitter" + type] = [];
    }
    var a = this["emitter" + type];
    for (var i = 0; i < a.length; i++) {
        if (a[i] == fn)return;
    }
    a.push(fn);
};
EventEmitter.prototype.run = function (type,e) {
    var a = this["emitter" + type];
    if(a&& a.length){
        for(var i=0;i< a.length;){
            if(typeof a[i]=="function"){
                a[i].call(this,e);
                i++;
            }else{
                a.splice(i,1)
            }
        }
    }
};
EventEmitter.prototype.off = function (type,fn) {
    var a = this["emitter" + type];
    if(a&& a.length){
        for(var i=0;i< a.length;){
            if(a[i]==fn){
                a[i]=null;return;
            }
        }
    }
};
//拖拽库
function Drag(ele){
    this.ele=ele;
    this.x=null;
    this.y=null;
    this.mx=null;
    this.my=null;
    this.DOWN=changeThis(this,this.down)
    this.MOVE=changeThis(this,this.move);
    this.UP=changeThis(this,this.up);
    on(this.ele,"mousedown",this.DOWN)
    //这个on方法就是上面的那个代码
}
Drag.prototype=new EventEmitter();
Drag.prototype.down=function(e){
    this.x=this.ele.offsetLeft;
    this.y=this.ele.offsetTop;
    this.mx= e.pageX;
    this.my= e.pageY;
    if(this.setCapture){
        this.setCapture();
        on(this,"mousemove",this.MOVE);
        on(this,"mouseup",this.UP);
    }else{
        on(document,"mousemove",this.MOVE);
        on(document,"mouseup",this.UP);
    }
    e.preventDefault();//阻止事件 默认行为
    this.run("dragStart",e)
};
Drag.prototype.move=function(e){
    this.ele.style.left=this.x+ e.pageX-this.mx+"px";
    this.ele.style.top=this.y+ e.pageY-this.my+"px";
    this.run("dragging",e)
};
Drag.prototype.up=function(e){
    if(this.ele.releaseCapture){
        this.ele.releaseCapture();
        off(this,"mousemove",this.MOVE)
        off(this,"mouseup",this.UP);
    }else{
        off(document,"mousemove",this.MOVE)
        off(document,"mouseup",this.UP);
    }
    this.run("dragEnd",e)
};

这样 只要我们 var obj= new Drag(ele);那么那个ele 就是可以拖拽的，而且我们要给这个ele添加什们新的功能 只需要这样就OK了

Drag.prototype.addFunction=function(){
//这里面第二个参数均为方法，即我们添加的功能
        this.on("dragStart",addBorder);
        this.on("dragStart",increaseZindex);
        this.on("dragEnd",removeBorder)
        this.on("dragEnd",goBack);
        this.on("dragging",impact);
        this.on("dragEnd",changePosition)
    };
    zIndex=1;
    var oLis=document.getElementsByTagName("li");
    for(var i=oLis.length-1;i>=0;i--){
        var oLi=oLis[i];
        var obj=new Drag(oLi);
        oLi.style.left=(oLi.l=oLi.offsetLeft)+"px";
        oLi.style.top=(oLi.t=oLi.offsetTop)+"px";
        oLi.style.margin=0;
        oLi.style.position="absolute";
        obj.addFunction();
    }

这样我们就在不改变原有代码的情况下 ，添加了很多新的方法，这种编程的思想就是面对对象的思想
不知道大家有木有理解–！