带有JQuery的javascript模块导致未定义模块函数

我正在尝试创建一个名为

ScrollToAnchor

的模块，它有一个名为

goToTarget

的函数，我可以像

ScrollToAnchor.goToTarget（目标）一样调用该函数

但它说,

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=$（函数（）{
中删除
$
，那么
ScrollToAnchor
中的jQuery将不起作用

但是如果我将
$
留在那里，它会认为
ScrollToAnchor
是jQuery类型，而
ScrollToAnchor。goToTarget
不是一个函数。
将ScrollToAnchor转换为一个普通函数。此函数将在全局范围内：

window.ScrollToAnchorFactory = 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
    }
};

如果您想使用此代码创建commonJS模块，也可以使用module.export，而不是将其放入全局范围。这将允许您要求（）将其放入其他文件中（使用Browserify进行编译）

如果您决定只在全局范围内保留
ScrollToAnchorFactory
，则无论您需要在何处使用scrollToAnchor.goToTarget（在同一个文件或不同的文件中）

您需要将jQuery的DOM ready函数包装在这一部分中，以便
ScrollToAnchorFactory
不会在您的锚在DOM中完全成形之前尝试初始化。
the
$（function（）{…}）
是
$（document.ready（handler）
的缩写

因此，
$（function（）{…}）
的结果是一个jQuery结果集，其中包含
文档
as元素

您正在寻找活动授权：

$(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;
  }
});

这将确保
单击
事件将用于所有
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
是公共可用的。
谢谢。我如何调用
ScrollToAnchor.goToTarget（目标）
在另一个javascript文件中？是否存在某种导入语句？因为我得到了
bootstrap\u app.js:28未捕获的引用错误：ScrollToAnchor未定义
因为您将
ScrollToAnchor
放在jQuery DOM ready回调的范围内，所以它离开了全局范围。一个选项是替换
var ScrollToAnchor
与
window.ScrollToAnchor
。这会将ScrollToAnchor置于全局范围内，并使其在其他地方可用。但是，如果另一个JS文件在执行jQuery DOM ready函数之前尝试调用
ScrollToAnchor
，则可能会导致争用情况。我将更新对的答案帮助避免这种情况。
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
  }

}());