Question

我是新来"需要JS"的但好像撞到砖墙了

麻烦从我的“ 应用程序” 模块开始。我不知道如何告诉 RuppJS 装入我的叶模块 - 取决于“ 应用程序” 的软件包。

我想我知道为什么, 因为系统中没有任何东西取决于他们, 他们也没有注册, 但我需要处理这个案子。

我怎么能让"需要"JS知道这些模块并适当装载它们呢?

干杯干杯

//index.html
....
<script data-main="app/config" src="/assets/js/libs/require.js"></script>
....

//config.js
require.config({
    deps: [ "app" ],
    paths: {
        libs: "../assets/js/libs",
        plugins: "../assets/js/plugins",
        jquery: "../assets/js/libs/jquery",
        underscore: "../assets/js/libs/underscore",
        backbone: "../assets/js/libs/backbone",
        marionette: "../assets/js/libs/backbone.marionette"
    }
});

//app.js
require(
    [ "jquery", "underscore", "backbone", "marionette" ],
    function ( $, _, Backbone, Marionette ) {
        //....
    }
);

//app.view.js
require(
    [ "jquery", "underscore", "backbone", "marionette", "app" ], 
    function ( $, _, Backbone, Marionette, App ) {
        //....
    }
);

//app.route.js 
require(
    [ "backbone", "app" ], 
    function ( Backbone, App ) {
        //....
    }
);

因此:

app.js depends on "jquery", "underscore", "backbone", "marionette"
app.view.js depends on "jquery", "underscore", "backbone",
"marionette", "app" app.route.js depends on "backbone", "app"

Answer 1

As stated in the docs -> http://requirejs.org/docs/api.html#config dependencies are defined in the deps array. They are the first thing that s loaded when require.js is run, it s really mostly used when you have to define dependencies before you load require.js.

这就是你结构的模样

//config.js
require.config({
    paths: {
        libs: "../assets/js/libs",
        plugins: "../assets/js/plugins",
        jquery: "../assets/js/libs/jquery",
        underscore: "../assets/js/libs/underscore",
        backbone: "../assets/js/libs/backbone",
        marionette: "../assets/js/libs/backbone.marionette"
    }
});

require([ app ]);

//app.js
define(
    [ "jquery", "underscore", "backbone", "marionette" ],
    function ( $, _, Backbone, Marionette ) {
        //....
    }
);

//app.view.js
define(
    [ "jquery", "underscore", "backbone", "marionette", "app" ], 
    function ( $, _, Backbone, Marionette, App ) {
        //....
    }
);

//app.route.js 
define(
    [ "backbone", "app" ], 
    function ( Backbone, App ) {
        //....
    }
);

请注意, 您的所有库和模块都必须符合 AMD 要求, 如果您想要使用应用程序作为像 apc.view.js 一样的路径, 您需要将其定义为一个路径。与 egis 相同, 因为您无法以这样的方式装入模块 [ "backbone, "App"], 如果它们没有被定义为路径。 config 配置为路径。

Answer 2

这就是我如何启动的:

// main.js
define(["jquery", "app", "router"], function ($, App) {
  "use strict";
  // domReady plugin maybe best used here?
  $(function() {
    App.start();
  });
});

// app.js
define(["backbone", "marionette"], function (Backbone) {
  "use strict";
  var app = new Backbone.Marionette.Application();
  app.on("initialize:after", function(options){
    if (Backbone.history){
      Backbone.history.start();
    }
  });

  return app;
});

// router.js
define(["backbone", "controller", "marionette"], function(Backbone, controller) {
  "use strict";
  var Router = Backbone.Marionette.AppRouter.extend({
    appRoutes: {
        "": "index"
    }
  });
  return new Router({
    controller: controller
  });
});

// controller.js
define(["view"], function(View) {
  return {
    "index": {
      new View(); // Do what you like here…
    }
  }
});

// view.js
define(["backbone"], function(Backbone) {
  // view here
});

I assume that the dependency to router.js could be put on app.js but basically the call to Backbone.history.start() needs routers to be loaded. The router has a dependency on the controller. It s the controller that has all the dependencies to the views etc that is used by it. There could be models and collections etc.

希望这有帮助。

友情链接