编写jQuery函数的更清洁/更好的方法[关闭]

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');

注意：我建议在您的 JQuery 结果变量前加上 $ 以提醒您它是 JQuery 包装器对象而不是传统的 DOM 对象。

现在，您可以反复使用这个变量：

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

另外，你正在使用这个值：

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

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

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

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

还有，这个：

 jQuery(window)

是浪费的，因为您没有捕获查询的结果，而只使用查询，以便您可以将事件处理程序附加到 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 });
        }
      });