Question

我找到了一份工作，通过引入RequireJS来重新构建一个非常复杂的应用程序。该应用程序使用具有复杂类树的引擎。虽然努力实现我的目标和学习AMD我遇到了很多问题，但我会尽力坚持第一个问题。我加载了jQuery + knockout + mapping + Sammy的糟糕时间，但设法使用嵌套的requireJS调用。下面的代码有效，但我对嵌套的要求不满意。如何删除嵌套并只使用一个requireJS调用？


    // my first require: myBoot.js

/*
[www](index.html)
  |------scripts (app lies here)
            |-------libs (3th party libs)
            |-------engine (base URL)

*/

requirejs.config({
"baseUrl": "scripts/engine",
"paths": {
    "app": "../",
    "lib": "../libs",
    "knockout": "../libs/knockout-2.2.1.debug"
}//,
//"shim": {
//    "lib/jquery.mylibA": ["lib/jquery-2.0.0"],
//    "lib/jquery.mylibB": ["lib/jquery-2.0.0"]
//}
});

// load jquery
requirejs(["lib/jquery-2.0.0"], function ($) {

// load third party libraries
requirejs(["knockout", "lib/knockout.mapping-latest", "lib/sammy-latest.min"], function       (ko, komap, Sammy) {

    // Oh god! why?
    ko.mapping = komap;
    window.ko = ko;
    window.Sammy = Sammy;

    // load my self-made libs
    requirejs(["lib/jquery.mylibA", "lib/jquery.mylibB"

    // load my engine e FOOlings
    , "FOOEngine"
    // each FOOlings is a node in a FOO tree of classes, the goal here is to load them   by demand
    , "FOOling00"
    , /* 40 more FOOlings */
    , "FOOling41"

    // load my app
    ,"app/xmlLoader", "app/MoreLoaderStuff", "app/App"]);
});
});

/*
// example on FOOlings:

function FOOling21(settings) {
var self = this;

// lots of stuff: initialize, constructor, propertiers, methods...

//#region Constructor

if (settings) {
    $.extend(this, settings);
}

//#endregion

// can depend on other FOOlings like FOOling11 and FOOling02
// can request data from web services
// can uses ko to do binding data
// can depend on other libs
// etc

return this;
}

// can turn in? (for the sake of the example, F21 extendes F02 and uses F11 for generic stuff)

define(["FOOling11", "FOOling02"], function(f11, f02) {
return {
    function FOOling21() {
    var self = this;


    //#region Constructor

    if (f02) {
        $.extend(this, f02);
    }

    //#endregion

    //...

    return this;
    }
}

// or is a best pratice to do this way?
define(["FOOling11", "FOOling02"], function(f11, f02) {
return {
    var settings = f02;
    function FOOling21(settings) {

    // no changes ...

    return this;
    }
}

*/
</pre></code>

Answer 1

您似乎正在使用嵌套，因为您正在尝试加载非AMD代码的依赖关系 - 您应该通过requirejs.config部分中的shim执行此操作。

Answer 2

<强> I posted an answer here that may help answer your question.

我上面链接的答案将更多地解释这个过程，但你可以在很大程度上依赖require.js配置对象来构建脚本，如下所示：

var require = {
  paths: {
    'knockout': '...',
    'mapping': '...'
  },

  // configuration dependencies

  deps: ['knockout', 'mapping'],

  // configuration callback

  callback: function (ko, mapping) {
    ko.mapping = mapping;
  }
};

在上面的示例中，deps加载了require，然后callback被触发，我们可以将mapping附加到ko对象。所有未来的淘汰赛要求都将包括我们刚刚添加的mapping属性：

define(['knockout'], function (ko) {
  ko.mapping // mapping is accessible in other modules
});

使用此模式，您可以根据需要设置和“编写”脚本，作为整个require.js配置/初始化过程的一部分。

Answer 3

您也可以将此作为指导来帮助您组织： https://github.com/requirejs/example-multipage-shim

如何删除嵌套的RequireJS调用？

3 个答案: