0

通过引入 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>
4

3 回答 3

1

我在这里发布了一个答案，可能有助于回答您的问题。

我在上面链接的答案将更多地解释这个过程，但是您可以严重依赖 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 配置/初始化过程的一部分。

于 2013-06-25T01:09:19.143 回答
1

看起来您正在使用嵌套，因为您正在尝试加载非 AMD 代码的依赖项 - 您应该这样做的方式是通过shim您的requirejs.config部分。

于 2013-06-24T13:26:58.953 回答
0

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

于 2013-06-24T15:52:47.930 回答