RequireJS:模块名称__尚未加载上下文,但仅适用于SOME,而不是全部

时间:2014-01-29 01:36:27

标签: javascript requirejs amd js-amd

现在我知道这个问题已被问过一百万次了,但我仍然无法理解。

我在各种文件中都有大量的“定义”。大多数情况下,这是有效的,但我的一些模块“没有加载上下文”有时,甚至 - 尽管我把他们的名字放在“define”语句中

===========================

当前代码

index.js(针对StackOverflow简化)

require.config({
    baseUrl: '',
    paths: { 
    //TOOLS
        jquery: '../libraries/jquery-1.10.2.min',
        socketio:'socket.io/socket.io',
        jqueryLightBox:'../libraries/jquery.lightbox_me',
        jqueryMigrate:'../libraries/jquery-migrate-1.2.1',
        jqueryUI:'../libraries/jquery-ui-1.10.3.custom.min',
        spinner:'../libraries/jquery.spin',
        jQueryFormPlugin:'../libraries/jquery.form.min',
        jQueryCookiePlugin:'../libraries/jquery.cookie',
        json2:'../libraries/json2', 
        raphael:'../libraries/raphael-min', 
        raphaelPanZoom:'../libraries/raphael.pan-zoom.min',
        bootstrap: '../libraries/bootstrap.min',
        browserDetection: '../libraries/BrowserDetect',
        qtip: '../libraries/jquery.qtip.min',
        imagesloaded: '../libraries/imagesloaded.pkgd.min', 
        eventie: '../libraries/eventie',
        eventEmitter: '../libraries/EventEmitter.min',
        underscore: '../libraries/underscore-min',
        underscoreString: '../libraries/underscore.string.min',
        stacktrace: '../libraries/stacktrace',
        elapseMeMin: '../libraries/elapseMe.min',
        jqueryKeithWood: '../libraries/jquery.svg.min', 
        domReady: '../libraries/domReady',
    //PAGES: (Simplified for StackOverflow)
        TestView: '../javascripts/tests/TestView',
        TestModel: '../javascripts/tests/TestModel',
        TestController: '../javascripts/tests/TestController',
        TestPanelView: '../javascripts/tests/Test-StartPanelView',
        SocketLogic: '../javascripts/SocketLogic',
        Logger: '../javascripts/Logger',

    }, 
    shim: {
    'socketio': {
      exports: 'io'
                },
     'spinner': {
      exports: 'Spinner',
      deps: ['jquery']
                },
    'raphael':  {
     exports: 'Raphael',
      deps: ['jquery']
                },
    'raphaelPanZoom': {
      deps: ['raphael']
            },
    'bootstrap': {},
    'browserDetection':  {
      exports: 'BrowserDetect'
            },
    'underscore': {
      exports: '_'
                },
    'underscoreString': {
      deps: ['underscore'],
      exports: '_'
        },
     'stacktrace': {
      exports: 'printStackTrace'
        },
     'elapseMeMin': {
         exports: 'elapseMe',
         deps: ['jquery']
        }

    }
});

//////////////////
//1) Everything starts with this method. Will execute when the DOM is ready.
/////////////////

require(['domReady'], function (domReady) {
  domReady(function () {
    //This function is called once the DOM is ready.
    //It will be safe to query the DOM and manipulate
    //DOM nodes in this function.
    //Start Loading!
    require(['TestController'], function(TestController)
    {
        TestController.firstMethod();
    }); 
  });
});

TestController.js (简化为StackOverflow)

define(['TestModel', 'TestView', 'SocketLogic', 'Logger', 'TestPanelView'], 
function (TestModel, TestView, socketLogic, Logger, TestPanelView) 
{
 return {
    firstMethod: function()
    {
             TestModel.doSomething();
             TestView.doSomethingElse();
             socketLogic.andAnother();
             Logger.log("hi");
             TestPanelView.updateSomething();
             this.anotherMethod();
    },
    anotherMethod: function()
    {
             console.log("hello");
    }
    }
});

===========================

问题

但是,有一段时间,我会随机将其中一个随机 “不加载上下文”,尽管其余的都很好:< / p>

Uncaught Error: Module name "TestPanelView" has not been loaded yet for context: _
http://requirejs.org/docs/errors.html#notloaded 

===========================

当前修正

修复#1 - 使用require('');

而不是

TestPanelView.updateSomething();

我一直在做:

var testPanelView = require('TestPanelView');
testPanelView.updateSomething();

哪个有效,但是不应该已经加载到上下文,因为我把它放在标题中?为什么这个?它和其他所有人一样!

修复#2 - 使用require([''],function(){});

这也有效,但我只是一个一个地做这个,感觉不对!

而不是

TestPanelView.updateSomething();

有时我会这样做:

require(['TestPanelView'], function(testPanelView){
      testPanelView.updateSomething();
});

尝试失败#1

TestController.js (简化为StackOverflow)

define(['require', 'TestModel', 'TestView', 'SocketLogic', 'Logger', 'TestPanelView'], 
function (require) 
{
var TestModel = require('TestModel')
var TestView = require('TestView');
var SocketLogic = require('SocketLogic');
var Logger = require('Logger');
var TestPanelView = require('TestPanelView');
 return {
    firstMethod: function()
    {
             TestModel.doSomething();
             TestView.doSomethingElse();
             SocketLogic.andAnother();
             Logger.log("hi");
             TestPanelView.updateSomething();
             this.anotherMethod();
    },
    anotherMethod: function()
    {
             console.log("hello");
    }
    }
});

在这里,我再次收到“未加载上下文”错误,但这次是针对所有这些错误。

===========================

想法?

我一直在手动修补我发现的每一个,这是没有发生在所有只有一些在这里,这感觉像猴子修补。 ..我想知道我在这里做错了什么:(任何人都知道吗?

注意:我正在使用RequireJS v.2.1.10

1 个答案:

答案 0 :(得分:3)

尝试失败的答案#1

define(['require', 'TestModel', 'TestView', 'SocketLogic', 'Logger', 'TestPanelView'], 
function (require, testModel, testView, socketLogic, logger, testPanelView) {
    var firstMethod = function() {
             testModel.doSomething();
             testView.doSomethingElse();
             socketLogic.andAnother();
             logger.log("hi");
             testPanelView.updateSomething();
             this.anotherMethod();
    };
    var anotherMethod = function(){
        console.log("hello");
    }
 return {
    firstMethod: firstMethod,
    anotherMethod: anotherMethod
});

不要忘记,开头的花括号必须在同一行的函数的结尾圆括号之后。