Question

是否可以在javascript类中插入jquery函数？例如，我有以下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个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

YES。 jQuery IS JavaScript，没有区别。

但是你的“课堂”将不再适合。它假设当你使用那个“类”时，你加载了jQuery，你传递的对象是jQuery对象，因为你使用了delay和animate。

Answer 2

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-ish方法是构建一个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'});
});

jquery方法作为javascript的类方法

2 个答案: