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 에 게 새로운 기능 을 추가 하려 면 이렇게 하면 됩 니 다.

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();
    }

이렇게 해서 우 리 는 기 존의 코드 를 바 꾸 지 않 고 새로운 방법 을 많이 추 가 했 습 니 다. 이런 프로 그래 밍 사상 은 대상 의 사상 에 직면 하여 모두 가 이해 할 수 있 는 지 모 르 는 것 입 니 다 –!