は、これは私が理解しようとしているイムを使用しているプラ​​グインからのラインがあるのjQuery

Question

でフェードインメソッドを呼び出しているかを理解しないでくださいcodeはimg dom要素であり、それを隠し、次にこのimgオブジェクトのsrc属性をhtml5データ属性に設定します。しかし、今はそのjQueryオブジェクトのプロパティにアクセスする.attr（これは "fadeIn"ですが、私は理解しません。jqueryオブジェクトにはjqueryオブジェクトにエフェクトプロパティ関数が組み込まれていますか？これはどのようにして.fadeIn（900）を呼び出すことに変換されますか？jqueryのウェブサイトのどこにでも書かれていますが、誰にも分かりません。ミカtuupolaの遅延ロードのjQueryプラグインからです：

(function($, window, document, undefined) { 
var $window = $jq191(window); 

$jq191.fn.lazyload = function(options) { 
    var elements = this; 
    var $container; 
    var settings = { 
     threshold  : 0, 
     failure_limit : 0, 
     event   : "scroll", 
     effect   : "show", 
     container  : window, 
     data_attribute : "original", 
     skip_invisible : true, 
     appear   : null, 
     load   : null 
    }; 

    function update() { 
     var counter = 0; 

     elements.each(function() { 
      var $this = $jq191(this); 
      if (settings.skip_invisible && !$this.is(":visible")) { 
       return; 
      } 
      if ($jq191.abovethetop(this, settings) || 
       $jq191.leftofbegin(this, settings)) { 
        /* Nothing. */ 
      } else if (!$jq191.belowthefold(this, settings) && 
       !$jq191.rightoffold(this, settings)) { 
        $this.trigger("appear"); 
        /* if we found an image we'll load, reset the counter */ 
        counter = 0; 
      } else { 
       if (++counter > settings.failure_limit) { 
        return false; 
       } 
      } 
     }); 

    } 

    if(options) { 
     /* Maintain BC for a couple of versions. */ 
     if (undefined !== options.failurelimit) { 
      options.failure_limit = options.failurelimit; 
      delete options.failurelimit; 
     } 
     if (undefined !== options.effectspeed) { 
      options.effect_speed = options.effectspeed; 
      delete options.effectspeed; 
     } 

     $jq191.extend(settings, options); 
    } 

    /* Cache container as jQuery as object. */ 
    $container = (settings.container === undefined || 
        settings.container === window) ? $window : $jq191(settings.container); 

    /* Fire one scroll event per scroll. Not one scroll event per image. */ 
    if (0 === settings.event.indexOf("scroll")) { 
     $container.bind(settings.event, function(event) { 
      return update(); 
     }); 
    } 

    this.each(function() { 
     var self = this; 
     var $self = $jq191(self); 

     self.loaded = false; 

     /* When appear is triggered load original image. */ 
     $self.one("appear", function() { 
      if (!this.loaded) { 
       if (settings.appear) { 
        var elements_left = elements.length; 
        settings.appear.call(self, elements_left, settings); 
       } 
       $jq191("<img />") 
        .bind("load", function() { 
         $self 
          .hide() 
          .attr("src", $self.data(settings.data_attribute)) 
          [settings.effect](settings.effect_speed); 
         self.loaded = true; 

         /* Remove image from array so it is not looped next time. */ 
         var temp = $jq191.grep(elements, function(element) { 
          return !element.loaded; 
         }); 
         elements = $jq191(temp); 

         if (settings.load) { 
          var elements_left = elements.length; 
          settings.load.call(self, elements_left, settings); 
         } 
        }) 
        .attr("src", $self.data(settings.data_attribute)); 
      } 
     }); 

     /* When wanted event is triggered load original image */ 
     /* by triggering appear.        */ 
     if (0 !== settings.event.indexOf("scroll")) { 
      $self.bind(settings.event, function(event) { 
       if (!self.loaded) { 
        $self.trigger("appear"); 
       } 
      }); 
     } 
    }); 

    /* Check if something appears when window is resized. */ 
    $window.bind("resize", function(event) { 
     update(); 
    }); 

    /* With IOS5 force loading images when navigating with back button. */ 
    /* Non optimal workaround. */ 
    if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) { 
     $window.bind("pageshow", function(event) { 
      if (event.originalEvent.persisted) { 
       elements.each(function() { 
        $jq191(this).trigger("appear"); 
       }); 
      } 
     }); 
    } 

    /* Force initial check if images should appear. */ 
    $jq191(window).load(function() { 
     update(); 
    }); 

    return this; 
}; 

/* Convenience methods in jQuery namespace.   */ 
/* Use as $jq191.belowthefold(element, {threshold : 100, container : window}) */ 

$jq191.belowthefold = function(element, settings) { 
    var fold; 

    if (settings.container === undefined || settings.container === window) { 
     fold = $window.height() + $window.scrollTop(); 
    } else { 
     fold = $jq191(settings.container).offset().top + $jq191(settings.container).height(); 
    } 

    return fold <= $jq191(element).offset().top - settings.threshold; 
}; 

$jq191.rightoffold = function(element, settings) { 
    var fold; 

    if (settings.container === undefined || settings.container === window) { 
     fold = $window.width() + $window.scrollLeft(); 
    } else { 
     fold = $jq191(settings.container).offset().left + $jq191(settings.container).width(); 
    } 

    return fold <= $jq191(element).offset().left - settings.threshold; 
}; 

$jq191.abovethetop = function(element, settings) { 
    var fold; 

    if (settings.container === undefined || settings.container === window) { 
     fold = $window.scrollTop(); 
    } else { 
     fold = $jq191(settings.container).offset().top; 
    } 

    return fold >= $jq191(element).offset().top + settings.threshold + $jq191(element).height(); 
}; 

$jq191.leftofbegin = function(element, settings) { 
    var fold; 

    if (settings.container === undefined || settings.container === window) { 
     fold = $window.scrollLeft(); 
    } else { 
     fold = $jq191(settings.container).offset().left; 
    } 

    return fold >= $jq191(element).offset().left + settings.threshold + $jq191(element).width(); 
}; 

$jq191.inviewport = function(element, settings) { 
    return !$jq191.rightoffold(element, settings) && !$jq191.leftofbegin(element, settings) && 
      !$jq191.belowthefold(element, settings) && !$jq191.abovethetop(element, settings); 
}; 

/* Custom selectors for your convenience. */ 
/* Use as $jq191("img:below-the-fold").something() or */ 
/* $jq191("img").filter(":below-the-fold").something() which is faster */ 

$jq191.extend($jq191.expr[':'], { 
    "below-the-fold" : function(a) { return $jq191.belowthefold(a, {threshold : 0}); }, 
    "above-the-top" : function(a) { return !$jq191.belowthefold(a, {threshold : 0}); }, 
    "right-of-screen": function(a) { return $jq191.rightoffold(a, {threshold : 0}); }, 
    "left-of-screen" : function(a) { return !$jq191.rightoffold(a, {threshold : 0}); }, 
    "in-viewport" : function(a) { return $jq191.inviewport(a, {threshold : 0}); }, 
    /* Maintain BC for couple of versions. */ 
    "above-the-fold" : function(a) { return !$jq191.belowthefold(a, {threshold : 0}); }, 
    "right-of-fold" : function(a) { return $jq191.rightoffold(a, {threshold : 0}); }, 
    "left-of-fold" : function(a) { return !$jq191.rightoffold(a, {threshold : 0}); } 
}); 

}）（$ jq191、ウィンドウ、文書）。

