Question

使用RequireJS，我打算只在某个页面加载一个模块，例如我的主页，就像这样（为了阅读，我将我的代码从coffeescript翻译成了javascript）：

require(["tmp/assets/scripts/modules/_image"], function(_image) {
  return $('ul li img')._image.basicImageHover();
});

和我的_image.js文件：

$.fn.basicImageHover = function() {
  $(this).on('hover', function() {
    $(this).parent().find('div.caption').slideUp('fast');
    return $(this).css('opacity', '.5');
  });
  return this;
};

我的项目结构是这样的（抱歉，我不知道如何绘制更好的图表）：

TMP /资产/脚本/模块/ _image.js

TMP /资产/脚本/前/ home.js

我的控制台中的

错误说在home.js _image未定义，我猜测通过将模块更改为返回函数而不是插件可能会有效，但我想知道可能是什么我当前的设置有误。谁能帮忙解释一下？感谢

Answer 1

您的代码存在一些问题。

首先，存在如何访问jQuery插件的问题。这些安装在jQuery对象上，因此您无法通过RequireJS获取它们。这段代码特别不符合您的想法：

require(["tmp/assets/scripts/modules/_image"], function(_image) {
  return $('ul li img')._image.basicImageHover();
});

将评估部分$('ul li img')._image.basicImageHover()以从_image返回的值中获取名为$('ul li img')的字段。这与 nothing 一起使用函数的_image参数的值来做任何事情。你需要的是：

require(["tmp/assets/scripts/modules/_image"], function() {
  $('ul li img').basicImageHover();
});

我已删除return，因为它在传递给require的回调中完全没用。（返回值是没有意义的.RequireJS会收到该值，但在此之后它无处可去。）不需要_image参数，因为您在代码中显示的jQuery插件会自动安装在{{1}的实例上}。

其次，您的jQuery文件应将_image.js称为符合AMD标准：

define

我删除了define(['jquery'], function ($) { $.fn.basicImageHover = function() { $(this).on('hover', function() { $(this).parent().find('div.caption').slideUp('fast'); return $(this).css('opacity', '.5'); }); }; });语句，因为它在这里没有用处。上面的代码要求您必须配置RequireJS以了解jQuery的位置并加载它。如果您在之前之前加载了，那么您可以将return设为define。

RequireJS加载模块错了吗？

1 个答案: