javascript - 带有JQuery的javascript模块导致模块功能未定义

我正在尝试制作一个名为ScrollToAnchor的模块，该模块具有一个名为goToTarget的函数，我可以像ScrollToAnchor.goToTarget(target);这样调用

但是它说


  ScrollToAnchor.goToTarget不是函数


我认为ScrollToAnchor是jQuery类型的，因为$的原因。这是代码：

var ScrollToAnchor = $(function() {
  var headerHeight = 70;

  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      if (goToTarget(this.hash))
        return false;
    }
  });

  /*$('input[data-target]').click(function() {
          if (gotoTarget($(this).data("target")))
          return false;
  })*/

  var goToTarget = function(targetName) {
    var target = $(targetName);
    target = target.length ? target : $('[name="' + targetName.slice(1) + '"]');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top - headerHeight
      }, 1000);

      return true;
    }
    return false;
  }

  return {
    goToTarget: goToTarget
  }
});

我究竟做错了什么？如果我从$中删除​​var ScrollToAnchor = $(function () {，则ScrollToAnchor中的jQuery不起作用。

但是，如果我离开$，那么它会认为ScrollToAnchor是jQuery类型，而ScrollToAnchor.goToTarget不是函数。

最佳答案

$(function() {...})是$( document ).ready( handler )的简写。

因此，$(function() {...})的结果是一个包含document作为元素的jQuery结果集。

您正在寻找事件委托：

$(document).on('click', 'a[href*="#"]:not([href="#"])', function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    if (goToTarget(this.hash))
      return false;
  }
});

这将确保将click事件用于所有a元素，无论何时将它们添加到DOM中，并使您可以轻松地在全局范围内使用goToTarget。您的最终代码将如下所示：

var ScrollToAnchor = (function() {
  var headerHeight = 70;

  // event handler with delegation
  $(document).on('click', 'a[href*="#"]:not([href="#"])', function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      if (goToTarget(this.hash))
        return false;
    }
  });

  function goToTarget(targetName) {
    var target = $(targetName);
    target = target.length ? target : $('[name="' + targetName.slice(1) + '"]');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top - headerHeight
      }, 1000);

      return true;
    }

    return false;
  }

  return {
    goToTarget: goToTarget
  }

}());

使用事件委托，无需将整个代码包装到$(function() {...})中，并且ScrollToAnchor是公开可用的。

关于javascript - 带有JQuery的javascript模块导致模块功能未定义，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38289962/