CODEWITHSUNDEEP
modulerequirejs
Cyril N.
Cyril N.

Reputation: 39869

How to structure a complex web app with RequireJS

I saw there is somes questions related to mine (like this interesting one), but what I wonders is how to do it correctly, and I couldn't find it via the others questions or the RequireJS documentation.

I'm working on a quite heavy web application that will run in only one html page.

Before RequireJS, I used to do a lot of JS modules with public methods and connecting them via the on event on the Dom READY method, like this :

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);
});

With RequireJS, I can easily see that I can split DataList and all others classes like this on individual files, but what about the $(function () {}); part?

Can I still keep it this way, but instead of the DOM ready function of jQuery, I put the events on the main function() of the RequireJS, when my primary libs are loaded?

Or do I have to change the way I create JS "classes", to include a init function maybe, that will be called when I do a, for example :

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

What annoys me the most is that since I have only one html file, I'm afraid the require() will have to load a huge list of files, I'd prefer it to load just libs that, them, would load sub libs required to work.

I don't know, the way of thinking with RequireJS lost me a bit :/

How would you do?

Upvotes: 0

Views: 810

Answers (1)

Simon Smith
Simon Smith

Reputation: 8044

"Can I still keep it this way, but instead of the DOM ready function of jQuery, I put the events on the main function() of the RequireJS, when my primary libs are loaded?"

If you separate the functions or 'classes' into modules then you can use the RequireJS domReady function:

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

The benefit here is the domReady function will allow downloading of the modules instantly but won't execute them until your DOM is ready to go.

"Or do I have to change the way I create JS "classes", to include a init function maybe, that will be called when I do a, for example"

You won't need to change the way you interact with your code this way, but you can probably improve it. In your example I would make DataList a module:

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);

});

"What annoys me the most is that since I have only one html file, I'm afraid the require() will have to load a huge list of files, I'd prefer it to load just libs that, them, would load sub libs required to work."

Make your code as modular as you want/can and then use the optimiser to package it into one JS file.

Upvotes: 1

Related Questions