module - 如何使用 RequireJS 构建多个页面

Question

如何使用 RequireJS 构建多个页面？像下面的示例一样，在 app.js 中声明每个类是正确的做法吗？有每个 html 文件来声明 <script data-main="src/main" src="src/require.js"></script> ?

我要避免的是当用户到达网站的第一页时加载所有脚本。

main.js 定义所有外部依赖:

require(
    {
        baseUrl:'/src'
    },
    [
        "require",
        "order!http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js",
        "order!http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js",
        "order!http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js",
        "order!http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"
    ], 
    function (require) {
        require(["app"], function (app) {
            app.start();
        });
    }
);

定义每个组件的 app.js 文件:

define([ "product/ProductSearchView",
         "product/ProductCollection"
         ], function (ProductSearchView,
                      ProductCollection) {
         return {
             start: function() {
                  var products = new ProductCollection();
                  var searchView = new ProductSearchView({ collection: products });
                  products.fetch();
                  return {};
             }
        }
});

Answer 1

您可以要求现有模块中的文件。所以说当有人点击一个链接时，你可以触发一个执行以下操作的函数:

// If you have a require in your other module
// The other module will execute its own logic
require(["module/one"], function(One) {
    $("a").click(function() {
        require(["new/module"]);
    });
});

// If you have a define in your other module
// You will need to add the variable to the require
// so you can access its methods and properties
require(["module/one"], function(One) {
    $("a").click(function() {
        require(["new/module"], function(NewModule) {
            NewModule.doSomething();
        });
    });
});