Answer 1

jQueryは単なるオブジェクトです。つまり、.という表記法で呼び出せるメソッドはすべて、[]という表記法で呼び出すことができます。エルゴは、2行は、機能的に同一である。

$("#foo").fadeIn(2000); 
$("#foo")['fadeIn'](2000); 

他のアイテム、及びsettings.effectsettings.effect_speedは、おそらくプラグインのオプションを運ぶオブジェクトリテラルを介してプラグインに供給されます。

var settings = { 
    effect: 'fadeIn', 
    effect_speed: 2000 
} 

Answer 2

これがこの理由です。

最初に、jQueryの.hide()メソッドとその.attr(name,value)メソッドは、連鎖を可能にするために、このようなjQueryメソッドの通常の方法でthisを返します。しかし、それはまた、我々は質問に影響を与えることなく、これらの呼び出しを削除することができます意味：

$self[settings.effect](settings.effect_speed); 

は今、それは簡単です。 settings.effectは文字列"fadeIn"です。

その後コードは同じです：JavaScriptで

$self["fadeIn"](settings.effect_speed); 

、object["methodName"]はobject.methodNameとまったく同じことを意味します。だから、コードは実際と同じである：

$self.fadeIn(settings.effect_speed); 

、それはfadeInメソッドを呼び出す理由です。