Question

我一直在编辑一些jQuery，似乎只是将IF语句添加到函数中。函数的作用或if语句的作用并不重要。我只是想知道是否有更好/更清晰的方式来编写以下内容：

scrollToTop: function() {
    var offset = 160;
    var duration = 500;
    jQuery(window).scroll(function() {
      if (jQuery(this).scrollTop() > offset) {
        jQuery('#top-link-block').fadeIn(duration);
      } else {
        jQuery('#top-link-block').fadeOut(duration);
      }
      if (jQuery('#top-link-block').offset().top + jQuery('#top-link-block').height() >= jQuery('#footer-wrapper').offset().top - 10)
        jQuery('#top-link-block').css('position', 'absolute');
      if (jQuery(document).scrollTop() + window.innerHeight < jQuery('#footer-wrapper').offset().top)
        jQuery('#top-link-block').css('position', 'fixed');
      if (jQuery('#fixed-toolbar-menu')[0]) {
        jQuery('#top-link-block').css({
          bottom: 150
        });
      }
    });

Answer 1

好吧，对于一个不断查询相同DOM对象的人来说，不仅重复，而且代价高昂。您应始终使用变量捕获查询结果。单独执行此操作将清理代码：

 var $tlb = jQuery('#top-link-block');

注意：我建议用J加前缀JQuery结果变量，以提醒你它是一个JQuery包装器对象而不是传统的DOM对象。

现在，你可以一遍又一遍地使用这个变量：

 if ($tlb.offset...)...

此外，您正在使用此值：

 jQuery('#footer-wrapper').offset().top

不止一次，所以我也将该值保存在变量中：

 var $footWrapOffsetTop = jQuery('#footer-wrapper').offset().top;

然后您可以在需要的地方使用它，而无需查询对象并重复提取offset.top值。

另外，这个：

 jQuery(window)

是浪费的，因为您没有捕获查询的结果并且只使用查询，因此您可以将事件处理程序附加到窗口。使用JQuery获取对全局窗口对象的引用只不过对始终可用的对象执行查找。只需使用：

 window.addEventListener("scroll", function(){...});

查询窗口的唯一好处是利用JQuery的包装集功能，但你不是在这里做的。

这里是已清理的版本（使用最佳做法）：

    scrollToTop: function () {

      var offset = 160;
      var duration = 500;

      // Result is JQuery wrapped-set object:
      var $tlb = jQuery('#top-link-block');

      // Result is top value:
      var footWrapOffsetTop = $('#footer-wrapper').offset().top;

      window.addEventListener('scroll', (function() {

        // Don't take advantage of optional curly braces with blocks
        // of only one statement. It can lead to bugs.
        if (window.scrollTop() > offset){
            $tlb.fadeIn(duration) : $tlb.fadeOut(duration);
        }

        if ($tlb.offset().top + $tlb.height() >= footWrapOffsetTop - 10) {
            $tlb.css('position', 'absolute');
        }

        if ($(document).scrollTop() + window.innerHeight < footWrapOffsetTop){
            $tlb.css('position', 'fixed');
        }

        if ($('#fixed-toolbar-menu')[0]){
            $tlb.css({ bottom: 150 });
        }
      });

编写jQuery函数的更简洁/更好的方法

1 个答案: