jquery 메서드를 자바 스크립트 클래스 메서드로

Question

자바 스크립트 클래스에 jquery 함수를 삽입 할 수 있습니까? 예를 들어 I는 다음 JS 클래스를 가지고

function FloatingImage() { 
    var delay, duration; 

    var moveRight = function($image) 
    { 

     $image.delay(delay).animate(
     { 
      left: $image.parent().width() - $image.width() 
     }, 
     { 
      duration: duration, 
      complete: function(){ moveLeft($image) } 
     }); 
    }, 
    moveLeft = function($image){ 
     $image.delay(delay).animate({ 
      left: 0 
     }, { 
      duration: duration, 
      complete: function(){ moveRight($image) } 
     }); 
    }; 

    this.constructor = function (delay, duration) { 

     this.delay = delay; 
     this.duration = duration; 
    }; 
} 

다음 지원 기능 : 다음

function rand(l,u) // lower bound and upper bound 
{ 
    return Math.floor((Math.random() * (u-l+1))+l); 
} 

, 그것은 호출 가정 배경 모두 2 개 이미지 2 명 div에 #imgleft 및 #imgright 거기 다음을 포함합니다 :

$(function(){ 
    var $imageL = $('#imgleft'), 
     $imageR = $('#imgright'); 

    var fi1 = new FloatingImage(); 
     fi1.constructor(rand(400,600), rand(1500,3000)); 
    var fi2 = new FloatingImage(); 
     fi2.constructor(rand(400,600), rand(1500,3000)); 

    fi1.moveRight($imageL); 
    fi2.moveLeft($imageR); 
}); 

Answer 1

FloatingImage 함수 자체가 생성자이므로 delay 및 duration 매개 변수를받는 것이어야합니다. 이 생성자에 의해 객체 인스턴스 빌드에서 메소드로 사용할 수 있어야 함수를 객체에 첨부해야합니다. 그렇지 않으면 생성자의 범위 밖에서 액세스 할 수 없습니다. 마지막으로 완전한 콜백에서 객체에 대한 메소드를 호출해야합니다.

function FloatingImage(delay, duration) { 
    var self = this; 
    this.moveRight = function($image) { 
    $image.delay(delay).animate({ 
     left: $image.parent().width() - $image.width() 
    },{ 
     duration: duration, 
     complete: function(){ self.moveLeft($image) } 
    }); 
    }, 
    this.moveLeft = function($image){ 
    $image.delay(delay).animate({ 
     left: 0 
    },{ 
     duration: duration, 
     complete: function(){ self.moveRight($image) } 
    }); 
    }; 
} 

그러나 이것은 매우 좋은 OO 패턴으로 보이지 않습니다. 더 나은 jQuery 방법은 jQuery 플러그인을 만드는 것입니다.

$.fn.floatingImage = function(options) { 
    var settings = $.extend({ 
    direction: 'left', 
    delay : 400, 
    duration : 400 
    }, options); 
    var self = this; 
    self.delay(settings.delay).animate({ 
    left: (settings.direction === 'left') ? 0 : (this.parent().width() - this.width()), 
    }, { 
    duration: settings.duration, 
    complete: function() { 
     self.floatingImage({ 
     direction: (settings.direction === 'left') ? 'right' : 'left', 
     delay: settings.delay, 
     duration: settings.duration 
     }); 
    } 
    }); 
    // Return the jQuery object to allow methods chaining. 
    return self; 
}  

$(function(){ 
    $('#imgleft').floatingImage({delay: rand(400,600), duration: rand(1500,3000)}); 
    $('#imgright').floatingImage({delay: rand(400,600), duration: rand(1500,3000), direction: 'right'}); 
}); 

Answer 2

예. jQuery는 JavaScript이므로 차이점이 없습니다.

하지만 "클래스"는 더 이상 휴대 할 수 없습니다. 이 클래스를 사용할 때 jQuery가로드되고 전달한 객체는 delay 및 animate을 사용했기 때문에 jQuery 객체라고 가정합니다.