CODEWITHSUNDEEP
javascriptmodulerequirejs
Shaoz
Shaoz

Reputation: 10653

How do convert this module pattern to require.js?

I made a module pattern in my javascript, so I can just create modules and use them whenever I want to. But I don't know how I can convert it to Require.js. Each of the modules, i.e. Trades.toggleMenu, Trades.tabs, etc, will normally be in separate files. But I just included them here to make the story short for SO. Please help:

JS:

(function (window, $) {

  var Trades = (function(Trades) {

    // All modules should be initialised here. For produdction, use a module dependency library, e.g. require.js
    Trades.main = function() {

        this.toggleMenu();
        this.validation.run($('#registration-form, #homeowner-login-form, #tradesmen-login-form'));
        this.tabs();

    };

    Trades.toggleMenu = function() {

    };

    Trades.tabs = function(el) {

    };

    Trades.vaildation = function(el) {
        return {

            run: function (formName) {
                //do something...
            }

        };
    };

    return Trades;

  }(Trades || {}));

  window.Trades = Trades;

  $(function() { Trades.main(); });

}(window, jQuery));

Many Thanks

Upvotes: 0

Views: 1021

Answers (1)

Paul Grime
Paul Grime

Reputation: 15104

You would have a file called Trades.js that defines the "Trades" module:

define(["jquery"], function ($) {

    var Trades = (function(Trades) {
        ...
        return Trades;
    }(Trades || {}));

    return Trades;

});

And you would use it as follows:

require(["jquery", "Trades"], function ($, Trades) {

    $(function() {
        Trades.main();
    });

});

jQuery would be configured as a module either by using the RequireJS/jQuery combo file (http://requirejs.org/docs/jquery.html#get) or by defining a path for jquery like in this answer (Require.JS shim config global scope?).

Upvotes: 3

Related Questions