0

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

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

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

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 () {});部分呢？

我仍然可以保持这种方式，但是当我的主库被加载时，我将事件放在 RequireJS 的 main function() 上，而不是 jQuery 的 DOM 就绪函数？

或者我是否必须更改创建 JS“类”的方式，以包含一个 init 函数，当我执行时会调用它，例如：

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

最让我恼火的是，由于我只有一个 html 文件，我担心require()将不得不加载大量文件，我希望它只加载库，它们会加载工作所需的子库.

我不知道，RequireJS 的思维方式让我有点不知所措：/

你会怎么做？

4

1 回答 1

1

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

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

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() 将不得不加载大量文件，我希望它只加载它们会加载子的库工作所需的库。”

使您的代码尽可能模块化，然后使用优化器将其打包到一个 JS 文件中。

于 2012-07-26T13:06:27.873 回答