使用require.js加载spin.js

Question

我最近开始了一个JavaScript项目，现在正在将其迁移到require.js。到目前为止，除了spin.js库之外，一切正常。当我尝试访问与任何spin.js相关的内容时，我会收到以下错误消息：

未捕获的引用错误：未定义Spinner

我的requirejs.config如下所示：

requirejs.config({

    baseUrl: 'js',

        paths: {
            'jquery': 'lib/jquery',
            'spin': 'lib/spin',
    },

    shim: {
        'jquery' : {
            deps: [],
        },

        'spin' : {
            deps: [],
            exports: 'Spinner'
        },
    }
});  

一个示例模块看起来像这样：

require(['spin'], 
    function(Spinner)
    {   
        new Spinner();
    }
);

我正在使用shim配置，因为我有其他依赖模块。虽然一切似乎都加载正常。但我错过了什么？

编辑：

就像Alex指出的那样，我的库包含方式是错误的。对于每个在理解backbone.js和require.js方面遇到麻烦的人，我建议阅读这本书，特别是关于模块化开发的章节。

- user1170898

Answer 1

旋转库不应该在您的配置文件中进行调整。来自spin.js源代码的说明:

  if (typeof define == 'function' && define.amd)
    define(function() { return Spinner })
  else
    window.Spinner = Spinner

这里已经将其定义为一个模块，window.Spinner不是作为一个window对象创建的（这就是为什么不应该被shimmed）

- Alex Ehrnschwender

---

这意味着只需在路径属性中指定spin.js并保留对它的模块依赖引用就足够了，是吗（即在shim属性中删除'spin'部分）？因为我也尝试过这样做，但它也不起作用。 - user1170898

需要在你的应用程序中进行定义。尝试使用以下代码：define(['spin'], function(Spinner){ var mySpinner = new Spinner().spin(); } ); - Alex Ehrnschwender

@Jazzturtle 要将 mySpinner 插入页面中，您需要添加类似以下的代码：var target = document.getElementById('foo'); target.appendChild(mySpinner.el); - Alex Ehrnschwender

谢谢，Alex。那非常有帮助。我还有一个小问题（如果这应该是一个单独的主题，请告诉我）。我也在尝试使用jquery.spin插件，但它仍然无法正常工作。将'spin'和'jquery.spin'添加到模块的依赖项中是否足以启用对该插件的支持？正如您所看到的，我仍在努力理解导入库的范围。您能否推荐有关此主题的进一步资源？不幸的是，requirejs文档留下了一些空白。 - user1170898

当然。我认为你所指的jquery spin插件不符合AMD规范（它没有定义和返回自身），因此您需要使用依赖项jquery和spin.js进行shim，并为刚刚shimmed的库导出一个名称。如果您想在整个代码库中使用它，请使用define（）创建这些库的模块并返回一个包含两者的对象 - 然后通过require（）在其他地方使用该组合模块。异步依赖关系有点令人困惑，需要一些实践才能掌握。除了试错之外，您还可以查看文档、源代码和本网站。 - Alex Ehrnschwender

Answer 2

我曾经遇到过类似的情况。我没有添加shim，但在Backbone之后忘记将Spinner添加到函数中，导致它未定义。

define([
  'jquery',
  'underscore',
  'backbone',
  'spin'
],

function($, _, Backbone, Spinner) {
  var SpinnerView = Backbone.View.extend({

    initialize: function() {

      this.loadingAnimation();
    },

- Mr Brimm