Question

我看到有一些与我有关的问题（如this interesting one），但我想知道的是如何正确地做到这一点，而我无法通过其他问题或RequireJS文档找到它。

我正在处理一个非常繁重的Web应用程序，该应用程序只能在一个html页面中运行。

在RequireJS之前，我曾经使用公共方法做了很多JS模块，并通过Dom READY方法上的on事件连接它们，如下所示：

var DataList = function () {
    this.base = arguments[0];
    this.onUpdate = function (event) { ... }
}

$(function () {
    var dataList = {}; DataList.apply(dataList, [$('#content')]);
    $('table.main', dataList.base).on ('update', dataList.onUpdate);
});

使用RequireJS，我可以很容易地看到我可以在单个文件上拆分DataList和所有其他类，但是$(function () {});部分呢？

我是否仍然可以这样保留它，但是当我的主要libs被加载时，我将事件放在RequireJS的main函数（）上而不是jQuery的DOM就绪函数？

或者我是否必须改变我创建JS“类”的方式，包括一个init函数，可能会在我执行时调用，例如：

require(['Datalist'], function(dataList) {
    dataList.init($('#content'));
});

最让我烦恼的是，因为我只有一个html文件，所以我担心require()必须加载一个庞大的文件列表，我更喜欢它只加载libs，，将加载工作所需的子库。

我不知道，用RequireJS思考的方式让我有点失望：/

你会怎么做？

Answer 1

“我可以保持这种方式，但是当我的主要库加载时，我将事件放在RequireJS的main函数（）上而不是jQuery的DOM就绪函数吗？ “

如果将函数或“类”分成模块，则可以使用RequireJS domReady函数：

require(['module1'], function(module1) {
    domReady(function(){
        // Some code here ftw
    })
});

这里的好处是domReady函数允许立即下载模块，但在DOM准备就绪之前不会执行它们。

“或者我是否必须改变创建JS”类“的方式，包括一个init函数，可以在我执行时调用，例如”

您不需要以这种方式更改与代码交互的方式，但您可以改进它。在您的示例中，我将使DataList成为一个模块：

define(function(require) {
    var $ = require('jquery');

    var DataList = function () {
        this.base = arguments[0];
    };

    DataList.prototype.onUpdate = function() {

    };

    return DataList;
});

require(['data-list'], function(DataList) {

    var data = {};

    // Call DataList with new and you won't need to set the context with apply
    // otherwise it can be used exactly as your example
    new DataList(data);

});

“最让我烦恼的是，因为我只有一个html文件，我担心require（）必须加载一个巨大的文件列表，我更喜欢它只加载libs ，他们将加载工作所需的子库。“

根据需要将您的代码设置为模块化，然后then use the optimiser将其打包成一个JS文件。

如何使用RequireJS构建复杂的Web应用程序

1 个答案: