开发者问题收集

myFunction 未定义

2015-05-27
362

在我的 scriptfile.js 中,我布局了一个简单的文本调整大小函数。该函数本身按预期工作。但是,当我尝试将 $(window).resize(fitheadliner()); 添加到我的脚本文件以在调整大小事件上触发 fitheadliner() 函数时,它收到“Uncaught ReferenceError:fitheadliner 未定义”错误。我已将调整大小函数移到脚本文件中,认为这可能是范围问题,但无济于事。以下是文件的内容:

( function( $ ) {

  $.fn.fitheadliner = function() {
    this.each(function() {
    var
      $headline = $(this),
      $parent = $headline.parent();


    var
      textW = $headline.width(),
      parentW = $parent.width(),
      ratio = parentW / textW;

    var
      originalSize = parseFloat($headline.css('font-size')),
      newSize = originalSize * (0.9 * ratio);

    $headline.css("font-size", newSize);

    });
  };
  $(window).resize(fitheadliner());

} )( jQuery );
2个回答

此处:

$.fn.fitheadliner = …

fitheadliner 被定义为 $.fn 的属性。

但此处:

$(window).resize(fitheadliner());

您正尝试将其作为变量访问(并调用它)。请考虑:

(function($) {

  function fitheadliner() {
    ...
  }

  // Assign a reference, don't call the function
  $(window).resize(fitheadliner);
}(jQuery));

但是,您还有另一个问题:

this.each(function() {

该函数以 window 作为 this 调用,而 window 没有 each 方法。我不明白您为什么没有看到其他错误(或错误行为)。也许应该用选择器替换 this

$(<selector>).each(...);
RobG
2015-05-27

这不完全是范围问题。更像是资格问题。

当执行此行时

$(window).resize(fitheadliner());

您说的是,运行 $(window) ,然后运行 ​​ fitheadliner() ,然后运行第一个调用的返回值的 .resize 方法,将第一个函数调用的返回值传递给它。

很容易认为您调用 fitheadliner() 的方式会将其绑定到 $ 对象,但事实并非如此。没有理由这样做。每个表达式都单独求值,然后适当链接。

因此,此表达式在范围中查找名为 fitheadliner 的符号,该符号必须是 function 类型。范围中没有具有该名称的符号。但是,有一个名为 $.fn.fitheadliner 的符号。

要解决此错误,您需要 完全限定 引用,例如

$(window).resize($.fn.fitheadliner());

但事实是,我也不认为这完全是您想要的。 .resize 接受处理程序函数。 fitheadliner 不返回函数,也不返回任何内容。它实际上做了一些工作。所以我认为您想要做的是将 引用 传递给 fitheadliner 以进行 resize

这很简单 - 去掉括号。

$(window).resize($.fn.fitheadliner);

现在,甚至更好,可能没有理由将 fitheadliner 附加到 jQuery 原型。试试这个。它可能更接近于您想要做的事情。

( function( $ ) {

  function fitheadliner() {
    this.each(function() {
    var
      $parent = $(this).parent(),
      $headline = $(this);

    var
      textW = $(this).width(),
      parentW = $parent.width(),
      ratio = parentW / textW;

    var
      originalSize = parseFloat($(this).css('font-size')),
      newSize = originalSize * (0.9 * ratio);

    $(this).css("font-size", newSize);

    });
  }
  $(window).resize(fitheadliner);

} )( jQuery );

这在名为 fitheadliner 的范围内定义了一个函数,然后将对它的引用传递给 resize

就我个人而言,我会更进一步,匿名内联该函数,因为它不需要重复使用。但对我来说,这只是形式/偏好的问题。语义上没有区别。

( function( $ ) {

  $(window).resize(function fitheadliner() {
    this.each(function() {
    var
      $parent = $(this).parent(),
      $headline = $(this);

    var
      textW = $(this).width(),
      parentW = $parent.width(),
      ratio = parentW / textW;

    var
      originalSize = parseFloat($(this).css('font-size')),
      newSize = originalSize * (0.9 * ratio);

    $(this).css("font-size", newSize);

    });
  });

} )( jQuery );
Brandon
2015-05-27